jQuery 中的 Ajax

2016-11-15 20:52:18来源:CSDN作者:cckevincyh人点击

JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get()$.post(), 第三层是 $.getScript()$.getJSON()


load() 方法

  • load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是: load(url[, data][,callback])

这里写图片描述
* 程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可

load() 方法 —- 细节

  • 传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
  • 对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4 种)和 XMLHttpRequest 对象
  • 方法的返回值是 jQuery
  • 如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)
var xmlHpptReq=$.get("base01.jsp",{username:"aa",psw:"8888"});var xmlHpptReq=$.get("base01.jsp",$("#form1").serialize());
  • 使用 serialize() 方法可以自动完成对参数的 url 编码
  • 因为该方法作用于 jQuery 对象, 所以不光只要表单能使用, 其它选择器选取的元素也能使用它.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>    <head>        <title>ddd</title>        <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <script language="JavaScript" src="../js/jquery-1.4.2.js">        </script>        <style type="text/css">            div, span {                width: 140px;                height: 140px;                margin: 20px;                background: #9999CC;                border: #000 1px solid;                float: left;                font-size: 17px;                font-family: Roman;            }            div.mini {                width: 30px;                height: 30px;                background: #CC66FF;                border: #000 1px solid;                font-size: 12px;                font-family: Roman;            }            div.visible {                display: none;            }        </style>        <!--引入jquery的js库-->    </head>    <body>        <form action="" name="form1" id="form1">            <input type="text" name="username" id="username" value="zhang">            <br>            <input type="text" name="psw" id="psw" value="99999">            <br>            <input type="button" id="b1" value="登陆">        </form>        <div id="one">        </div>    </body>    <script language="JavaScript">        $("#b1").click(function(){            /*             * load(url,data,callback)             *      * jquery对象调用load()方法,返回内容会自动写入jquery对象内             *      * url:请求路径             *      * data:请求数据,以key/value形式,json数据格式             *      * callback:回调函数,function(data,textStatus,XMLHttpRequest){}             *          * data:代表请求返回内容             *          * textStatus:代表请求状态,其值可能为: succuss, error, notmodify, timeout 4 种             *          * XMLHttpRequest对象             *              *      * load()方法的请求类型:             *          * 如果客户端没有向服务器端发送请求数据,那么请求类型就是"GET"方式             *          * 如果客户端向服务器端发送请求数据,那么请求类型就是"POST"方式             *          * load()方法的请求类型,是根据有没有向服务器端发送数据决定的。             */            //构建json数据            var json = {                username:$("#username").val(),                psw:$("#psw").val()            }            $("#one").load("load01.jsp",json,function(data,textStatus,XMLHttpRequest){                alert(data);            });        });    </script></html>

jsp页面:

<%@ page language="java" pageEncoding="UTF-8"%><%    System.out.println("请求类型:   "+request.getMethod());    System.out.println("connection server success!");    System.out.println("username = "+request.getParameter("username"));    System.out.println("psw = "+request.getParameter("psw"));    out.println("Hello World!");%>

结果:
这里写图片描述
这里写图片描述


$.get() (或$.post()) 方法

  • $.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type]);
    这里写图片描述
  • $.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
    方法的返回值:XMLHttpRequest对象
  • $.get()$.post() 方法是 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法

