AJAX表单提交和结果

问题描述：

刚刚通过JQuery开始使用AJAX，我无处可去。作为一个例子，我已经为它做了一份工作。提交表单并显示结果。很明显，我没有把握好。AJAX表单提交和结果

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; 
     ?>

这是我的尝试并没有任何反应。有任何想法吗？

奇妙。

，而不是数据： '文本=' +α，你可以做数据：文本：阿尔法。此外，是在同一个域的形式和PHP页面？ – 2011-02-28 23:30:58

所有在同一个域。主文件在其标题中具有该功能，PHP文件位于文件功能中。也可以是../../../functions/totals.php – 2011-02-28 23:32:33

尝试使用'$ alpha = $ _POST ['text']'并发布然后会发生什么。 – Blender 2011-02-28 23:35:38

答

首先，当您的脚本正在查找$_POST['alpha']时，您将$ _POST变量作为“文本”传递。如果你更新你的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将成功回调添加到您的$ .ajax调用中。

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

你好，谢谢你的回答。我仍然无处可去。当我发现自己写的结果不是结果作为跨度的id时，我认为我正在进行某些操作。仍然没有发生。没有证据表明这个程序甚至是激活的。绝对没有任何反应。 – 2011-02-28 23:55:46

@Robin，我已经更新了我的答案，以帮助更多。是否有任何错误报告？ – McHerbie 2011-03-01 00:29:05

就是这样。我刚刚得到它。这是错误的组合。它需要一个成功的功能，并且由于数据库的设置方式，我需要将PHP文件移动到更多的本地。 – 2011-03-01 00:42:16

答

在您的AJAX请求中，您发送的参数是foo.php?text=...，但在PHP文件中，您打电话$_POST['alpha']，它寻找foo.php?alpha=...。

将$_POST['alpha']更改为$_POST['text']并查看是否有效。

答

有一个简单的方法：

$("#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; 
});

这将使你处理变量一样正常。

AJAX表单提交和结果

相关推荐