Question

我有一张表格。我的目标是发送并将表单的值插入我的数据库。然后

清除表单
显示成功的讯息。像这样：

我的问题：当我按下“保存”按钮时，我被重定向到另一页。

这是操作错误：

并更改页面

¿我的代码有什么问题？

HTML

<html>
<head><title>Insert Data Into MySQL: jQuery + AJAX + PHP</title></head>
<body>

<form id="myForm" action="userInfo.php" method="post">
Name: <input type="text" name="name" /><br />
Age : <input type="text" name="age" /><br />
<button type="submit" id="sub">Save</button>
</form>

<span id="result"></span>

 <script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/elscript.js" type="text/javascript"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
</body>
</html

这是我的剧本

$("#myForm").submit( function(e) {

// Prevent the normal form submission event
e.preventDefault();

// Create an object of the form
var form = $(this);

// Make an AJAX request
$.post(this.action, form.serializeArray(), function(info) {

    // Clear the form
    form[0].reset();

    // Display message
    $("#result").html(info); 

});

}）;

最后，我的代码插入

   <?php 
        $conn = mysql_connect('localhost', 'root', '');
        $db   = mysql_select_db('practicas');

        $name = $_POST['name'];
        $age = $_POST['age'];

        if(mysql_query("INSERT INTO ajaxtabla VALUES('$name', '$age')"))
      echo "Successfully Inserted";
    else
      echo "Insertion Failed";
 ?>

感谢您的帮助

Answer 1

您可以通过在提交表单时只使用一个事件处理程序来简化代码。此外，您需要包含e.preventDefault()，这会阻止提交按钮的正常功能。

$("#myForm").submit( function(e) {

    // Prevent the normal form submission event
    e.preventDefault();

    // Create an object of the form
    var form = $(this);

    // Make an AJAX request
    $.post(this.action, form.serializeArray(), function(info) {

        // Clear the form
        form[0].reset();

        // Display message
        $("#result").html(info); 

    });

});

为您的按钮添加type属性，以确保您的表单在点击时提交。

<button type="submit" id="sub">Save</button>

<强>演示

＆＃13;

$(function() {
  $("#myForm").submit(function(e) {

    // Prevent the normal form submission event
    e.preventDefault();
    
    console.log('onsubmit event handler triggered');

    // Create an object of the form
    var form = $(this);

    // Make an AJAX request
    /*$.post(this.action, form.serializeArray(), function(info) {

      // Clear the form
      form[0].reset();

      // Display message
      $("#result").html(info);

    });*/
    
    // fake AJAX request
    setTimeout(function(){
       // Clear the form
      form[0].reset();
      // Display message
      $("#result").html('Successfully Inserted');
    }, 3000);
  });

});

＆＃13;

<form id="myForm" action="userInfo.php" method="post">
  Name: <input type="text" name="name" /><br /> Age : <input type="text" name="age" /><br />
  <button type="submit" id="sub">Save</button>
</form>

<span id="result"></span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

＆＃13;

Answer 2

在ajax中，您正在发布表单及其操作，以便重定向确认如果您不想重定向，请发送像这样的ajax请求

document.onkeydown = function(evt) {
    evt = evt || window.event;
    alert(evt.keyCode); // this will give you the code of key which was pressed
    //myFunction()
    //You can also call your custom function here
};

关于使用ajax保留页面的问题

2 个答案: