关于php：使用Ajax和jQuery发布表单


Post form with Ajax and jQuery

开始学习Ajax(和jQuery)，我遇到了帖子表单数据的问题，我无法自行解决。

首先，这是一个简单的例子，我收集数据，发布并在新页面上显示：

1
2
3
4
5
6
7
8
9
10
11
<!-- index.html -->
<form id="myForm" action="test.php" method="post">
<input type="checkbox" id="ch1" name="Ch1" value="1">Check Box 1 <br />
<input type="checkbox" id="ch2" name="Ch2" value="2">Check Box 2 <br />
<input type="submit" id="myButton" />
</form>

<?php
// test.php
print_r($_POST);
?>

然后我尝试使用Ajax和jQuery。 我稍微修改了上面粘贴的表格：

1
2
3
4
5
6
<!-- index.html -->
<form id="myForm">
<input type="checkbox" id="ch1" name="Ch1" value="1">Check Box 1 <br />
<input type="checkbox" id="ch2" name="Ch2" value="2">Check Box 2 <br />
<input type="button" id="myButton" value="Submit"/>
</form>

这是jQuery函数：

1
2
3
4
5
6
7
8
9
10
11
12
// script.js

$(document).ready(function () {
    $("#myButton").click(function () {
        $.ajax({
            cache: false,
            type: 'POST',
            url: 'test.php',
            data: $("#myForm").serialize()
        });
    });
});

我的问题是，如何重新实现jQuery函数以在test.php选项卡中回显结果？ 我抓了很多资源，但我找不到任何解决方案。

提前感谢任何指针。

最好的，安德烈

相关讨论

您将需要一个success回调，我将假设它将是一些HTML ...

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
    $("#myButton").click(function() {
        $.ajax({
        cache: false,
        type: 'POST',
        url: 'test.php',
        data: $("#myForm").serialize(),
        success: function(response) {
            $("#someElement").html(response);
        }
        });
    });
});
相关讨论

试试这个。

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
    $("#myButton").click(function() {
        $.ajax({
        cache: false,
        type: 'POST',
        url: 'test.php',
        data: $("#myForm").serialize(),
        success: function(data){
        alert(data);
        }
        });
    });
});

我相信你正在寻找.ajax选项参数中的success。

1
2
3
4
5
6
$.ajax({
  ...
  success: function(d){
    alert(d);
  }
});
相关讨论