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

时间:2011-06-23 21:27:27

标签: jquery forms html submit

使用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>

II。

行。我正在使用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>

III。

最后这段代码可以运行

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

1 个答案:

答案 0 :(得分:3)

有很多事情可能会出错。您确定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()方法,所以我想这是另一种选择。