Cara menggunakan ajax post data php

Daftar Isi Artikel

Table of Contents Show

Buat tampilan
Buat file aksi

1 Cara Menambah Banyak Data menggunakan PHP Ajax
- 1.1 Buat Tabel
- 1.2 Buat tampilan
- 1.3 Buat file aksi

Dengan mengirim atau memasukkan atau menyimpan banyak data dengan satu klik, Anda harus menggunakan kode Jquery dan javcript.

Disini kita menggunakan 2 file untuk Insert data dari database MySql menggunakan Ajax.

index.php
save.php

Buat Tabel

CREATE TABLE `user_data` (

`id` int(11) NOT NULL,

`Name` varchar(100) NOT NULL,

`email` varchar(50) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Salinan

The CREATE TABLE di MySQL database yang digunakan untuk membuat tabel baru

Buat tampilan

#index.php

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>

<div style="margin: auto;width: 60%;">

<form id="form1" name="form1" method="post">

<div class="form-group">

<label for="email">Student Name:</label>

<input type="text" name="sname" class="form-control" id="name">

</div>

<div class="form-group">

<label for="pwd">Student email:</label>

<input type="text" name="email" class="form-control" id="email">

</div>

<input type="button" name="send" class="btn btn-primary" value="add data" id="butsend">

<input type="button" name="save" class="btn btn-primary" value="Save to database" id="butsave">

</form>

<table id="table1" name="table1" class="table table-bordered">

<tbody>

<tr>

<th>ID</th>

<th>Name</th>

<th>email</th>

<th>Action</th>

<tr>

</tbody>

</table>

</div>

<script>

$(document).ready(function() {

var id = 1;

/*Assigning id and class for tr and td tags for separation.*/

$("#butsend").click(function() {

var newid = id++;

$("#table1").append('<tr valign="top" id="' + newid + '">\n\

<td width="100px" >' + newid + '</td>\n\

<td width="100px" class="name' + newid + '">' + $("#name").val() + '</td>\n\

<td width="100px" class="email' + newid + '">' + $("#email").val() + '</td>\n\

<td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>');

});

$("#table1").on('click', '.remCF', function() {

$(this).parent().parent().remove();

});

/*crating new click event for save button*/

$("#butsave").click(function() {

var lastRowId = $('#table1 tr:last').attr("id"); /*finds id of the last row inside table*/

var name = new Array();

var email = new Array();

for (var i = 1; i <= lastRowId; i++) {

name.push($("#" + i + " .name" + i).html()); /*pushing all the names listed in the table*/

email.push($("#" + i + " .email" + i).html()); /*pushing all the emails listed in the table*/

}

var sendName = JSON.stringify(name);

var sendEmail = JSON.stringify(email);

$.ajax({

url: "save.php",

type: "post",

data: {name: sendName, email: sendEmail},

success: function(data) {

alert(data); /* alerts the response from php.*/

}

});

});

});

</script>

</body>

</html>

Metode JSON.stringify() mengonversi objek atau nilai JavaScript menjadi string JSON, secara opsional mengganti nilai jika fungsi pengganti ditentukan atau secara opsional hanya menyertakan properti yang ditentukan jika larik pengganti ditentukan.

Buat file aksi

save.php

<?php

$nameArr = json_decode($_POST["name"]);

$emailArr = json_decode($_POST["email"]);

$con = mysqli_connect("localhost", "root", "", "php_ajax");

if (mysqli_connect_errno()) {

echo "Failed to connect to MySQL: " . mysqli_connect_error();

}

for ($i = 0; $i < count($nameArr); $i++) {

if (($nameArr[$i] != "")) { /* not allowing empty values and the row which has been removed. */

$sql = "INSERT INTO user_data (Name, email)

VALUES

('$nameArr[$i]','$emailArr[$i]')";

if (!mysqli_query($con, $sql)) {

die('Error: ' . mysqli_error($con));

}

}

}

Print "Data added Successfully !";

mysqli_close($con);

?>

Nah demikianlah tutorial dari kami skrip ini cocok di implementasikan untuk pembuatan aplikasi pos atau Kasir semoga bermanfaat