Question

我想做的是：

当您单击表单提交按钮时，页面不会重新加载，而是将表单中的数据发送到另一个页面进行处理，该页面的HTML输出将替换当前页面上的表单。更具体地说，我试图让添加评论表格无需重新加载页面（该页面上的Flash播放器中有视频流，如果每次有人提交评论时页面会重新加载，那么会浪费大量的金钱和带宽）。

以下是表单标记：

<div id="add-media-comment">
    <form enctype="application/x-www-form-urlencoded" method="post" action="/view/add-media-comment/id/12"><ol>
    <li><label for="body" class="required">Body</label>
    <div class="element">
    <textarea name="body" id="body" rows="10" cols="50"></textarea></div></li>
    <li><div class="button">
    <input type="submit" name="add_comment" id="add_comment" value="Submit" class="input-submit" /></div></li></ol></form>
</div>

这是我正在使用的javascript代码：

$('#add-media-comment form').submit(function() {
    // this is taken from the same page
    // I have tested this with alert() and yes
    // it is returning correct values
    var id = $('#media-photo img').attr('id');
    var url = '/view/add-media-comment/id/' + id;

    // let's submit the form to another page
    $.post(url, $(this).serialize(), function() {
        // and replace the content of #add-media-comment
        // with the resulting HTML from the submission page
        $('#add-media-comment').html(data);
    }, 'html');

    return false;
});

在点击提交按钮后，没有任何反应。页面没有重新加载，但我提交表单的页面上的代码也没有执行。

Answer 1

尝试在html的回调中使$.post可用，如果预期的返回数据是html，也不需要将第二个参数发布（'html'）：

$.post(url, $(this).serialize(), function(html) { //instead of function()
    alert(html);
    // and replace the content of #add-media-comment
    // with the resulting HTML from the submission page
    $('#add-media-comment').html(data);
});

Answer 2

您是否尝试过使用类似Firefox的Firebug插件？它为您提供了逐步调试以及跟踪ajax发送/响应活动的控制台。

JQuery文档上的签名将成功回调的签名显示为：

function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc...
  this; // the options for this ajax request
}

在这种情况下，使用Try / Finally块确保表单提交始终返回false也是一个好主意。

$('#add-media-comment form').submit(function(event) {
   try {
      var id = $('#media-photo img').attr('id');
      var url = 'view/add-media-comment/id/' + id;

      // let's submit the form to another page
      $.post(url, $(this).serialize(), function(data, textStatus) {
       // and replace the content of #add-media-comment
       // with the resulting HTML from the submission page
       $('#add-media-comment').html(data);
      }, 'html');
   }
   finally {
      return false;
   }
});

Answer 3

尝试修改你的形式：

<div id="add-media-comment">
<form enctype="application/x-www-form-urlencoded" method="post" onsubmit="return False;"><ol>
<li><label for="body" class="required">Body</label>
<div class="element">
<textarea name="body" id="body" rows="10" cols="50"></textarea></div></li>
<li><div class="button">
<input type="submit" name="add_comment" id="add_comment" value="Submit" class="input-submit" onclick="return Submit();"/></div></li></ol></form>

然后使用jquery ajax提交表单：

function Submit() {
    $.ajax({
        type: "POST",
        url: "/view/add-media-comment/id/" + $('#media-photo img').attr('id'),
        dataType: "json",
        data: $('#add-media-comment form').serialize(),
        error: function(){
            //do something
        },
        success: function(data){
            //do something
        }
    });
    return false;
}

而不是json，您可以使用其他类型的数据从服务器端函数返回..

提交事件帮助中的JQuery $ .post

3 个答案: