Jquery发布然后立即在同一页面上显示发布的数据答案

【问题标题】：Jquery post and then instantly display posted data on same pageJquery发布然后立即在同一页面上显示发布的数据
【发布时间】：2010-06-25 13:04:42
【问题描述】：

如何使用 ajax 发布数据并将发布的数据显示在同一页面上的 div 中而不刷新页面？

【问题讨论】：

标签： jquery ajax http-post

【解决方案1】：

为此，您不应该提交表单，而是通过单击事件捕获表单数据，通过 AJAX 提交数据，最后...将数据输入DIV 元素。例如

jQuery

$("#submitdata").click(function() {
  var FormVal={ datafield1:$('#field1').val(),
                datafield2:$('#field2').val()};

  $.ajax({
    type: "POST",
    url: "myupdatepage.cfm",
    dataType: "json",
    data: FormVal,
    async: false,
    success: function(response) { 
               $('#fillmein').html($('#field1').val()+'<br />'+$('#field1').val()); // Assign the values to the DIV
             }
  });
});

HTML

<form action="">
  <input type="text" id="field1">
  <input type="text" id="field2">

  <input type="button" id="submitdata" value="Submit data" />
</form>

<div id="fillmein"></div>

【讨论】：

【解决方案2】：

最好的 jquery 表单插件 http://jquery.malsup.com/form/ 甚至可以上传文件 - ajaxed

【讨论】：

【解决方案3】：

尝试这样的标记...

<form action="http://google.co.uk/search" method="get" onsubmit="postTheForm(this); return false;">
    <input type="hidden" name="q" value="Stackoverflow"/>
    <input type="submit" value="Click here"/>
</form>
<div id="postResults"></div>

使用这样的脚本...

function postTheForm(theForm){
    $.post(
        theForm.action, 
        $(theForm).serializeArray(), 
        function(data, textStatus, xmlHttpRequest){
            $("#postResults").html(data);
        }
    );
}

此示例使用 GET 方法，但这只是因为 Google 不接受 POST - 但原则应该让您工作，然后您可以更改为 POST（假设 POST 适合您的情况）

【讨论】：