Форма представления AJAX и результаты

Question

Только что начал использовать AJAX сегодня через JQuery, и я ничего не получаю.В качестве примера я создал для этого работу.Отправьте форму, а затем отобразите результаты.Очевидно, я не понял это правильно.

HTML.

<form id="PST_DT"  name="PST_DT" method="post">
<input name="product_title_1682" id="product_title_1682" type="hidden" value="PADI Open Water">
<input name="product_title_1683" id="product_title_1683" type="hidden" value="PADI Advanced Open Water">

<input type="submit" name="submit" id="submit" value="Continue" onclick="product_analysis_global(); test();"/>

</form>
<span id="results"></span>

На самом деле еще много полей загружаются динамически.Я планирую использовать ajax для отправки в PHP для некоторых простых математических операций, а затем для возврата результатов, но мы можем позаботиться об этом позже.

JQuery

function test() {

    //Get the data from all the fields
    var alpha = $('#product_title_1682').val();
    JQuery.ajax({
        type: 'POST',
        url: 'http://www.divethegap.com/update/functions/totals.php',
        data: 'text=' + alpha,
        beforeSend: function () {
            $('#results').html('processing');
        },
        error: function () {
            $('#results').html('failure');
        },
        timeout: 3000,

    });
};

и PHP

<?php
$alpha = $_POST['alpha'];
 echo 'Marvellous',$alpha;
       ?>

Это моя попытка, и ничего не происходит.Есть идеи?

Изумительно.

Answer 1

Прежде всего, вы передаете переменную $ _POST в виде 'text', в то время как ваш скрипт ищет $_POST['alpha'].Если вы обновите свой PHP до $_POST['text'], вы должны увидеть правильный текст.

Кроме того, если ваша форма будет содержать много входов, и вы хотите быть уверены, что все они будут переданы в ваш запрос AJAX, Я бы рекомендовал использовать метод jQuery serialize () .

data: $('#PST_DT').serialize(), // this will build query string based off the <form>
// eg: product_title_1682=PADI+Open+Water&product_title_1683=PADI+Advanced+Open+Water

В вашем PHP-скрипте вам нужно будет использовать $_POST['product_title_1682'] и $_POST['product_title_1683'].

UPDATE Добавить успешный обратный вызов к вашему $ .ajaxcall.

function test() {        

    // serialize form data
    var data= $('#PST_DT').serialize();

    // ajax request
    $.ajax({
        type  : 'POST',
         url  : 'http://www.divethegap.com/update/functions/totals.php',
         data : data,
         beforeSend : function() {
             $('#results').html('processing');
         },
         error : function() {
             $('#results').html('failure');
         },
         // success callback
         success : function (response) {
             $('#results').html(response);
         },
         timeout : 3000,
    });

};

В вашем скрипте PHP вы можете отлаживать отправленную информацию, используя:

var_dump($_POST);

Answer 2

Есть более простой метод:

$("#PST_DT").submit(function(e){
e.preventDefault();
$.ajax({
data: $(this).serialize(),
type: "POST",
url: 'http://www.divethegap.com/update/functions/totals.php',
success: function(){
....do stuff.
}
});
return false;
});

Это позволит вам обрабатывать переменные как обычно.

Answer 3

В вашем AJAX-запросе вы отправляете параметр foo.php?text=..., но в PHP-файле вы вызываете $_POST['alpha'], который ищет foo.php?alpha=....

Изменить $_POST['alpha'] на $_POST['text'] и посмотрите, работает ли это.