在jQuery中使用ajax

jquery_ajax

1.0 jQuery 中的Ajax

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

1.1 load::::

------------------------------------**************** 示例代码*******************----------------------------------------

< 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">

$ ( document ). ready ( function (){

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

/*

* $("#one").load("load01.jsp",xxx,function(data,textStatus,xmlHttpRequest){});

* * 载入远程HTML文件代码并插入至DOM中。

* * 该方法不是jquery的全部函数,所以必须用对象调用

* * 参数1:请求的url

* * 参数2:发送到服务器的数据,格式:{key01:value01,key02:vlaue02}

* * 参数3:回调函数function(data,textStatus,xmlHttpRequest)

* * data:代表请求返回内容的 data,服务器端返回的内容

* * textStatus:代表请求状态的 textStatus 对象,其值可能为: succuss, error, notmodify, timeout 4 种

* * xmlHttpRequest对象

*

* * 如果没有向服务器传递参数:则此时的请求方法是get

* * 如果向服务器传递参数:则此时的请求方法是post

*

*/

var jsonObj ={

username : $ ( "#username" ). val (),

psw : $ ( "#psw" ). val ()

}

//$("#one").load("load01.jsp",jsonObj,function(data,textStatus,xmlHttpRequest){

$ ( "#one" ). load ( "load01.jsp h1" , jsonObj , function ( data , textStatus , xmlHttpRequest ){

alert ( data );

});

});

});

</ script >

1.2 get & post

------------------------------------**************** 示例代码*******************----------------------------------------

< 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">

$ (). ready ( function (){

// $("#b1").click(function(){

// /*

// * $.get("get.jsp",function(data,textStatus){});

// * * 通过远程 HTTP GET 请求载入信息。

// * * 参数1:请求的url

// * * 参数2:发送到服务器的数据.格式:{key01:vlaue01,key02:vlaue02}

// * * 回调函数:function(data,textStatus)

// * * data:服务器返回的数据

// * * textStatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.

// * * 方法的返回值是xmlHttpRequest对象

// */

// var jsonObj={

// username:$("#username").val(),

//psw:$("#psw").val()

// }

//

// $.get("get.jsp",jsonObj,function(data,textStatus){

// //alert(data);

// $("#one").text(data);

// });

// });

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

/*

* $.post("get.jsp",function(data,textStatus){});

* * 通过远程 HTTP post 请求载入信息。

* * 参数1:请求的url

* * 参数2:发送到服务器的数据.格式:{key01:vlaue01,key02:vlaue02}

* * 回调函数:function(data,textStatus)

* * data:服务器返回的数据

* * textStatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.

* * 方法的返回值是xmlHttpRequest对象

*/

// var jsonObj={

// username:$("#username").val(),

//psw:$("#psw").val()

// }

//

var jsonObj = $ ( "#form1" ). serialize ();

$ . post ( "get.jsp" , jsonObj , function ( data , textStatus ){

//alert(data);

$ ( "#one" ). text ( data );

});

});

});

</ script >

1.3 序列化元素

1.4 JQuery 加载并解析 XML

l JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.

l JQuery 解析 XML 与解析 DOM 一样 , 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历