jQuery ajax

 一、getScript()方法

getScript() 方法通过 HTTP GET 请求载入并执行一个 JavaScript 文件(可以是远程的)

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title ></ title >
</ head >
    
< script  src ="jquery.js"  type ="text/javascript" >
    
</ script >
    
< script  type ="text/javascript" >
        $(document).ready( 
function (){
            $(
' #btn ' ).click( function (){
                $(
' #btn ' ).disabled = true ;
                $(
' #display ' ).html( ' Loding... ' ).css( ' color ' , ' red ' );
                jQuery.getScript(
' test.js ' , function (){
                    $(
' #display ' ).html( ' name: ' + user.name + '  email: ' + user.email).css( ' color ' , ' black ' );
                    $(
' #btn ' ).disabled = false ;
                });
            });
        });
    
</ script >
< body >
    
< input  type ="button"   id ="btn"  value ="载入"   />
    
< div  id ="display" ></ div >
</ body >

</html>  


、 利用ajax()方法调用WebService

 type

类型:String

默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

contentType

类型:String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。

url

  类型:String

  默认值: 当前页地址。发送请求的地址。
dataType

类型:String

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

  • "xml": 返回 XML 文档,可用 jQuery 处理。
  • "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
  • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
  • "json": 返回 JSON 数据 。
  • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
  • "text": 返回纯文本字符串

success

  类型:Function

  请求成功后的回调函数。

  参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

  这是一个 Ajax 事件。

 

注意:调用jQuery文件时路径应该是:

 

<script src="jquery.js" type="text/javascript"></script> 不能是
 src="~/jquery.js"
$( function () {
            
// 调用无参数方法
            $( " #btnHelloWorld " ).click( function () {
                $.ajax({
                    type: 
" POST " ,
                    contentType: 
" application/json " ,
                    url: 
" WebService.asmx/HelloWorld " ,
                    data: 
" {} " , //传递的参数为空
                    dataType: 
' json ' ,
                    success: 
function (result) {
                        alert(result.d);
                    }
                });

            });

});  


三、 取得JSON数据

1、getJSON()方法 

$.getJSON(url,parameters,callbackfunction)

   url是文件的名字以及它在服务器上的地址;

   parameters是要传递给url的字符串,其中包含名称/值对形式的信息;

   callback函数是请求成功完成时,服务器所作出的响应。

name.json

 [

{"name":"mbyd"},
{"name":"ricky"},
{"name":"dylan"}
]

getJSON.html

 <html xmlns="http://www.w3.org/1999/xhtml">

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > getJSON </ title >
< script  src ="jquery.js"  type ="text/javascript" ></ script >
< script  type ="text/javascript" >
    $(document).ready( 
function (){
        $(
' #submit ' ).click(  function (){
            $.getJSON(
' name.json ' , function (data){
                
var  name = " <ul> " ;
                $.each(data,
function (i,n){
                    name
+= " <li> " + n[ " name " ] + " </li> " ;
                });
                name
+= " </ul> " ;
                $(
' #message ' ).append(name);
            });
            
return   false // 抑制浏览器默认的点击行为,因为我们想要的是通过jQuery代码采取指定的动作而不是默认的动作
        });
    });
</ script >
</ head >
< body >
    
< input  type ="submit"   id ="submit"  value ="提交"   />
    
< div  id ="message" ></ div >
</ body >
</ html >

 2、ajax()方法

 <html xmlns="http://www.w3.org/1999/xhtml">

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title ></ title >
</ head >
< script  src ="jquery.js"  type ="text/javascript" ></ script >
< script  type ="text/javascript" >
    $(document).ready(
function (){
        $(
' #submit ' ).click(  function (){
            $.ajax({
                type:
" GET " ,
                url:
" name.json " ,
                dataType:
" json " ,
                success:
function (data){
                    
var  name = " <ul> " ;
                    $.each(data,
function (i,n){
                        name
+= " <li> " + n[ " name " ] + " </li> " ;
                    });
                    name
+= " </ul> " ;
                    $(
' #message ' ).append(name);
                }
            });
            
return   false ;
        });
    });
</ script >
< body >
    
< input  type ="submit"   id ="submit"  value ="提交"   />
    
< div  id ="message" ></ div >
</ body >
</ html >

四、 

你可能感兴趣的:(jQuery ajax)