get方法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>ddd</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script language="JavaScript" src="../js/jquery-1.3.1.js"></script>    <style type="text/css">            div,span{                width: 140px;                height: 140px;                margin: 20px;                background: #9999CC;                border: #000 1px solid;                float:left;                font-size: 17px;                font-family:Roman;            }            div.mini{                width: 30px;                height: 30px;                background: #CC66FF;                border: #000 1px solid;                font-size: 12px;                font-family:Roman;            }            div.visible{                display:none;            }     </style>     <!--引入jquery的js库-->    </head>    <body>        <form action="" name="form1" id="form1">            <input type="text" name="username" id="username" value="zhang"><br>            <input type="text" name="psw" id="psw" value="99999"><br>            <input type="button" id="b1" value="登陆">        </form>        <div id="one">        </div>    </body><script language="JavaScript">            $("#b1").click(function(){            /*             * get(url,data,callback,type)             *      * url:请求路径             *      * data:请求数据,以key/value形式,json数据格式             *      * callback:function(data,textstatus){}             *          * data:代表返回的内容,可以是 XML 文档, JSON 文件, HTML 片段等             *          * textstatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种             *      * type:返回内容格式,xml, html, script, json, text, _default。             *              *      * 返回值:XMLHttpRequest             *              *      * get()方法无论发送不发送请求数据,请求类型都是"GET"方式             */            var json = {                username:$("#username").val(),                psw:$("#psw").val()            }            $.get("get.jsp",json,function(data,textstatus){                alert(data);            });        });</script></html>

jsp页面:

<%@ page language="java" pageEncoding="UTF-8"%><%    System.out.println(request.getMethod());    System.out.println("get connection server success!");    System.out.println(request.getParameter("username"));    System.out.println(request.getParameter("psw"));    out.println("Hello World!");%>

这里写图片描述
这里写图片描述

post方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>ddd</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script language="JavaScript" src="../js/jquery-1.3.1.js"></script>    <style type="text/css">            div,span{                width: 140px;                height: 140px;                margin: 20px;                background: #9999CC;                border: #000 1px solid;                float:left;                font-size: 17px;                font-family:Roman;            }            div.mini{                width: 30px;                height: 30px;                background: #CC66FF;                border: #000 1px solid;                font-size: 12px;                font-family:Roman;            }            div.visible{                display:none;            }     </style>     <!--引入jquery的js库-->    </head>    <body>        <form action="" name="form1" id="form1">            <input type="text" name="username" id="username" value="zhang"><br>            <input type="text" name="psw" id="psw" value="99999"><br>            <input type="button" id="b1" value="登陆">        </form>        <div id="one">        </div>    </body><script language="JavaScript">//      $("#b1").click(function(){//          //          /*//           * get(url,data,callback,type)//           *      * url:请求路径//           *      * data:请求数据,以key/value形式,json数据格式//           *      * callback:function(data,textstatus){}//           *          * data:代表返回的内容,可以是 XML 文档, JSON 文件, HTML 片段等//           *          * textstatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种//           *      * type:返回内容格式,xml, html, script, json, text, _default。//           * //           *      * 返回值:XMLHttpRequest//           * //           *      * get()方法无论发送不发送请求数据,请求类型都是"GET"方式//           *///          var json = {//              username:$("#username").val(),//              psw:$("#psw").val()//          }//          //          $.get("get.jsp",json,function(data,textstatus){//              alert(data);//          });//          //      });        $("#b1").click(function(){            /*             * post(url,data,callback,type)             *      * url:请求路径             *      * data:请求数据,以key/value形式,json数据格式             *      * callback:function(data,textstatus){}             *          * data:代表返回的内容,可以是 XML 文档, JSON 文件, HTML 片段等             *          * textstatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种             *      * type:返回内容格式,xml, html, script, json, text, _default。             *              *      * 返回值:XMLHttpRequest             *              *      * post()方法无论发送不发送请求数据,请求类型都是"POST"方式             */            var json = {                username:$("#username").val(),                psw:$("#psw").val()            }            $.post("get.jsp",json,function(data,textstatus){                alert(data);            });        });</script></html>

jsp页面

<%@ page language="java" pageEncoding="UTF-8"%><%    System.out.println(request.getMethod());    System.out.println("post connection server success!");    System.out.println(request.getParameter("username"));    System.out.println(request.getParameter("psw"));    out.println("Hello World!");%>

这里写图片描述
这里写图片描述


序列化元素

  • jQuery 为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法: serialize(). 该方法作用于一个 jQuery 对象, 能将 DOM 元素内容序列化为字符串, 用于 Ajax 请求.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>ddd</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script language="JavaScript" src="../js/jquery-1.3.1.js"></script>    <style type="text/css">            div,span{                width: 140px;                height: 140px;                margin: 20px;                background: #9999CC;                border: #000 1px solid;                float:left;                font-size: 17px;                font-family:Roman;            }            div.mini{                width: 30px;                height: 30px;                background: #CC66FF;                border: #000 1px solid;                font-size: 12px;                font-family:Roman;            }            div.visible{                display:none;            }     </style>     <!--引入jquery的js库-->    </head>    <body>        <form action="" name="form1" id="form1">            <input type="text" name="username" id="username" value="zhang"><br>            <input type="text" name="psw" id="psw" value="99999"><br>            <input type="button" id="b1" value="登陆">        </form>        <div id="one">        </div>    </body><script language="JavaScript">//      $("#b1").click(function(){//          //          /*//           * get(url,data,callback,type)//           *      * url:请求路径//           *      * data:请求数据,以key/value形式,json数据格式//           *      * callback:function(data,textstatus){}//           *          * data:代表返回的内容,可以是 XML 文档, JSON 文件, HTML 片段等//           *          * textstatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种//           *      * type:返回内容格式,xml, html, script, json, text, _default。//           * //           *      * 返回值:XMLHttpRequest//           * //           *      * get()方法无论发送不发送请求数据,请求类型都是"GET"方式//           *///          var json = {//              username:$("#username").val(),//              psw:$("#psw").val()//          }//          //          $.get("get.jsp",json,function(data,textstatus){//              alert(data);//          });//          //      });        $("#b1").click(function(){            /*             * post(url,data,callback,type)             *      * url:请求路径             *      * data:请求数据,以key/value形式,json数据格式             *      * callback:function(data,textstatus){}             *          * data:代表返回的内容,可以是 XML 文档, JSON 文件, HTML 片段等             *          * textstatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种             *      * type:返回内容格式,xml, html, script, json, text, _default。             *              *      * 返回值:XMLHttpRequest             *              *      * post()方法无论发送不发送请求数据,请求类型都是"POST"方式             *///          var json = {//              username:$("#username").val(),//              psw:$("#psw").val()//          }            //序列化元素            var json = $("#form1").serialize();            $.post("get.jsp",json,function(data,textstatus){                alert(data);            });        });</script></html>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台