简单的 AJax 调用不起作用 - 其他页面已加载 - Simple AJax call is not working - Other page get loaded

Simple AJax call is not working - Other page get loaded

我今天开始学习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。

将

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

由于表单和提交按钮神奇地附带了固有的功能，因此在使用 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);
        }
   });
});

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