javascript - jQuery AJAX 提交不工作

Question

我在使用 jquery ajax 提交表单时遇到问题。这是 jquery 代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
    $(function() {
        $(".submit").click(function() {
            var number = $("#number").val();
            var machine_id = $("#machine_id").val();
            var dataString = 'number='+ number + '&machine_id=' + machine_id;
            $.ajax({
                type: "POST",
                url: "http://www.onmsgmedia.com/hurryitUP/updatetextdatabase.php",
                data: dataString,
            });
            return false;
        });
    });
</script>

这是表单代码:

<form name="form" method="post" action="">
    <input type="hidden" id="machine_id" name="machine_id" value="5">
    <input type="text" id="number" name="number"></input>
    <input class="btn btn-small btn-success" type="submit" class="submit" id="submit" name="submit" value="submit">Submit</input>
</form>

以及updatetextdatabase.php的代码:

    <?php
date_default_timezone_set('America/New_York');//set time zone
$con=mysqli_connect('saslaundry.db.10410357.hostedresource.com', 'saslaundry', 'password', 'saslaundry');//establish connection
// Check connection
if (mysqli_connect_errno())//ping database to check connection
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();//error message
  }
    mysqli_query($con,"INSERT INTO textrequests VALUES('$_GET[number]', '$_GET[machine_id]') ");
    return;
?>

但它不仅没有提交表单，而且页面还会重新加载，这正是我使用 AJAX 试图避免的情况。我觉得问题在于提交按钮未调用该函数，但我不明白为什么。

谢谢!

Answer 1

尝试使用 e.preventDefault(); 阻止您的表单提交，然后执行您的 ajax 调用

<script type="text/javascript" >
    $(function() {
        $(".submit").click(function() {
            e.preventDefault();
            var number = $("#number").val();
            var machine_id = $("#machine_id").val();
            var dataString = 'number='+ number + '&machine_id=' + machine_id;
            $.ajax({
                type: "POST",
                url: "http://www.onmsgmedia.com/hurryitUP/updatetextdatabase.php",
                data: dataString,
               success: function (data) {
                //do something here when you got the response
             }
            });

        });
    });
</script>

event.preventDefault