1.jQuery获取表单的全部数据。
jQuery序列化表单数据 可以使用serialize()和 serializeArray()。
它们的区别如下：
(1).serialize()方法
格式：var data= $("form").serialize();
功能：将表单内容序列化成一个字符串。
这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为$("form").serialize() 即可。
data="username=kidd&mobile=12312312312"
(2).serializeArray()方法
格式：varjsonData = $("form").serializeArray();
功能：将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。
比如，[{"name":"lihui","age":"20"},{...}] 获取数据为 jsonData[0].name
data={"username":"kidd","mobile":"12312312312"}
2.jQuery获取表单指定name或者class或者id的数据值。
姓名<input type="text"id="username" class="username" name="username"value="">
手机<input type="text" id="mobile"class="mobile" name="mobile" value="">
//获取姓名的数据
$('#username').val(); //id选择器
$('.username').val(); //class选择器
$('[name="username"]').val(); //属性选择器
$('input:eq(0)').val(); //过滤选择器
$('input:first').val(); //过滤选择器
$(':text:eq(0)').val(); //表单选择器
$(':text:first').val(); //表单选择器 //获取手机的数据
$('#mobile').val(); //id选择器
$('.mobile').val(); //class选择器
$('[name="mobile"]').val(); //属性选择器
$('input:eq(1)').val(); //过滤选择器
$('input:last').val(); //过滤选择器
$(':text:eq(1)').val(); //表单选择器
$(':text:last').val(); //表单选择器 3.jQuery如何修改表单指定name,class,id的值。
修改表单元素的值，$(选择器).val(newdata);
//修改姓名
$('#username').val(newdata); //id选择器
$('.username').val(newdata); //class选择器
$('[name="username"]').val(newdata); //属性选择器
//修改电话
$('#mobile').val(newdata); //id选择器
$('.mobile').val(newdata); //class选择器
$('[name="mobile"]').val(newdata); //属性选择器4.jQuery如何找到父元素下指定class的子元素。
<div class="regist">
<divclass="name_element">
<label>姓名</label>
<inputtype="text" name="name">
<span></span>
</div>
<divclass="mobile_element">
<label>手机</label>
<inputtype="text" name="mobile">
<span></span>
</div>
</div>想要获取到regist下面的姓名中input的值可以使用后代选择器或者查找函数。
后代选择器：alert($('.registdiv:eq(0) [name="name"]').val());
find函数： alert($('.regist').find('[name="name"]').val());
练习demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery表单选择器</title>
<style type="text/css">
*{margin:0;padding:0;font-size:16px;}
.regist div{margin:10px auto;width: 500px;}
.regist label{display:inline-block;width:90px;text-align:right;}
.submit_element{width:100px;text-align: center;}
</style>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form action="demo161229.php" method="post" class="regist_form">
<div class="regist">
<div class="name_element">
<label>姓名</label>
<input type="text" name="name">
<span></span>
</div>
<div class="password_element">
<label>密码</label>
<input type="text" name="password">
<span></span>
</div>
<div class="repassword_element">
<label>确认密码</label>
<input type="text" name="repassword">
<span></span>
</div>
<div class="sex_element">
<label>性别</label>
<input type="radio" name="sex" checked="checked" value="1">男<input type="radio" name="sex" value="0">女
<span></span>
</div>
<div class="submit_element">
<input type="button" class="regist_btn" value="注册">
</div>
</div>
</form>
</body>
<script type="text/javascript">
function checkName(){
var name=$.trim($('[name="name"]').val());
var msg=null;
var flag=false;
if(name.length==0){
msg='姓名不能为空';
}else if(name.length<3){
msg='姓名不能少于3个字';
}else{
msg='ok';
flag='true';
}
$('.name_element span').text(msg);
return flag;
}
function checkPassword(){
var password=$('[name="password"]').val();
var msg=null;
var flag=false;
if(password.length==0){
msg='密码不能为空';
}else if(password.length<6){
msg='密码不能少于6个字符';
}else{
msg='ok';
flag='true';
}
$('.password_element span').text(msg);
return flag;
}
function checkRepassword(){
var password=$('[name="password"]').val();
var repassword=$('[name="repassword"]').val();
var msg=null;
var flag=false;
if(repassword.length==0){
msg='确认密码不能为空';
}else if(password!=repassword){
msg='两次密码不一致';
}else{
msg='ok';
flag='true';
}
$('.repassword_element span').text(msg);
return flag;
}
$(function(){
$('[name="name"]').blur(function(){
checkName();
});
$('[name="password"]').blur(function(){
checkPassword();
});
$('[name="repassword"]').blur(function(){
checkRepassword();
});
$('.regist_btn').click(function(){
if(!checkName()){
return;
}
if(!checkPassword()){
return;
}
if(!checkRepassword()){
return;
}
var url=$('form').attr('action');
//序列化表单提交
// $.post(url,$('form').serializeArray(),function(res){
// res=$.parseJSON(res);
// alert(res.info);
// });
//一个一个表单元素提交
var name=$.trim($('[name="name"]').val());
var password=$('[name="password"]').val();
var repassword=$('[name="repassword"]').val();
var sex=$('[name="sex"]').val();
$.post(url,{name:name,password:password,repassword:repassword,sex:sex},function(res){
res=$.parseJSON(res);
alert(res.info);
});
});
});
</script>
</html>
后台页面
<?php
$name=$_POST['name'];
$mobile=$_POST['mobile'];
$sex=$_POST['sex'];
$time=time();
if($sex==1){
$sex='先生';
}else{
$sex='女士';
}
$time=date('Y-m-d H:i:s',$time);
$info='恭喜你,'.$name.$sex.'你在'.$time.'成为了我们的会员！';
$res=array(
"status"=>1,
"info"=>$info
);
echo json_encode($res);
die();
?>