Question

您好我正在尝试使用下面的简单示例学习如何发布帖子请求。虽然我可以轻松地将数据发布到result.php并通过警报消息返回结果，但我想将结果返回到当前页面上的div中。这样做的原因是我希望用户在点击按钮后立即看到他们的名字出现在屏幕上。有人可以告诉我如何修改此代码，以便帖子的结果显示在div中而不是作为警告消息？感谢

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(document).ready(function(){
  $("#searchForm").submit(function(event){
    $.post("result.php",
     {
      name:"Mike"

      },
    function(data,status){
  //alert("Data: " + data + "\nStatus: " + status);
  $('#post-result').append(data);
      });
   });
  });
</script>

<form action="result.php" id="searchForm">
<input type="text" name="name" placeholder="Search..." />
<input type="submit" value="Search" />
</form>

<div id='post-result'></div>

Answer 1

你可以通过很多不同的方式做到这一点，其中一种可能是：

$('#idofdiv').html(data);

如果您使用上面的代码替换alert("Data: " + data + "\nStatus: " + status);并将idofdiv替换为您自己的div ID，那么它应该有效。

查看jQuery的文档以了解有关它的更多信息（http://api.jquery.com/）。

Answer 2

只需在页面上放置一个div并使用jQuery的append()将数据放入其中就像这样......

<div id='post-result'></div>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("result.php",
            $('#searchForm').serialize(),
            function(data,status){
                //alert("Data: " + data + "\nStatus: " + status);
                $('#post-result').append(data);
            }
        );
    });
});
</script>

更新 - 根据评论，添加了序列化表单的调用，以便脚本在提交时将当前表单数据发布到服务器。

在div中显示jquery post数据

2 个答案: