一.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应用表单数据序列化的更多相关文章

  1. jQuery对的表单数据序列化和校验

    jQuery对的表单数据序列化和校验 表单序列化 如果想让表单通过ajax异步提交,那么首先我们要通过js获取到每个表单中输入的值,如果表单项比较多的话,是一件很麻烦,很痛苦的事情,那么我们可以通过j ...

  2. jquery ajax异步提交表单数据的方法

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  3. django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用

    一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...

  4. 使用ajax异步提交表单数据（史上最完整的版本）

    额 为啥用这个 不用form呢,因为这个效率高,而且在浏览器中运行程序的时候如果出现bug的话,页面不会显示显示错误信息,提高了用户的体验度. 那么,就来看看把,先给数据库表截个图哈 然后写项目被 我 ...

  5. ajax提交完表单数据依然跳转的解决办法

    1. 既然ajax提交数据,就把表单里面submit按钮换掉,因为触发submit他就会跳转页面 提交的时候他会先触发ajax 再触发submit的提交 2.如果确定了表单没有submit,那么把提交 ...

  6. ajax方式提交表单数据并判断当前注册用户是否存在

    项目的目录结构 源代码: regservlet.java package register; import java.io.IOException; import java.io.PrintWrite ...

  7. ExtJs之Ajax模式的表单数据加载

    简单: <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-e ...

  8. ajax提交form表单资料详细汇总

    一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...

  9. jQuery ajax中使用serialize()方法提交表单数据示例

    <form id="form"> 输入账号 :<input id="name" type="text" name=&quo ...

随机推荐

  1. Charles抓包(http/https请求)

    Charles安装 HTTP抓包 HTTPS抓包 1. Charles安装官网下载安装Charles:https://www.charlesproxy.com/download/当然由于国情可以使用破 ...

  2. Netty SimpleChannelInboundHandler和ChannelInboundHandler区别

    一般用netty来发送和接收数据都会继承SimpleChannelInboundHandler和ChannelInboundHandlerAdapter这两个抽象类,那么这两个到底有什么区别呢? 在客 ...

  3. Activiti历史查看

    流程执行完毕后,究竟去了哪里有些疑问. 虽然已完成的任务在act_ru_task和act_ru_execution表中都已被删除,但是这些数据还存在activiti的数据库中,作为历史改由Histor ...

  4. springboot拦截器的拦截配置和添加多个拦截器

    在spring2.0之前的版本大部分都采用extends WebMvcConfigurerAdapter,把拦截器配置成一个bean,具体的方法,我不细说,网上一大堆.而在spring2.0之后,这个 ...

  5. [NOI2015] 软件包管理器【树链剖分+线段树区间覆盖】

    Online Judge:Luogu-P2146 Label:树链剖分,线段树区间覆盖 题目大意 \(n\)个软件包(编号0~n-1),他们之间的依赖关系用一棵含\(n-1\)条边的树来描述.一共两种 ...

  6. BZOJ3907 网格 卡特兰数

    题目描述 某城市的街道呈网格状,左下角坐标为A(0, 0),右上角坐标为B(n, m),其中n >= m. 现在从A(0, 0)点出发,只能沿着街道向正右方或者正上方行走,且不能经过图示中直线左 ...

  7. LUOGU P3178 [HAOI2015]树上操作

    传送门 解题思路 树链剖分裸题,线段树维护. 代码 #include<iostream> #include<cstdio> #include<cstring> #d ...

  8. HTML5移动开发中的input输入框类型 (转)

    公司的项目开发过程中的,的用户体验忽略了.登录tel就用tel属性.新来的小伙伴提醒的.谢谢他 数字类型number 定义input类型为type="number"时,iOS显示数 ...

  9. 【HTML5】如何处理HTML5新标签的浏览器兼容版问题

    HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...

  10. Java中"str1.equals(str2)"和"str1==str2"的区别

    大家好,这是我的第一篇博客,作为即将入职的学生,我现在的心情是既好奇又兴奋,对未知的职场生活充满了无限的憧憬,也想赶紧对大学生活say goodbye,因为自己的能力现在还比较有限,我想通过博客这个平 ...