Ajax功能不能正常工作


Ajax function not working properly

我正在尝试使用ajax和插入部分插入基本的数据库插入,问题是页面在插入完成后被重定向。我以前遇到过这个问题,并找到了一个解决方案(更改src部分如下)

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

但这个解决方案没有工作,这次我dıing又错了吗?

this is 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("");
    });
}

submit调用实际上不属于click处理程序,如果你想通过创建的click处理程序以外的方式避免表单提交,请将其移出并使用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("");
    });
}

切换到.submit()事件处理程序:

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

描述

  1. 包装$。提交处理函数中的邮政编码。
  2. 使用event.preventDefault()函数来阻止表单提交。
  3. 使用$('#myform')[0].reset()清除输入字段,而不是使用单独的clear函数。

$("#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();
});

不确定这是否适用于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");
    });
});