Question

我今天开始学习AJAX。我写了一个简单的ajax调用，但它不是异步获取响应，而只是加载PHP脚本页面。就像普通表单提交一样。

HTML

<form id="form" method="POST" action="name.php">
   <input type="text" name="Name">
   <input type="submit" value="Submit" />

JS

$("#form").submit(function(e) {
    e.preventDefault();
    var url = "name.php";
    $.ajax({
           type: "POST",
           url: url,
           data: $("#form").serialize(),
           success: function(data)
           {
               alert(data);
           }
         });
});

PHP

<?php
     $data=  $_POST['Name'];
     echo $data;
 ?>

我没有在同一页面上获取警报，而是使用我提交的值重定向到name.php。

Answer 1

由于表单和提交按钮具有神奇的功能，因此在使用AJAX时通常最好避免使用它们。因此，例如，您仍然可以使用<form>元素作为字段包装器，但不要因为您没有使用它们而将属性放入其中。此外，将您的提交按钮替换为可以设置事件的标准锚点。这是一个粗略的例子：

<form id="myForm">

    <input type="text" name="myValue">

    <a href="#" class="btn-submit">Submit</a>

</form>

和JS：

$('.btn-submit').on('click', function(e) {
   e.preventDefault();
   var url = '/my/route/to/call';
   $.ajax({
        type: "POST",
        url: url,
        data: $("#myForm").serialize(),
        success: function(data)
        {
            alert(data);
        }
   });
});

正在发生的事情是表单提交按钮正在传播您没有停止的事件。采用这种方法可以消除像这样的奇怪错误的可能性。

Answer 2

在$(document).ready()内包装ajax调用解决了这个问题。

简单的AJax调用不起作用 - 其他页面加载

2 个答案: