Question

我正在构建一个将在页面上创建div的Web应用程序，使用ajax将表单加载到该div中，然后在不刷新父页面的情况下提交表单。我在这个网站上已经阅读了很多例子以及其他如何做到这一点的例子，但我很困惑为什么我的概念验证测试不适合我。

成功发生的是父页面正在创建新的div并将表单加载到div中。但是，在提交表单时，父页面会重新加载。在Opera中使用“Live HTTP Headers”，我可以看到提交表单导致GET而不是POST，即使我的Javascript正试图POST。

任何人都可以帮助我理解为什么会这样吗？非常感谢任何帮助。

以下是父HTML页面的代码：

<html>
<head>
  <script src=\"jquery-1.11.1.min.js\"></script>
  <script src=\"jquery.min.js\"></script>
  <script type=\"text/javascript\">
    var num=1;
    console.log('starting the code');

    $(document).ready(function() {
      console.log('document is ready');
      $('#form1').submit(function(event) { // catch the form's submit event
        console.log('form is going through submit');
        $.ajax({ // create an AJAX call...
          url: 'add_user.php', // the file to call
          type: 'POST', // GET or POST
          data: $('#form1').serialize(), // get the form data
          success: function(data) { // on success..
            $('#assign1').html(data); // update the DIV
          },
          error: function(xhr, status, e) {
            console.log('status');
            console.log('e');
          }
        });
        event.preventDefault(); // cancel original event to prevent form submitting
      });
    });

    function addToBox(divID) {
      console.log('adding new assign to box');
      var myNewDiv = document.createElement(\"div\");
      myNewDivID = 'assign'+num;
      myNewDiv.setAttribute('id', myNewDivID);
      myNewDivID = '#'+myNewDivID;
      var myBox = document.getElementById(divID);
      myBox.appendChild(myNewDiv);
      $.ajax({
        type: 'GET',
        url: 'add_user.php?id=1',
        success: function(data) {
          $(myNewDivID).html(data);
        },
        error: function(xhr, status, e) {
          console.log('status');
          console.log('e');
        }
      });
      num+=1;
    }
  </script>
</head>
<body>
<div>
  <div id=\"box1\"></div>
  <a href=\"javascript:addToBox('box1')\"><img src=\"/icons/add.png\" alt=\"Create new box\" /></a>
</div>
<div>
  <div id=\"box2\"></div>
  <a href=\"javascript:addToBox('box2')\"><img src=\"/icons/add.png\" alt=\"Create new box\" /></a>
</div>
</body>
</html>

以下是带有表单的PHP页面（名为add_user.php）的代码。

<?php
$n=0;
$id=$_GET['id'];
if ($_SERVER['REQUEST_METHOD']=="POST") {
  echo "got the form!";
} else {
  echo "<form id=\"form{$id}\"><select name=\"quantity\">\n";
  for ($n=1;$n<=5;$n++) {
    echo "<option value=\"answer{$n}\">option {$n}</option>\n";
  }
  echo "</select>\n<input type=\"submit\" /></form>";
}
?>

Answer 1

感谢A. Wolff的评论，我将$('#form1').submit(function(event) {替换为$(document).on('submit','#form1', function(event){并且有效。

谢谢A. Wolff！

无法在不重新加载父级的情况下使用ajax提交表单

1 个答案: