$(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. Latex 公式在线可视化编辑器

    寻觅 最近的一个demo需要用到Latex公式在线编辑器,从搜索引擎一般会得到类似http://latex.codecogs.com/eqneditor/editor.php的结果,这个编辑器的问题在 ...

  2. Extjs6（特别篇）——项目自带例子main.js拆分详解

    本文基于extjs6.0.0 一.拆分代码来看看 1.主页面main是个tab页: 写一些页面的依赖: 标明页面的controller和viewModel Ext.define('Learning.v ...

  3. HTML和CSS的知识点

    HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!- ...

  4. crash部分命令用法

    Set set [pid | taskp | [-c cpu] | -p] | [crash_variable [setting]] | -v 1.设置要显示的内容,内容一般以进程为单位. Set p ...

  5. Display:table;妙用，使得左右元素高度相同

    我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...

  6. 基于python的知乎开源爬虫 zhihu_oauth使用介绍

    今天在无意之中发现了一个知乎的开源爬虫,是基于Python的,名字叫zhihu_oauth,看了一下在github上面star数还挺多的,貌似文档也挺详细的,于是就稍微研究了一下.发现果然很好用啊.就 ...

  7. 如何高效的进行WebService接口性能测试

    版权声明:本文为原创文章,转载请先联系并标明出处 关于接口测试的理解,主要有两类,一类是模块与模块间的调用,此类接口测试应该归属于单元测试的范畴,主要测试模块与模块之间联动调用与返回.此类测试大多关注 ...

  8. Day5 模块及Python常用模块

    模块概述 定义:模块,用一砣代码实现了某类功能的代码集合. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,提供了代码的重用性.在Python中,一个.py文件就称之为一个模块(Mod ...

  9. git使用命令总结

    直接安装git.exegit -- version 查看当前git版本进入要创建库的文件夹 shift+右键 弹出 powerShell 弹出命令窗口 git init 初始化git管理仓库 出现一个 ...

  10. Hive load from hdfs 出错

    hive 加载HDFS的数据时出现错误, FATAL:SemanticException [Error 10028] search了一下,跟他一样Hive load from hdfs 出错. 我按照 ...