一.jQuery+Ajax表单数据序列化

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <p id="results"><b>Results: </b> </p>

     <form>

         <p>地址</p>

         <select name="address">

             <option>Guangdong</option>

             <option>Beijing</option>

             <option>Shanghai</option>

         </select>

         <p>爱好</p>

         <input type="checkbox" name="hobby" value="足球"/> 足球

         <input type="checkbox" name="hobby" value="蓝球" checked="checked"/> 蓝球

         <p>性别</p>

         <input type="radio" name="sex" value="male" checked="checked"/> 男

         <input type="radio" name="sex" value="female"/> 女

         <input type="radio" name="sex" value="保密"/> 保密

     </form>

 </body>

 </html>

 <script src="lib/jquery-1.12.2.js"></script>

 <script>

     // serialize 序列表表单数据

     // 返回结果：address=Guangdong&hobby=蓝球&sex=male

     //  序列化表单工作原理：

     //      1. 找到表单分区里面有name属性的表单项，

     //      2. 获取每一个name的值

     //      3. 把name属性和对应的值拼接成字符串

     console.log( $("form").serialize() );

     $("#results").append( $("form").serialize() );

 </script>

02_JQ_AJAX_post.php

 <?php

 /**

  * Created by qinpeizhou.

  * Date: 2017/11/10

  * Time: 15:03

  * Email : 1031219129@qq.com

  */

  header('Content-Type:text/html;charset=utf-8;');

 // echo 'Success，你成功的从PHP服务器拿到了数据';

 $uName = $_POST['userName'];

 $users = ["jack",'rose','tom'];

 $isExist = in_array($uName,$users);

 if($isExist) {

    echo "该帐号已注册，换一个试试";

 }else{

    echo "你可以注册";

 }

表单序列化例子：

<!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应用表单数据序列化

02_JQ_AJAX_post.php

表单序列化例子：

最新文章

热门文章