javascript jQuery ajax 表单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22180407/
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
jQuery ajax form doesn't work
提问by Paulo Coghi - Reinstate Monica
I tried many ways to create a simple jquery ajax form but don't know why it is not submitting and/or returning the notification.
我尝试了很多方法来创建一个简单的 jquery ajax 表单，但不知道为什么它不提交和/或返回通知。
Here is my code:
这是我的代码：
Javascript
Javascript
...
<script type="text/javascript" src="assets/js/jquery1.11/jquery-1.11.0.min.js"></script>
...
$('#form_signup').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'signup.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
console.log(data);
$('#form_signup_text').html(data.msg);
},
error: function (data) {
console.log(data);
$('#form_signup_text').html(data.msg);
}
});
});
HTML
HTML
<form id="form_signup" name="form_signup" method="POST">
<div>
<input type="email" id="inputEmail1" name="inputEmail1" placeholder="[email protected]">
</div>
<div>
<a type="submit">Sign up!</a>
</div>
<div id="form_signup_text">
<!-- A fantastic notice will be placed here =D -->
</div>
</form>
PHP
PHP
<?php
$our_mail = "[email protected]";
$subject = "Wohoo! A new signup!";
$email = $_POST['inputEmail1'];
$return = array();
$return['msg'] = 'Thank you!';
$return['error'] = false;
if(preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email)){
$message = "Yesss!! We receive a new signup!
E-mail: $email
";
mail($our_mail, $subject, $message);
}
else {
$return['error'] = true;
$return['msg'] .= 'Something is wrong... snifff...';
}
return json_encode($return);
Solved:
解决了：
There were three problems. And different users solve each of these problems.
存在三个问题。不同的用户可以解决这些问题中的每一个。
- In PHP, you must "echo" the return array instead of "return"
- At first, you should use a submit button instead of an anchor in the form
- In the input, you must set both "id" and "name"
- 在 PHP 中，您必须“回显”返回数组而不是“返回”
- 首先，您应该在表单中使用提交按钮而不是锚点
- 在输入中，您必须同时设置“id”和“name”
If any of these users want, you can edit or add a new answer with these details, and the points are yours.
如果这些用户中的任何一个想要，您可以使用这些详细信息编辑或添加新答案，这些点就是您的。
回答by Amit Garg
The problem is in your form.
问题出在你的表格上。
<form id="form_signup" name="form_signup" method="POST">
<div>
<input type="email" id="inputEmail1" name="inputEmail1" placeholder="[email protected]">
</div>
<div>
<input type="submit" name="submit" value="Submit">
</div>
<div id="form_signup_text">
<!-- A fantastic notice will be placed here =D -->
</div>
</form>
回答by Ijas Ameenudeen
You need to do 3 things.
你需要做3件事。
First, wrap your jQuery codes inside $(document).ready()function,
首先，将您的 jQuery 代码包装在$(document).ready()函数中，
<script type="text/javascript">
$(document).ready(function()
{
$('#form_signup').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'signup.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
console.log(data);
$('#form_signup_text').html(data.msg);
},
error: function (data) {
console.log(data);
$('#form_signup_text').html(data.msg);
}
});
});
});
</script>
Second, Add a submit button to your form. Also you are missing the nameattribute for the email input field. That causes the error in the php file.
其次，向表单添加提交按钮。您还缺少name电子邮件输入字段的属性。这会导致 php 文件中的错误。
<form id="form_signup" name="form_signup" method="POST">
<div>
<input type="email" id="inputEmail1" name="inputEmail1" placeholder="[email protected]">
</div>
<div>
<input type="submit" name="signup" value="Sign Up!"/>
</div>
<div id="form_signup_text">
<!-- A fantastic notice will be placed here =D -->
</div>
</form>
Third, echothe results since you are using AJAX to submit the form. returnwill not have any effects.
三、echo由于你使用AJAX提交表单的结果。return不会有任何影响。
<?php
$our_mail = "[email protected]";
$subject = "Wohoo! A new signup!";
$email = $_POST['inputEmail1'];
$return = array();
$return['msg'] = 'Thank you!';
$return['error'] = false;
if(preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email)){
$message = "Yesss!! We receive a new signup!
E-mail: $email
";
mail($our_mail, $subject, $message);
}
else {
$return['error'] = true;
$return['msg'] .= 'Something is wrong... snifff...';
}
echo json_encode($return);exit;
I checked and it's working fine.
我检查过，它工作正常。
Hope this helps :)
希望这可以帮助 ：）
回答by rm-vanda
The php code needs to echo instead of return.
php 代码需要回显而不是返回。
just like this:
像这样：
echo json_encode($return);
echo json_encode($return);
Also, your form needs a submit button - type="submit"on an <a>tag doesn't trigger the browser's functionality for handling <form>s
此外，您的表单需要一个提交按钮 -type="submit"在<a>标签上不会触发浏览器处理<form>s的功能
Finally, you need to ensure that your special submit handler is loaded at just the right time -- which, if it is included at the bottom of the page, right before the footer, it should be just fine. However, you can ensure this by wrapping it in
最后，您需要确保您的特殊提交处理程序在正确的时间加载——如果它包含在页面底部，就在页脚之前，它应该没问题。但是，您可以通过将其包装在
$(document).ready(function(){
//[...]
});
回答by Raz Wilson
doesn't your a type="submit"need to be an input instead? or a button
您type="submit"不需要成为输入吗？或一个按钮
回答by vipul verma
I am trying to call webmethod in a ajax using jquery in asp.net, but sometimes it works well and sometimes it doesn't.
我试图在asp.net 中使用jquery 在ajax 中调用webmethod，但有时它运行良好，有时则不起作用。
Here is my ajax code :
这是我的 ajax 代码：
$.ajax({
type: "POST",
url: "frmTest.aspx/fncSave",
data: "{}"
contentType: "application/json; charset=utf-8",
dataType: "json",
async: "false",
cache: "false", //True or False
success: function (response)
result = response.d;
if (result != "") {
alert(response);
}
},
Error: function (x, e) {
alert("err");
return false;
}
});
Here My Server Side Code :
这是我的服务器端代码：
<WebMethod()>
Public Shared Function fncSave() As String
Dim sResult As Int16
Try
Dim obj As New ClsCommon()
sResult = obj.Save()
Catch ex As Exception
ex.Message.ToString()
End Try
Return sResult
End Function
回答by Bene
$(this) in the "ajax" function is not the form. So just try:
$(this) 在“ajax”函数中不是形式。所以试试吧：
$('#form_signup').submit(function(event) {
event.preventDefault();
var $this = $(this);
$.ajax({
type: 'POST',
url: 'signup.php',
data: $this.serialize(),
dataType: 'json',
success: function (data) {
console.log(data);
$('#form_signup_text').html(data.msg);
},
error: function (data) {
console.log(data);
$('#form_signup_text').html(data.msg);
}
});
});
I admit i didn't check the rest of the code, im pretty sure thats the problem.
我承认我没有检查其余的代码，我很确定这就是问题所在。
Of course if the problem still goes, just "f12" and check console and network for server request and headers, make sure all the params are there.
当然，如果问题仍然存在，只需“f12”并检查控制台和网络的服务器请求和标头，确保所有参数都在那里。
Hope that helped
希望有所帮助
