Ajax--serialize应用表单数据序列化
生活随笔
收集整理的這篇文章主要介紹了
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>?
轉載于:https://www.cnblogs.com/mrszhou/p/7820427.html
總結
以上是生活随笔為你收集整理的Ajax--serialize应用表单数据序列化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第一章 Burp Suite 安装和环境
- 下一篇： 拦截器的的调用顺序