form表单提交的几种方式
原创
1.1 submit直接提交
<form action="test.php">
<label for="logInName">账号</label>
<input type="text" name="logInName" id="">
<label for="logInPwd">密码</label>
<input type="text" name="logInPwd" id="">
<input type="submit" value="提交">
</form>上面代码就可以直接完成form表单的提交，提交地址为test.php。但大部分时候我们都需要对提交的内容进行校验。这时候就需要用到了onsubmit了。
1.2 带校验的submit提交
<body>
<form action="test.php" onsubmit="return check()">
<label for="logInName">账号</label>
<input type="text" name="logInName" id="name">
<label for="logInPwd">密码</label>
<input type="text" name="logInPwd" id="pwd">
<input type="submit" value="提交">
</form>
<script>
function check(){
var nameVal = $("#name").val()
var pwdVal = $("#pwd").val()
// 校验失败
if(!nameVal){
alert("请输入账号")
return false
}
if(pwdVal){
alert("请输入密码")
return false
}
//校验成功
return true
}
</script>
</body>2. ajax提交
<form>
<label for="logInName">账号</label>
<input type="text" name="logInName" id="name">
<label for="logInPwd">密码</label>
<input type="text" name="logInPwd" id="pwd">
<input type="button" value="提交" class="submitBtn">
</form>
<script>
$(function () {
$('.submitBtn').click(function () {
var nameVal = $("#name").val()
var pwdVal = $("#pwd").val()
if (!nameVal) {
alert("请输入账号")
return false
}
if (!pwdVal) {
alert("请输入密码")
return false
}
$.ajax({
url:"test.php",
method:"post",
data:{
"name":nameVal,
"pwd":pwdVal,
},
success:function(res){
if(res.state==200){
console.log("请求成功")
}
},
//数据成功传到后台，也有返回值，但是报错了
error:function(XMLHTTPRequest,textStatus,errorThrown){
//通常情况下textState和errorThrown只有其中一个包含信息
console.log("请求失败")
}
})
})
})
</script>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
