一.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=male30 ????// ?序列化表单工作原理：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>Ajax--serialize应用表单数据序列化
原文地址：http://www.cnblogs.com/mrszhou/p/7820427.html