jQuery之Ajax--辅助函数

1.这些函数用于辅助完成Ajax任务。

2.  jQuery.param()方法:创建一个数组或对象序列化的的字符串,适用于一个URL 地址查询字符串或Ajax请求。

     我们可以显示一个对象的查询字符串 和一个相应的URI-decoded 版本,如下:

var myObject = {
  a: {
    one: 1,
    two: 2,
    three: 3
  },
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);    

   recursiveEncodedrecursiveDecoded 的结果如下:

     a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3

     a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

3.  .serialize()方法:使用标准的 URL-encoded 符号上建立一个文本字符串. 它可以对一个代表一组表单元素的 jQuery 对象进行操作,比如<input>, <textarea>, 和 <select>: $( "input, textarea, select" ).serialize();

     例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    </head>

    <body>
        <form>
            <label for="username">用户名:</label><input type="text" id="username" name="username"/>
            <label for="password">密码:</label><input type="password" id="password" name="password"/>
            <input type="button" value="提交"  id="tijiao"/>
        </form>
        <script>
            $(function() {
                $("#tijiao").click(function() {
                    //event.preventDefault();
                    console.info($("form").serialize());

                });
            });
        </script>
    </body>
</html>

     结果:

4.  .serializeArray()方法:创建一个对象组成的javascript数组,用来编码成一个JSON一样的字符串。 它可以对一个代表一组表单元素的 jQuery 对象进行操作。表单元素可以有以下几种类型:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    </head>
    
    <body>
        <form>
            <div><input type="text" name="a" value="1" id="a" /></div>
            <div><input type="text" name="b" value="2" id="b" /></div>
            <div><input type="hidden" name="c" value="3" id="c" /></div>
            <div>
                <textarea name="d" rows="8" cols="40">4</textarea>
            </div>
            <div>
                <select name="e">
                    <option value="5" selected="selected">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                </select>
            </div>
            <div>
                <input type="checkbox" name="f" value="8" id="f" />
            </div>
            <div>
                <input type="submit" name="g" value="Submit" id="g" />
            </div>
        </form>
        <script>
            $(function() {
                $(‘form‘).submit(function() {
                    console.log($(this).serializeArray());
                    return false;
                });
            });
        </script>
    </body>
</html>

     .serializeArray()方法使用标准的W3C"successful controls"的标准来检测哪些元素应当包括在内。被禁用的元素不会被包括在内。并且,元素必须含有 name 属性。此外,提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

时间: 2024-11-13 21:24:37

jQuery之Ajax--辅助函数的相关文章

从零开始学习jQuery (六) AJAX快餐

原文:从零开始学习jQuery (六) AJAX快餐 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery

原生JS模拟JQuery封装Ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

Js原生Ajax和Jquery的Ajax

一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死 2.Ajax的运行原理 页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面1 功能. 二

jQuery与Ajax的应用

Ajax的全称:Asynchronous JavaScript and XML (异步Javascript和XML) 传统模式中,数据提交通过表单方式实现,数据的获取是靠全页面刷新来重新获取整页的内容.而Ajax模式只是通过XMLHttpRequest对象向服务器端提交数据,即按需发送.因为Ajax需要与Web服务器端进行交互,所以用个服务器,我这里用的是Tomcat.  1. 传统Js的Ajax操作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

Jquery的AJAX应用详解

案例一:取得服务端当前时间 简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间 <body> 当前时间: <span id="time"></span><br /> <input type="button" value="获取时间" /> <script type="text/javascript"> $(&q

ajax系列之用jQuery的ajax方法向服务器发出get和post请求

打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax. 1,前端的html和javascript代码 页面html 1 <main style="text-align: center; margin: 200px a

jquery中$.ajax方法提交表单

function postdata(){                        //提交数据函数 $.ajax({                                //调用jquery的ajax方法 type: "POST",                       //设置ajax方法提交数据的形式 url: "ok.php",                      //把数据提交到ok.php data: "writer=

jQuery之ajax错误调试分析

jQuery之ajax错误调试分析 jQuery中把ajax封装得非常好.但是日常开发中,我偶尔还是会遇到ajax报错.这里简单分析一下ajax报错 一般的jQuery用法如下,ajax通过post方式提交"汤姆和老鼠"这段数据到xxx.php文件中.成功后则打印返回的数据,失败则打印错误原因. 1 2 3 4 5 6 7 8 9 10 $.ajax({     url:"xxx.php",     type:"post",     dataty