使用 AJAX 调用 PHP 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18538845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling PHP file using AJAX
提问by stu177
I'm trying to call a php file using the $.ajax() function in jQuery however it is not working. The following code is run when a button on the page is clicked:
我正在尝试使用 jQuery 中的 $.ajax() 函数调用一个 php 文件，但是它不起作用。单击页面上的按钮时运行以下代码：
if($error === false) {
alert($error);
$.ajax({
url: '/new-user.php',
type: 'POST',
data: {
name: $('#name').val(),
email: $('#name').val(),
password: $('#name').val()
}
});
This is my form:
这是我的表格：
<form onClick="return false;" class="reg-form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">First Name</label>
<input type="text" id="name" class="form-control" autofocus="autofocus">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Email Address</label>
<input type="text" id="email" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password-confirm">Confirm Password</label>
<input type="password" id="password-confirm" class="form-control">
</div>
</div>
</div>
<button class="btn trans reg-btn">Sign Up</button>
<div class="reg-msg">
<span id="password-error-msg">Passwords do not match.</span>
</div>
</form>
I have set the form's onClick to return false so that the form does not reload the page when submitted so that the jQuery can run.
我已将表单的 onClick 设置为返回 false，以便表单在提交时不会重新加载页面，以便 jQuery 可以运行。
Any help is greatly appreciated.
任何帮助是极大的赞赏。
回答by A.O.
The main reason why people use formsis so that you can define an
人们使用表单的主要原因是你可以定义一个
action(in your case a php script),
动作（在你的情况下是一个 php 脚本），
method(GET or POST) and a
方法（GET 或 POST）和
submitbutton that captures all the information in the form and automatically sends it to the server.
提交按钮，捕获表单中的所有信息并自动将其发送到服务器。
This is nice when you have 20-30 inputs or you are handling multiple file inputs. In your case you are handling the data retrieval in your ajax function, you have no submit button, action or method defined so you could make things a lot easier by not using a form at all....
当您有 20-30 个输入或您正在处理多个文件输入时，这很好。在您的情况下，您正在处理 ajax 函数中的数据检索，您没有定义提交按钮、操作或方法，因此您可以通过根本不使用表单来使事情变得更容易......
$.ajax({
url: '/new-user.php',
type: 'POST',
dataType: "json",
data: {
name: $('#name').val(),
email: $('#email').val(),
password: $('#password').val()
}
}).done(function(data){
alert(JSON.stringify(data));
});
I've left out the formatting divs for simplicity...
为简单起见，我省略了格式化 div...
<input type="text" id="name" class="form-control" autofocus="autofocus">
<input type="text" id="email" class="form-control">
<input type="password" id="password" class="form-control">
The above code will grab the data in your inputs, send it to the php script and output the data that is sent back from your php script in the alert.
上面的代码将获取您输入中的数据，将其发送到 php 脚本并在警报中输出从您的 php 脚本发回的数据。
And most importantly your page will NOT refresh!
最重要的是您的页面不会刷新！
回答by evan.stoddard
I actually serialize my form data because it's less code. Plus you can use it with multiple forms. For instance you can have a hidden input which holds a task number and have one php script to delegate tasks. Or you can have another variable for the submit function to pass a your script's location. Therefore I submit my forms like the following.
我实际上序列化了我的表单数据，因为它的代码更少。另外，您可以将它与多种形式一起使用。例如，您可以有一个隐藏输入，其中包含一个任务编号，并有一个 php 脚本来委派任务。或者您可以为提交函数使用另一个变量来传递脚本的位置。因此，我提交如下表格。
HTML:
HTML：
<form onsubmit="submitForm('#myForm'); return false;" id='myForm'>
<input type='text' name='name'/>
<input type='text' name='email'/>
<input type='text' name='password'/>
<input type='submit'/>
</form>
Javascript:
Javascript：
function submitForm(formId){
var formData = $.(formId).serialize();
$.ajax({
url: '/script.php',
type: 'POST',
data: formData,
success:function(response){
alert(response);
}
});
}
回答by vinayjags
Please try the following code:
请尝试以下代码：
$(".reg-btn").click(function(e)
{
e.preventDefault();
$.ajax({
url: '/new-user.php',
type: 'POST',
data: {
name: $('#name').val(),
email: $('#name').val(),
password: $('#name').val()
},
success:function(response){
//Do something here...
}
});
});
Please note that you don't have a submit button on your form. So return false is of no use..
请注意，您的表单上没有提交按钮。所以返回false是没有用的..
