$(function(){

    $('#send').click(function(){

         $.ajax({

             type: "GET",

             url: "test.json",

             data: {username:$("#username").val(), password:$("#password").val()},  // 参数为对象

             dataType: "json",

             success: function(data){

                   // code...

             }

         });

    });

});
$(function(){

    $('#send').click(function(){

        var username = $("#username").val();

        var password = $("#password").val();

        $.ajax({

            type: "GET",

            url: "test.json",

            data: "username"+username+"&password"+password,  // 参数为字符串拼接，并用&连接

            dataType: "json",

            success: function(data){

                // code...

            }

        });

    });

});

以上是一段常规的ajax请求代码，其中分别列举了data参数的两种传递格式。

为了简便ajax请求时的data参数获取，jquery定义了几个快速的方法。

1.serialize()

　　用法：var data = $("form").serialize();

　　返回值：将表单内容序列化成一个字符串。

　　这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。

其核心方法是$.param()，用来对一个数组或对象按照key/value进行序列化，

var obj = {first:"one",last:"two"};

var str = $.param(obj);

console.log(str);    // first=one&last=two

　　另外，使用serialize有个好处是自带中文编译处理。所以，推荐使用serialize。

2.serializeArray()

　　用法：var jsonData = $("form").serializeArray();

　　返回值：将页面表单序列化成一个JSON结构（键值对）的对象。

　　比如，[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[index].name

综上：在使用ajax提交表单数据时,data参数设置为$(form).serialize()或$(form).serializeArray()都可以。另外有些细节建议参考w3c。

最后补充一个完整实例。

html：

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

    <form id="demo">

        <input type="text" value="demo1" name="demo1">

        <input type="text" value="demo2" name="demo2">

        <input type="text" value="demo3" name="demo3">

        <input type="submit" value="提交" id="submit">

    </form>

</body>

</html>

JavaScript：

<script>

    // 别忘了引入jquery !!!

    $(function(){

        $("#submit").click(function(){

        //  var data = $("form").serializeArray();

            var data = $("form").serialize();

            $.ajax({

                type:"GET",

                url:"1.php",

                data:data,

                dataType:"json",

                success:function(data){

                    console.log(data);

                },

                error:function(xhr,error){

                    console.log(error);

                }

            })

        })

    })

</script>

php  提醒：需要配置php环境并开启服务器

<?php

     echo json_encode($_GET);

 ?>

jquery表单序列化的更多相关文章

  1. Jquery表单序列化和AJAX全局事件

    Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...

  2. Jquery表单序列化和json操作

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jquery 表单序列化

    1.序列化为URL 编码文本字符串 var serialize = $("form[name=testForm]").serialize(); console.log(serial ...

  4. 将任意一个jQuery对象进行表单序列化，免除了提交请求时大量拼写表单数据的烦恼，支持键值对<name&value>格式和JSON格式。

    http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...

  5. （转）jquery serialize表单序列化，当radio或checkbox 未选中时，没有序列化到对象中的原因分析和解决方案 - ghostsf

    相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了. 这是一个很好用的函数, ...

  6. jQuery实现form表单序列化转换为json对象功能示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. jquery ajax（5）form表单序列化

    form表单序列化<script type="text/javascript"> $(function(){ $("#send").click(fu ...

  8. 浏览器下载/导出文件 及jQuery表单提交

    1 比如以下按钮, 用于导出文件,如EXCEL文件. <li> <button class="whiteBg btn2" onclick="doExp( ...

  9. $.ajax、$.post、from表单序列化工具

    $.ajax\$.post <script type="text/javascript" language="javascript" src=" ...

随机推荐

  1. Python科学计算—numpy模块总结（1）

    作为一个本科学数学专业,目前研究非线性物理领域的研究僧.用什么软件进行纯科学计算好,Fortran永远是第一位的:matlab虽然很强大,可以很容易的处理大量的大矩阵,但是求解我们的模型(有时可能是几 ...

  2. [CTSC1999]【网络流24题】星际转移

    Description 由于人类对自然资源的消耗,人们意识到大约在2300 年之后,地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,2177 年冬由于未知的原因,地 ...

  3. PHP填补数字前后的0

    PHP数字填补0 经常会遇到这样的问题: 自然数字是0,1,2,3...而我们需要的却是满足多少多少位数的数字,如:001,002. 在ID,编号,学号中我们会经常用到补全前面或者后面的空位(一般为前 ...

  4. 关于[JAVA] Apache FTPClient.listFiles()操作“卡死”问题的分析和解决

    项目中使用commons-net-3.0.1.jar实现FTP文件的下载,程序运行到 FTPClient.listFiles()或者FTPClient.retrieveFile()方法时,就停止在那里 ...

  5. ORA-22835 缓冲区对于 CLOB 到 CHAR 转换或 BLOB 到 RAW 转换而言太小

    在使用Oralce时,直接取出 CLOB 到 CHAR 转换或 BLOB 到 RAW 转换时,会出现ORA-22835的异常,以下是个人的解决方案 create or replace Function ...

  6. Redis学习-LUA脚本

    最近在做K线的项目中,需要计算商品的分时数据.为了保证多台机器对同一商品的计算的有序性,所以在Redis中进行计算,同时为了保证在分时数据计算过程的原子性所以使用了LUA脚本,Redis内置了对LUA ...

  7. JAVA的Executor框架

    Executor框架分离了任务的创建和执行.JAVA SE5的java.util.concurrent包中的执行器(Executor)管理Thread对象,从而简化了并发编程.Executor引入了一 ...

  8. JDK源码之AQS源码剖析

    除特别注明外,本站所有文章均为原创,转载请注明地址 AbstractQueuedSynchronizer(AQS)是JDK中实现并发编程的核心,平时我们工作中经常用到的ReentrantLock,Co ...

  9. JEESZ分布式框架简介

    声明:该框架面向企业,是大型互联网分布式企业架构,后期会介绍Linux上部署高可用集群项目. 项目基础功能截图(自提供了最小部分) 介绍 1.      项目核心代码结构截图 <modules& ...

  10. 【JAVAWEB学习笔记】20_增删改查

    今天主要是利用三层架构操作数据库进行增删查改操作. 主要是编写代码为主. 附图: 前台和后台 商品的展示 修改商品