jQueryを使用してAjaxリクエストを行うには、次のコードでこれを行うことができます。
HTML：
<form id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Send" />
</form>
<!-- The result of the search will be rendered inside this div -->
<div id="result"></div>
JavaScript：
方法1
/* Get from elements values */
var values = $(this).serialize();
$.ajax({
url: "test.php",
type: "post",
data: values ,
success: function (response) {
// You will get response from your PHP page (what you echo or print)
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
方法2
/* Attach a submit handler to the form */
$("#foo").submit(function(event) {
var ajaxRequest;
/* Stop form from submitting normally */
event.preventDefault();
/* Clear result div*/
$("#result").html('');
/* Get from elements values */
var values = $(this).serialize();
/* Send the data using post and put the results in a div. */
/* I am not aborting the previous request, because it's an
asynchronous request, meaning once it's sent it's out
there. But in case you want to abort it you can do it
by abort(). jQuery Ajax methods return an XMLHttpRequest
object, so you can just use abort(). */
ajaxRequest= $.ajax({
url: "test.php",
type: "post",
data: values
});
/* Request can be aborted by ajaxRequest.abort() */
ajaxRequest.done(function (response, textStatus, jqXHR){
// Show successfully for submit message
$("#result").html('Submitted successfully');
});
/* On failure of request this function will be called */
ajaxRequest.fail(function (){
// Show error
$("#result").html('There is error while submit');
});
.success()、.error()、および.complete()コールバックがで廃止されているjQueryの1.8。最終的な削除のためにコードを準備する.done()に.fail()は、.always()代わりに、、およびを使用します。
MDN: abort()。リクエストがすでに送信されている場合、このメソッドはリクエストを中止します。
これで、Ajaxリクエストを正常に送信できたので、今度はサーバーにデータを取得します。
PHP
Ajax呼び出し（type: "post"）でPOSTリクエストを作成すると、$_REQUESTまたはを使用してデータを取得できるようになります$_POST。
$bar = $_POST['bar']
POSTリクエストで何が得られるかは、どちらかで確認することもできます。ところで、それ$_POSTが設定されていることを確認してください。そうしないと、エラーが発生します。
var_dump($_POST);
// Or
print_r($_POST);
そして、あなたはデータベースに値を挿入しています。クエリを実行する前に、GETまたはPOSTを実行したかどうかに関係なく、すべてのリクエストを適切に感知またはエスケープしていることを確認してください。準備されたステートメントを使用するのが最善です。
また、データをページに戻したい場合は、以下のようにそのデータをエコーするだけで実行できます。
// 1. Without JSON
echo "Hello, this is one"
// 2. By JSON. Then here is where I want to send a value back to the success of the Ajax below
echo json_encode(array('returned_val' => 'yoho'));
そして、あなたはそれを次のように得ることができます：
ajaxRequest.done(function (response){
alert(response);
});
簡単な方法がいくつかあります。以下のコードを使用できます。同じことを行います。
var ajaxRequest= $.post("test.php", values, function(data) {
alert(data);
})
.fail(function() {
alert("error");
})
.always(function() {
alert("finished");
});