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选项卡中的结果？我抓了很多资源，但我找不到任何解决方案。

提前感谢任何指针。

Best，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

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

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

使用Ajax和jQuery发布表单

3 个答案: