使用AJAX加载带有Form的页面，然后从Main页面提交表单

Question

我的文件夹中有两个页面， 主页 ＆amp; 辅助页面 ，它包含以下内容。

主页：

HTML

<div id='show'></div>

AJAX

$(document).ready(function() {
   $.post('sec_page.php',{form: form}, function(form){
      $('#show').html(form);
   })
})

辅助页面：

HTML

<form action='sec_page.php' method='post'>
    <input type='submit' id='submit' name='submit'>
</form>
<div id='vview'></div>

AJAX

$(document).ready(function() {
   $('#submit').submit(function(submit){
      submit.preventDefault();
      var Submission = $(this).serialize();
      var Action = $(this).attr('action');
      $.post('sec_page.php',{Submission : Submission}, function(vview){
            $('#vview').html(vview);
      })
   })
})

PHP

if(isset($_POST['submit'])){
   echo "The form has been Submitted!";
}

主页向我显示辅助页面内的所有内容，这是一个表单，如果我点击提交< / strong>按钮来自主页，它会将我重定向到辅助页面，而我不希望这种情况发生，因为我希望表单是从主页提交，并在其中显示echo;

所以我试图将 AJAX 放在辅助页面中并且没有解决问题，将其移至主页相反，并没有出现同样的问题;

简而言之，我如何从主页提交表单，而无需刷新或重定向到辅助页面。

如果不可能，我想知道更好的方法。

Answer 1

.serialize()不包含提交按钮 只有当您正常提交表格时，才会发送您用于提交表格的按钮 对于ajax，您可以手动将该值放入数据中或具有隐藏输入。

<form action='sec_page.php' method='post'>
    <input type='hidden' name='submit_name' value="submit_value">
    <input type='submit' id='submit' name='submit'>
</form>

PHP

if(isset($_POST['submit_name'])){
   echo "The form has been Submitted!";
}

您也可以单独传递序列化数据作为数据参数

  var Submission = $(this).serialize();
  var Action = $(this).attr('action');
  $.post('sec_page.php', Submission, function(vview){
        $('#vview').html(vview);
  })

此外，您必须将提交事件处理程序附加到表单而不是提交按钮

$('form').submit(function(submit){