使用 JQuery 提交表单，然后将结果从外部页面加载到 DIV

Question

我。

使用 JQuery 提交到另一个页面并将结果从外部页面加载到 DIV 中。似乎无法让它发挥作用。以下是我正在使用的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#msgform').submit(function () {
    $.post('blah.php', $('#msgform').serialize(), function (data, textStatus) {
         $('#msgresults').append(data);
    });
    return false;
});
});
</script>

<form id="msgform" action="blah.php" method="post" style="padding:0px;margin:0px;">
<input type="hidden" name="strmemid" value="someid" />
<textarea name="message" id="msgtextarea"></textarea>
<input type="submit" value="Submit" />
</form>

<div id="msgresults"></div>

二。

好的。我正在使用 JQuery 表单插件并使页面和数据库更新正常工作。我现在需要的只是在将表单提交到“msgresults”DIV 后，将警报（“谢谢您的评论”）替换为更新或附加来自外部页面的响应。 TIA

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

<script type="text/javascript"> 
$(document).ready(function() { 
$('#msgform').ajaxForm(function() { 
alert("Thank you for your comment!"); 
}); 
}); 
</script>

<div id="msgresults"></div>

三。

这段代码终于可以工作了

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#msgform').ajaxForm(function (data, textStatus) {
         $('#msgresults').append(data);
    });
}); 
</script>

Answer 1

有很多事情可能会出错。你确定AJAX请求返回成功了吗？我建议切换到

$.ajax({
  type: 'POST',
  url: 'blah.php',
  data: $('#msgform').serialize(),
  success: function (data, textStatus) {
     alert(data, textStatus);
     $('#msgresults').append(data);
  },
  error: function(xhr, status, e) {
    alert(status, e);
  }
});

它将帮助您调试代码的 ajax 部分。 $.post 不处理错误，因此（在我看来）使用它几乎不是一个好主意，因为您总是可能遇到需要处理的网络错误。使用较新的 jQuery，您仍然可以在 xhr 上使用 .error() 方法，所以我想这是一个替代方案。