Question

我正在尝试使用ajax进行基本数据库插入并且插入部分工作正常问题是页面在插入完成后被重定向。我之前发现了这个问题并找到了解决方案（改变了src部分如下）

src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

但这次解决方案确实有效，我又错了什么？

这是index.php

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="site.js"></script>
</head>
<body>
<form action="process.php" id="myForm"method="post">
    <input type="text" name="uname"><br>
    <input type="text" name="pass"><br>
    <input type="text" name="fname"><br>
    <input type="text" name="lname"><br>
  <button id="submit"  value="Insert"/> <br>

</form>
<div id="ack"></div>
</body>
</html>

这是我的脚本

   $("#submit").click( function() {

    $.post( $("#myForm").attr("action"),
        $("#myForm :input").serializeArray(),
        function(info) {

            $("#ack").empty();
            $("#ack").html(info);
            clear();
        });

});

$("#myForm").submit( function(event) {
    event.preventDefault();
    return false;
});

function clear() {

    $("#myForm :input").each( function() {
        $(this).val("");
    });

}

Answer 1

如果您想通过您创建的点击处理程序以外的方式避免表单提交，则提交调用并不真正属于点击处理程序，将其移出并使用event.preventDefault（）。

$("#submit").click( function() {

    $.post( $("#myForm").attr("action"),
        $("#myForm :input").serializeArray(),
        function(info) {

            $("#ack").empty();
            $("#ack").html(info);
            clear();
        });

});

$("#myForm").submit( function(event) {
    event.preventDefault();
    return false;
});

function clear() {

    $("#myForm :input").each( function() {
        $(this).val("");
    });

}

Answer 2

切换到.submit（）事件处理程序：

$("#myForm").submit(function(event) {
    $.post($("#myForm").attr("action"),
        $("#myForm :input").serializeArray(),
        function(info) {
            $("#ack").empty();
            $("#ack").html(info);
            clear();
        });
    event.preventDefault();
});

Answer 3

<强>描述

将$ .post代码包装在提交处理程序函数中。
使用event.preventDefault（）函数来阻止表单提交。
使用$（'＃myform'）[0] .reset（）清除输入字段，而不是使用单独的清除功能。

<强>代码

$("#myForm").submit(function (event) {
    $.post($("#myForm").attr("action"),
            $("#myForm :input").serializeArray(),
            function (info) {
                $("#ack").empty();
                $("#ack").html(info);
                // instead of using the clear() function
                // separately you may clear all the empty 
                // fields like this
                $('#myform')[0].reset(); 
            });
    event.preventDefault();
});

Answer 4

不确定这是否适用于jQuery 1.8.2，但这是我过去如何完成同样的事情。

$('#myForm').on('submit', function(e) {
    e.preventDefault();
    var details = $('#myForm').serialize();
    $.post('process.php', details, function(data) {
        $('#ack').html(data);
        $('#myForm').trigger("reset");
    });
});

Ajax功能无法正常工作

4 个答案: