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>