2011-02-28 92 views
1

刚刚通过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; 
     ?> 

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

奇妙。

+0

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

+0

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

+0

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

回答

2

首先,当您的脚本正在查找$_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); 
+0

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

+0

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

+0

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

0

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

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

0

有一个简单的方法:

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

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