Как отправить вызовы AJAX с помощью JQuery

Question

Как я могу использовать Jquery и ajax для размещения содержимого формы на php-странице для расчетов/sql-операторов и т. Д. И отображать ответ на страницу?

<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

Вам нужно будет сделать что-то вроде ниже.

Во-первых, вы создаете объект data, который вы отправите на конечную точку php. Этот объект данных является держателем, который заполняется всеми значениями из формы. Способ добавления значений к объекту из формы заключается в том, что вы перебираете форму и добавляете каждое значение из формы в объект 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" 
} 

Вы можете получить значение username с помощью response.username. Это вернет "garry", и то же самое для response.site Это вернет "StackOverflow".

You should read about accessing object properties on the MDN website. Если вы имеете дело с запросами ajax, вам необходимо понять это, чтобы иметь дело с ответом json с сервера. Вы можете использовать нотную обозначение точки или скобки. Оба они показаны ниже и вернут. Это зависит от вас, какой вы используете, не будет никакой разницы в результате.

Итак, вернемся к выше секции в POST запросе, если объект JSON выше был возвращен вы могли бы сделать это:

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 
    } 
});