一.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 : [email protected]
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>
时间： 2024-11-05 20:36:21