码迷,mamicode.com
首页 > Web开发 > 详细

Ajax--serialize应用表单数据序列化

时间:2017-11-12 00:27:46      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:doc   ext   user   cli   code   服务   帐号   har   php   

一.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>

 

Ajax--serialize应用表单数据序列化

标签:doc   ext   user   cli   code   服务   帐号   har   php   

原文地址:http://www.cnblogs.com/mrszhou/p/7820427.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!