我正在尝试使用 jquery 和 ajax 提交表单。过去两天我一直在这样做，但我不知道为什么这不起作用。基本上，问题是:
- 获取发送的请求而不是发布
- 表单数据未经过验证
- 按下提交按钮后，表单将重置。
对于第一个问题，我也尝试过使用 $.post() ，但这也不起作用。我尝试使用 dataType:'text'，但这也不起作用。另外，正如 @AnilPanwar 指出的，我使用 #formdata 而不是 this ，这也不起作用
我不知道为什么会出现第二个问题。我一次又一次地改变了代码的结构，但数据没有得到验证。我已经分别测试了这些功能并且它们可以工作，但是当按下提交按钮时它们不起作用，即应该发送帖子数据的 if 条件返回 false(转到 else)，即使 if 条件内的测试也是如此单独为真
我怀疑第三个问题可能是由于第一个问题造成的。不过我不太确定。
预包含的脚本有 jquery.min.js 1.11.1、twitter bootstraps.min.js
拜托，请帮帮我。
<!DOCTYPE HTML>
<html>
<head>
<title>Live info a Sports Category Flat Bootstrap Responsive Website Template | Home :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Vide" />
<meta name="keywords" content="Live info Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
</head>
<?php
session_start();
include 'db.php';
if(isloggedin() == 0) {
include 'header.php';
?>
<br><br>
<form id="formdata">
<div class="contact signup-body">
<div class="login-body">
<div class="login-heading">
<h3>Sign up</h3>
</div>
<div class="login-info">
<input type="text" class="user" id="name" name="name" placeholder="Name" >
<div id="namem" style='text-align:center;color:red;'></div>
<input type="text" class="user" id="email" name="email" placeholder="Email">
<div id="emailm" style='text-align:center;color:red;'></div>
<input type="text" class="user" id="mobile" name="mobile" placeholder="Phone">
<div id="mobilem" style='text-align:center;color:red;'></div>
<input type="password" id="password" name="password" class="lock" placeholder="Password">
<div id ="passm" style='text-align:center;color:red;'></div>
<input type="password" id="repassword" name="repassword" class="lock" placeholder="Confirm Password" >
<div id = "repassm" style='text-align:center;color:red;'></div>
<input type="submit" id="signin" name="signin" value="Sign up">
<div class="signup-text">
<a href="#" data-toggle="modal" data-target="#myModal">Already have an account? Login here.</a>
</div>
</div>
</div>
<!-- Modal -->
<!-- // Modal -->
</div>
</form>
<!-- //contact -->
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$('#signin').click(function(event){
event.prevetnDefault();
var name = $('#name').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
var password = $('#password').val();
var repassword = $('#repassword').val();
var email_filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var mob_fil = /^[0-9]{10}$/i;
var string = /^[ a-zA-Z]+$/;
var pass = /^[a-zA-Z0-9_\.\-\@\!]*$/;
if (!(name == '' || email == '' || mobile== '' || password == '' || repassword == '')){
if (!email_filter.test(email)) {$('#emailm').html('Please provide a valid email address');}
if (!mob_fil.test(mobile)) {$('#mobilem').html('Please enter a 10 digit number');}
if (!string.test(name)) {$('#namem').html('Please enter only alphabets');}
if (!pass.test(password)) {$('#passm').html('Only alphabets,digits and special characters allowed in password');}
if(password.length<3) {$('#passm').html('please enter a bigger password');}
if (password!=repassword) {$('#repassm').html('Password and Confirm password do not match');}
}
if((email_filter.test(email)==true) && (mob_fil.test(mobile)==true) && (string.test(name)==true) && pass.test(password) && (password.length>3) && (password=repassword))
{
var dataString = $('#formdata').serializeArray();
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
dataType:"text",
contentType: 'application/x-www-form-urlencoded',
cache: false,
success: function(result){
var data="";
$("#message").html('success');
$("#name").val('');
$("#email").val('');
$("#mobile").val('');
$("#password").val('');
$("#repassword").val('');
},
error: function(error){console.log(error);}
});
}
else {$('#repassm').html("your form is not valid");}
});
});
</script>
<?php include 'login_modal.php';session_destroy();}
else { $url = 'index.php'; echo '<META HTTP-EQUIV=REFRESH CONTENT="0; '.$url.'">';} ?>
<!-- main content end-->
</div>
</div>
</div>
<?php include 'footer.php' ?>
</section>
</body>
</html>
此外，使用控制台没有显示 js 错误。单击“提交”后，页面会发送 GET 请求，其中字段值位于 URL 中。
以下是我拍摄的表格快照的链接
提交表单后控制台的快照:
提交表单后请求的快照:
正如@ADyson指出的那样，输入表单的数据没有被存储。我将变量声明移到提交函数中来解决这个问题。这确实解决了问题 3。但是现在，当我第二次按下提交按钮时，我无法将数据获取到我的脚本中。我已将编辑后的代码放入问题中。
最佳答案
在进行 ajax 调用之前，您的表单正在提交(以传统方式进行完全刷新)。这就是您看到 GET 请求的原因。发生这种情况是因为您的按钮是 input[type="submit"]。此类按钮的默认行为是在单击时提交其所在的表单。
解决办法:
首先，将 event.preventDefault(); 向右移动到点击事件的第一行。这将阻止表单提交的发生。目前，预防措施在该过程中发生得太晚了(当表格无效时根本没有预防措施)。
其次，如评论中所述，将 $("#this").serializeArray(); 替换为 $("#formdata").serializeArray();。在单击事件的上下文中，$(this) 表示被单击的按钮，而不是整个表单。
三、移动
var name = $('#name').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
var password = $('#password').val();
var repassword = $('#repassword').val();
在您的点击事件中。否则验证可能会失败，因为目前这些变量是在页面加载时填充的，而不是在用户提交时填充的。如果您随后使用这些变量来检查提交时数据的有效性，它们不会考虑用户在字段中输入的内容。
最后，完全删除 event.unbind();。解除绑定(bind)适用于元素，而不适用于事件。我认为这个命令实际上不一定会做任何坏事，但最好删除冗余/不正确的代码。请参阅http://api.jquery.com/unbind/了解如何使用此方法。
关于Jquery表单验证和提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38245800/