javascript - 动态加载表单和提交脚本

Question

我正在将表单动态加载到 div 中。使用 JQuery.post 发布表单时，应显示结果而无需重新加载整个页面。但响应中收到的内容会加载到整个浏览器中，因此主页不再显示菜单、 Logo 等。有很多 php 代码生成内容，这只是我认为现在可能感兴趣的内容:

<div id='subscribe_page'>
<div id='sub' class='subscribe'>
<form id='subscribe_now' action='subscription.php' name='subscribe' method='post'>
    <p class='formlabel'>Förnamn</p> <input type='text' id='first_name' name='first_name'/><br/>
    <p class='formlabel'>Efternamn</p> <input type='text' id='surname' name='surname'/> <br/>
    <p class='formlabel'>E-mail</p> <input type='text' id='email1' name='email1'/><br/>
    <p class='formlabel'>Repeat e-mail</p> <input type='text' id='email2' name='email2'/> <br/>
    <input class='inputsubmit' type='submit' value='Subscribe'/>
</form>
</div>
</div>
<script language='javascript' type='text/javascript' src='jquery-1.6.2.min.js'></script>
 <script language='javascript' type='text/javascript'>

  $(document).ready(function() {
   $('#subscribe_now').submit(function() {
   regExp = /^[^@]+@[^@]+$/;

   if(($('#email1').val().search(regExp) == -1) || !isEqual($('#email1').val(), $('#email2').val())) 
   { 
       alert('Incorrect entered email addresses. They must be valid e-mail addresses and equal.');
      return false; 
   } else{
    alert('Posting data' + $('#subscribe_now').serialize());
    $.post('subscription.php', $('#subscribe_now').serialize(), function(data) {
        $('#subscribe_page').html(data);
        alert('Posted data');
    });
    return true;
   }     

});

});     
</script>"

上面的所有内容都加载到属于主页的 div 中。发布后，我希望响应中的数据显示在 div subscribe_page 中。但事实并非如此。

请注意，$.post 内的警报不会被触发。不过，前一行的警报被触发，结果如下:

first_name=sertdg&surname=5tghf&email1=niklas%40iandapp.com&email2=niklas%40iandapp.com。

我也尝试指定应该返回的内容，而行为没有差异:

$.post('subscription.php', $('#subscribe_now').serialize(), function(data) {
        $('#subscribe_page').html(data);
        alert('Posted data');
}, 'html');

问题可能是什么以及如何解决？

Answer 1

好吧，我不太明白，但如果你明白的话:

 $('#subscribe_page').html(data); 

您实际上删除了该 div 中的所有内容，并将其替换为您的响应。也许你应该这样做:

 $('#subscribe_page').after(data);

或

 $('#subscribe_page').append(data);

编辑 - 由于问题出在您的 $.post 中，我认为您不应该使用 serialize()因为该函数与 $.get() 一起使用。你应该看看param()或serializeArray()