使用AJAX加载带有表单的页面，并从主页提交表单

Question

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

主页：

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!";
}

---

主页向我显示了辅助页面 （ 表单）中的所有内容 ，如果我单击主页上的“ 提交”按钮，它会将我重定向到辅助页面 ，并且我不希望这种情况发生，因为我想要从主页提交的表格，并在其中显示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);
  })

另外，您还必须将Submit事件处理程序附加到表单而不是Submit按钮上

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