Jqueryを使用してAJAX呼び出しを送信する方法

Question

Jqueryとajaxを使用して計算/ SQL文などのPHPページにフォームの内容を投稿し、ページに返信する方法を教えてください。

<form name="cancelForm" action="orderCanceled.php" method="POST"> 
    <input name="cancelExcursion" type="hidden" value="<?php echo $row['orderNo'] ?>" /> 
    <input name="qty" type="hidden" value="<?php echo $row['quantity'] ?>" /> 
    <input name="excursionId" type="hidden" value="<?php echo $row['excursionId'] ?>" /> 
    <input type="submit" value="Cancel Booking" id="blueButton" /> 
</form> 

Answer 1

以下のようにする必要があります。

まず、PHPエンドポイントに投稿するdataオブジェクトを作成します。このデータオブジェクトは、フォームのすべての値が入力されるホルダーです。値がフォームからオブジェクトに追加される方法は、フォームをループしてフォームの各値をdataオブジェクトに追加することです。

var data = {}; 
$.each($('form').serializeArray(), function(i, field) { 
    data[field.name] = field.value; 
}); 

次のステップは、データをサーバーに送信しますajaxPOST要求を設定することです。前に定義したdataオブジェクトが投稿されるのはここです。

$.ajax({ 
    type: "POST", 
    url: "orderCanceled.php", 
    data: data, 
    success: function(response) { 
    //response will contain the data returned 
    //from orderCanceled.php 
    $("body").append(response)  
    } 
}) 
.done(function() { 
    alert("success"); 
}) 
.fail(function() { 
    alert("error"); 
}); 

成功コールバックでは、orderCanceled.phpからの応答が返されます。このレスポンスを操作して、返されたレスポンスオブジェクトのjavascriptのドット表記を使用して、ページに表示するものを表示することができます。

レスポンスオブジェクトはJSONオブジェクトであり、このように見えたのであれば、たとえば：

{ 
    "username": "garry", 
    "site": "StackOverflow" 
} 

その後、response.usernameを使用してusernameの値を取得することができます。これは"garry"を返し、response.siteと同じです。これは"StackOverflow"を返します。

You should read about accessing object properties on the MDN website。あなたがajaxリクエストを扱っている場合は、サーバーからの応答jsonのようなものを処理するためにこれを理解する必要があります。ドット表記法またはかっこ表記を使用できます。両方とも以下に説明されています。あなたが使うものはあなた次第ですが、結果に違いはありません。

上記のJSONオブジェクトが返されたのであれば、バックPOST要求における上記のセクションに、あなたがこれを行うだろう：あなたはこのようにフォームを送信することができ

success: function(response) { 
    //data will contain the data returned 
    //from orderCanceled.php 
    $("body").append(response.username); 
    $("body").append(response["site"]);  
} 

Answer 2

を...

var cancelExcursion=$("input[name=cancelExcursion]").val(); 
var qty=$("input[name=qty]").val(); 
var excursionId=$("input[name=excursionId]").val(); 
var url='orderCanceled.php'; 
var data="cancelExcursion="+cancelExcursion+"&qty="+qty+"&excursionId"+excursionId; 
$.ajax({ 
    type: 'POST', 
    url: url, 
    data: data, 
    beforeSend: function() { 
     // You can set a loading image/div when form is submitting 
    }, 
    success: function(response) { 
// response contains the result from orderCanceled.php 
     // code for success notification 
    }, 
    error: function(xhr) { // if error occured 
     // code for showing error 
    } 
});