使用Ajax和jQuery发布表单

Question

开始学习Ajax（和jQuery）后，我遇到了邮寄表单数据的问题，我无法解决自己的问题。

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

<!-- 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。 我对上面粘贴的表格做了一些修改：

<!-- 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函数：

// script.js

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

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

在此先感谢您的指导。

最好的Andrej

Answer 1

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

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

Answer 2

尝试这个。

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

Answer 3

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

$.ajax({
  ...
  success: function(d){
    alert(d);
  }
});