jquery - 使用 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() 方法，所以我认为这是一种替代方法。