Ajax--serialize应用表单数据序列化
一.jQuery+Ajax表单数据序列化
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p id="results"><b>Results: </b> </p> 9 <form> 10 <p>地址</p> 11 <select name="address"> 12 <option>Guangdong</option> 13 <option>Beijing</option> 14 <option>Shanghai</option> 15 </select> 16 <p>爱好</p> 17 <input type="checkbox" name="hobby" value="足球"/> 足球 18 <input type="checkbox" name="hobby" value="蓝球" checked="checked"/> 蓝球 19 <p>性别</p> 20 <input type="radio" name="sex" value="male" checked="checked"/> 男 21 <input type="radio" name="sex" value="female"/> 女 22 <input type="radio" name="sex" value="保密"/> 保密 23 </form> 24 </body> 25 </html> 26 <script src="lib/jquery-1.12.2.js"></script> 27 <script> 28 // serialize 序列表表单数据 29 // 返回结果：address=Guangdong&hobby=蓝球&sex=male 30 // 序列化表单工作原理： 31 // 1. 找到表单分区里面有name属性的表单项， 32 // 2. 获取每一个name的值 33 // 3. 把name属性和对应的值拼接成字符串 34 console.log( $("form").serialize() ); 35 $("#results").append( $("form").serialize() ); 36 </script>
02_JQ_AJAX_post.php
1 <?php 2 /** 3 * Created by qinpeizhou. 4 * Date: 2017/11/10 5 * Time: 15:03 6 * Email : 1031219129@qq.com 7 */ 8 header('Content-Type:text/html;charset=utf-8;'); 9 // echo 'Success，你成功的从PHP服务器拿到了数据'; 10 $uName = $_POST['userName']; 11 $users = ["jack",'rose','tom']; 12 $isExist = in_array($uName,$users); 13 if($isExist) { 14 echo "该帐号已注册，换一个试试"; 15 }else{ 16 echo "你可以注册"; 17 }
表单序列化例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tips{
color:red;
}
</style>
</head>
<body>
<form action="02_JQ_AJAX_post.php" method="POST" id="loginForm">
<p class="tips" id="tips"></p>
用户名<input type="text" name="userName" id="userName"/>
密码<input type="password" name="userPwd" id="userPwd"/>
<input type="submit" id="submitBtn" value="登录">
</form>
</body>
</html>
<script src="lib/jquery-1.12.2.js"></script>
<script>
/* $('#userName').blur(function () {
/!**
* $.ajax({});
* url 服务器地址
* *!/
var txt = $(this).val();
$.ajax({
type:'GET',
url:'01_JQ_AJAX_get.php',
data:{
userName : txt
},
success : function (res) {
$('#tips').html(res);
}
});
});*/
$('#submitBtn').click(function () {
var userText = $('#userName').val();
if($.trim(userText).length==0){
$('#tips').html("用户名不能为空");
}
$.ajax({
type: 'POST',
url: '02_JQ_AJAX_post.php',
data: $('#loginForm').serialize(), // 表单数据序列化
success: function (res) {
$("#tips").html( res );
}
});
// 阻止提交按钮的默认行为
return false;
});
</script>
