我今天开始学习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);
}
});
});
正在发生的事情是表单提交按钮正在传播您未停止的事件。采用这种方法可以消除出现此类奇怪错误的可能性。