本文介绍了（解决了）jQuery ajax表单不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试了很多方法来创建一个简单的jQuery ajax表单，但不知道为什么它不提交和/或返回通知。
这是我的代码：
Javascript
.. 。
< script type =text / javascriptsrc =assets / js / jquery1.11 / jquery-1.11.0.min.js>< / script>
$（'＃form_signup'）。submit（function（event）{
event.preventDefault（）;
$ .ajax（{ b $ b type：'POST'，
url：'signup.php'，
data：$（this）.serialize（），
dataType：'json'，
成功：function（data）{
console.log（data）;
$（'＃form_signup_text'）。html（data.msg）;
}，
error：function （data）{
console.log（data）;
$（'＃form_signup_text'）。html（data.msg）;
}
}）;
}）;
HTML
< form id =form_signupname =form_signupmethod =POST>
< div>
< input type =emailid =inputEmail1name =inputEmail1placeholder =your@email.com>
< / div>
< div>
< a type =submit>注册！< / a>
< / div>
< div id =form_signup_text>
< / div>
< / form>
PHP
<？php
$ our_mail =our@email.com;
$ subject =Wohoo！新注册！;
$ email = $ _POST ['inputEmail1'];
$ return = array（）;
$ return ['msg'] ='谢谢！';
$ return ['error'] = false;
if（preg_match（/（[\ w \ - - ] + \ @ [\w\ - - ] + \。[\ w\ - - ] +）/ ，$ email））{
$ message =Yesss !!我们收到一个新注册！
E-mail：$ email
;
邮件（$ our_mail，$ subject，$ message）;
}
else {
$ return ['error'] = true;
$ return ['msg']。='有问题... snifff ...';
}
返回json_encode（$ return）;
注意：
有三个问题。不同的用户可以解决这些问题。
- 在PHP中，您必须回显返回数组而不是return >
- 首先，您应该使用提交按钮而不是以
- 形式的锚点在输入中，您必须同时设置id和name
如果有这些用户需要，您可以编辑或添加包含这些详细信息的新答案，您需要做3件事。
$ b / strong>，将您的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>
第二，为您的表单添加一个提交按钮。此外，您还缺少电子邮件输入字段的 名称 属性。
< form id =form_signupname =form_signupmethod =POST >
< div>
< input type =emailid =inputEmail1name =inputEmail1placeholder =your@email.com>
< / div>
< div>
< input type =submitname =signupvalue =注册！/>
< / div>
< div id =form_signup_text>
< / div>
< / form>
第三， code> ，因为您使用AJAX提交表单。
$ b
><？php
$ our_mail =our@email.com;
$ subject =Wohoo！新注册！;
$ email = $ _POST ['inputEmail1'];
$ return = array（）;
$ return ['msg'] ='谢谢！';
$ return ['error'] = false;
if（preg_match（/（[\ w \ - - ] + \ @ [\ w\ - - ] + \。[\ w\ - - ] +）/ ，$ email））{
$ message =Yesss !!我们收到一个新注册！
E-mail：$ email
;
邮件（$ our_mail，$ subject，$ message）;
}
else {
$ return ['error'] = true;
$ return ['msg']。='有问题... snifff ...';
}
echo json_encode（$ return）; exit;
我检查过了，它工作正常。
希望这有助于：）
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.
Here is my code:
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
<form id="form_signup" name="form_signup" method="POST">
<div>
<input type="email" id="inputEmail1" name="inputEmail1" placeholder="your@email.com">
</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
$our_mail = "our@email.com";
$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);
Note:
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"
If any of these users want, you can edit or add a new answer with these details, and the points are yours.
解决方案
You need to do 3 things.
First, wrap your jQuery codes inside $(document).ready() function,
<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 name attribute for the email input field. That causes the error in the php file.
<form id="form_signup" name="form_signup" method="POST">
<div>
<input type="email" id="inputEmail1" name="inputEmail1" placeholder="your@email.com">
</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, echo the results since you are using AJAX to submit the form. return will not have any effects.
<?php
$our_mail = "our@email.com";
$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 :)
这篇关于（解决了）jQuery ajax表单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！