ajax入门实例详解,方法参数详解
分类:关于美高梅

复制代码 代码如下:

Ajax

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

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。

type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和

      delete也可以使用,但仅部分浏览器支持。

timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设

         置。

async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。

       如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等

       待请求完成才可以执行。

cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。

       设置为false将不会从浏览器缓存中加载请求信息。

data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格

      式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格

      式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同

      值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime

          信息返回responseXML或responseText,并作为回调函数参数传递。

          可用的类型如下:

          xml:返回XML文档,可用JQuery处理。

          html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。

          script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求

                  时(不在同一个域下),所有post请求都将转为get请求。

          json:返回JSON数据。

          jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个

                “?”为正确的函数名,以执行回调函数。

          text:返回纯文本字符串。

beforeSend:要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义

            HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参

            数。

            function(XMLHttpRequest){

               this;   //调用本次ajax请求时传递的options参数

            }

complete:要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。

          参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。

          function(XMLHttpRequest, textStatus){

             this;    //调用本次ajax请求时传递的options参数

          }

success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。

         (1)由服务器返回,并根据dataType参数进行处理后的数据。

         (2)描述状态的字符串。

         function(data, textStatus){

            //data可能是xmlDoc、jsonObj、html、text等等

            this;  //调用本次ajax请求时传递的options参数

error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错

       误信息、捕获的错误对象(可选)。

       ajax事件函数如下:

       function(XMLHttpRequest, textStatus, errorThrown){

          //通常情况下textStatus和errorThrown只有其中一个包含信息

          this;   //调用本次ajax请求时传递的options参数

       }

contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认

             为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

dataFilter:要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。

            提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的

            dataType参数。函数返回的值将由jQuery进一步处理。

            function(data, type){

                //返回处理后的数据

                return data;

            }

global:要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局

        ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。

ifModified:要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。

            服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。

jsonp:要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。

       该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如

       {jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

username:要求为String类型的参数,用于响应HTTP访问认证请求的用户名。

password:要求为String类型的参数,用于响应HTTP访问认证请求的密码。

processData:要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度

             来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM

             树信息或者其他不希望转换的信息,请设置为false。

scriptCharset:要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时

               才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

 

案例代码:

$(function(){

    $('#send').click(function(){

         $.ajax({

             type: "GET",

             url: "test.json",

             data: {username:$("#username").val(), content:$("#content").val()},

             dataType: "json",

             success: function(data){

                         $('#resText').empty();   //清空resText里面的所有内容

                         var html = ''; 

                         $.each(data, function(commentIndex, comment){

                               html += '

在jquery中ajax可以分类为$.ajax $.get $.post $.getJSON $.getScript几种了,下面我都找了一些实例分享给大家,估计大家看了之后觉得jquery ajax真简单。

$.ajax({
type: "POST",
url: url,
<SPAN style="COLOR: #ff0000">data: $('#form1').serialize(),</SPAN>
success: function(msg){
alert( "Data Saved: " + msg );
}
});

 

' + comment['username']

                                         + ':

comment['content']

                                         + '

';

                         });

                         $('#resText').html(html);

                      }

         });

    });

});

 

顺便说一下$.each()函数:

$.each()函数不同于JQuery对象的each()方法,它是一个全局函数,不操作JQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。

 

转自:

什么是 AJAX?

您可能感兴趣的文章:

  • Ajax核心XMLHTTP组件资料
  • Ajax 核心框架函数及例子
  • Javascript级联下拉菜单以及AJAX数据验证核心代码
  • 解析ajax核心XMLHTTPRequest对象的创建与浏览器的兼容问题
  • Ajax核心技术代码分享
  • Ajax核心XMLHttpRequest总结
  • 简单谈谈AJAX核心对象

Ajax请求
jQuery.ajax(options)

jQuery里面的ajax方法的参数

选项
asyncBoolean(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

beforeSend(XHR)Function发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。

function (XMLHttpRequest) {
this; // 调用本次AJAX请求时传递的options参数
}
cacheBoolean(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能,设置为 false 将不缓存此页面。

complete(XHR, TS)Function请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述成功请求类型的字符串。 Ajax 事件。

function (XMLHttpRequest, textStatus) {
this; // 调用本次AJAX请求时传递的options参数
}
contentTypeString(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器(即使没有数据要发送)

contextObject这个对象用于设置Ajax相关回调函数的上下文。也就是说,让回调函数内this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数)。比如指定一个DOM元素作为context参数,这样就设置了success回调函数的上下文为这个DOM元素。就像这样:

$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
dataObject,String发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataFilterFunction给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数:data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

function (data, type) {
// 对Ajax返回的原始数据进行预处理
return data // 返回处理后的数据
}
dataTypeString
预期服务器返回的数据类......余下全文>>  

AJAX = Asynchronous JavaScript and XML.

说明:通过 HTTP 请求加载远程数据。

jQuery里面的ajax方法的参数

AJAX 请求完成时执行函数。

jQuery 代码:
$("#msg").ajaxComplete(function(event,request, settings){
$(this).append("<li>请求完成.</li>");
});

AJAX 请求失败时显示信息。

jQuery 代码:
$("#msg").ajaxError(function(event,request, settings){
$(this).append("<li>出错页面:" + settings.url + "</li>");
});

AJAX 请求发送前显示信息。

jQuery 代码:
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li>开始请求: " + settings.url + "</li>");
});

AJAX 请求开始时显示信息。

jQuery 代码:
$("#loading").ajaxStart(function(){
$(this).show();
});

AJAX 请求结束后隐藏信息。

jQuery 代码:
$("#loading").ajaxStop(function(){
$(this).hide();
});

当 AJAX 请求成功后显示消息。

jQuery 代码:
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>请求成功!</li>");
});

返回值:XMLHttpRequestjQuery.ajax([options])
timeoutNumber设置请求超时时间(毫秒)。此设置将覆盖全局设置。

希望我的回答对你有帮助 要是有什么不懂的就继续问我  

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。 type: 要求为String类型的参数,...

AJAX 是一种创建快速动态网页的技术。
AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。

$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

AJAX 和 jQuery
jQuery 提供了用于 AJAX 开发的丰富函数(方法)库。
通过 jQuery AJAX,使用 HTTP Get 和 HTTP Post,您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。
而且您可以直接把远程数据载入网页的被选 HTML 元素中!
写的更少,做的更多
jQuery 的 load 函数是一种简单的(但很强大的)AJAX 函数。它的语法如下:

注意: 如果你指定了dataType选项,请确保服务器返回正确的MIME信息,(如xml返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。

    $(selector).load(url,data,callback)

$.ajax()只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。

请使用 selector 来定义要改变的 HTML 元素,使用 url 参数来指定数据的 web 地址。
亲自试一试
只有当您希望向服务器发送数据时,才需要使用 data 参数。只有当您需要在执行完毕之后触发一个函数时,您才需要使用 callback 参数。
Low Level AJAX
$.ajax(options) 是低层级 AJAX 函数的语法。
$.ajax 提供了比高层级函数更多的功能,但是同时也更难使用。
option 参数设置的是 name|value 对,定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
jQuery AJAX 请求

1.2 中可以跨域加载JSON数据,使用时需将数据类型设置为JSONP。使用JSON 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换?为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。

请求 描述

 

    $(selector).load(url,data,callback) 把远程数据加载到被选的元素中
    $.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
    $.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
    $.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
    $.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
    $.getScript(url,callback) 加载并执行远程的 JavaScript 文件
    (url) 被加载的数据的 URL(地址)
    (data) 发送到服务器的数据的键/值对象
    (callback) 当数据被加载时,所执行的函数
    (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
    (options) 完整 AJAX 请求的所有键/值对选项

选项

讲了这么多我再来看看实例

async(Boolean):(默认: true)所有请求均为异步请求。如要发送同步请求,设置为false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

$.ajax实例

beforeSend(Function):发送请求前可修改XMLHttpRequest对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。

 代码如下

cache(Boolean):(默认: true) 设置为fals 将不会从浏览器缓存中加载请求信息。

复制代码

complete(Function): 请求完成后回调函数(请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
    url:'productManager_reverseUpdate',// 跳转到 action 
    data:{ 
             selRollBack : selRollBack, 
             selOperatorsCode : selOperatorsCode, 
             PROVINCECODE : PROVINCECODE, 
             pass2 : pass2 
    }, 
    type:'post', 
    cache:false, 
    dataType:'json', 
    success:function(data) { 
        if(data.msg =="true" ){ 
            // view("修改成功!"); 
            alert("修改成功!"); 
            window.location.reload(); 
        }else{ 
            view(data.msg); 
        } 
     }, 
     error : function() { 
          // view("异常!"); 
          alert("异常!"); 
     } 
});

contentType(String): (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
    var formParam = $("#form1").serialize();//序列化表格内容为字符串 
    $.ajax({ 
        type:'post',     
        url:'Notice_noTipsNotice', 
        data:formParam, 
        cache:false, 
        dataType:'json', 
        success:function(data){ 
        } 
    }); 

data(Object,String): 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
     type:'post', 
     url:'validatePwd2_checkPwd2?password2='+password2, 
     data:{}, 
     cache:false, 
     dataType:'json', 
     success:function(data){ 
          if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间 
          { 
               textPassword2.html("<font color='red'>业务密码不正确!</font>"); 
               $("#validatePassword2").val("pwd2Error"); 
               checkPassword2 = false; 
               return; 
           } 
      }, 
      error:function(){} 
});

dataType(String) : 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

//4.$.ajax拼接data的异步请求
$.ajax({  
    url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',  
    type:'post',  
    data:'merName='+values,  
    async : false, //默认为true 异步  
    error:function(){  
       alert('error');  
    },  
    success:function(data){  
       $("#"+divs).html(data);  
    }
});

"xml": 返回 XML 文档,可用 jQuery 处理。

 

"html": 返回纯文本 HTML 信息;包含 script 元素。

jquery.get实例

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

jquery.get( url, [ data ], [ callback(data, textstatus, xmlhttprequest) ], [ datatype ] )

"json": 返回 JSON 数据 。

returns: xmlhttprequest

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

url 字符串,其中包含的url的请求被发送。

error(Function) : (默认:自动判断 (xml 或 html)) 请求失败时调用时间。参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。

data 地图或字符串发送到与请求的服务器。

global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的Ajax事件。

callback(data, textstatus, xmlhttprequest),如果请求成功执行。

ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

datatypethe 类型的数据预计从服务器。

processData (Boolean) : (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

这是一个缩写的ajax功能,这相当于:

success (Function) : 请求成功后回调函数。参数:服务器返回数据,数据格式。

 代码如下

timeout (Number) : 设置请求超时时间(毫秒)。此设置将覆盖全局设置。

复制代码

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

$.ajax({
  url: url,
  data: data,
  success: success,
  datatype: datatype
});

url (String) : (默认: 当前页地址) 发送请求的地址。

 

 

调函数成功返回的数据传递,这将是一个xml根元素,文本字符串,网页特效文件,或根据响应的mime类型的json对象。它也通过了响应文本状态。

加载并执行一个 JS 文件。

在jquery 1.4,成功回调函数也是通过xmlhttprequest对象。

$.ajax({

大多数实现将指定一个成功的处理程序:

 type: "GET",

 代码如下

 url: "test.js",

复制代码

 dataType: "script"

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('load was performed.');
});

});

jQuery.post实例

 

jQuery.post( url, [data], [callback], [type] ) :
使用POST方式来进行异步请求

保存数据到服务器,成功时显示信息。

参数:

$.ajax({

url (String) : 发送请求的URL地址.

   type: "POST",

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

   url: "some.php",

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

   data: "name=John&location=Boston",

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
1.html页面(index.html)

   success: function(msg){

 代码如下

     alert( "Data Saved: " + msg );

复制代码

   }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript" src='#'" /jquery-1.3.2.js"></script>
<script language="javascript">
function checkemail(){
 
  if($('#email').val() == ""){
    $('#msg').html("please enter the email!");
    $('#email').focus;
    return false;
  }
  if($('#address').val() == ""){
    $('#msg').html("please enter the address!");
    $('#address').focus;
    return false;
  }
  ajax_post();
}

});

function ajax_post(){
  $.post("action.php",{email:$('#email').val(),address:$('#address').val()},
  function(data){
    //$('#msg').html("please enter the email!");
    //alert(data);
    $('#msg').html(data);
  },
  "text");//这里返回的类型有:json,html,xml,text
}
</script>
</head>

 

<body>
<form id="ajaxform" name="ajaxform" method="post" action="action.php">
    <p>
    email<input type="text" name="email" id="email"/>
   
    </p>
    <p>
    address<input type="text" name="address" id="address"/>
    </p>
    <p id="msg"></p>
    <p>   
        <input name="Submit" type="button" value="submit" onclick="return checkemail()"/>
    </p>
</form>
</body>
</html>

装入一个 HTML 网页最新版本。

2.php页面(action.php)

$.ajax({

 代码如下

 url: "test.html",

复制代码

 cache: false,

<?php
$email = $_POST["email"];
$address = $_POST["address"];

 success: function(html){

//echo $email;
//echo $address;
echo "success";
?>

    $("#results").append(html);

jquery.getjson实例

 }

jquery.getjson( url, [ data ], [ callback(data, textstatus) ] )
url 一个字符串,其中包含的url,该请求被发送。

});

data 地图或字符串,发送到与请求的服务器

 

callback(data, textstatus) 回调函数是执行,如果请求成功。

同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。

看一个简单的实例

 var html = $.ajax({

 代码如下

 url: "some.php",

复制代码

 async: false

$.ajax({
  url: url,
  datatype: 'json',
  data: data,
  success: callback
});

 }).responseText;

回调是通过返回的数据,这将是一个网页特效对象或数组的定义和解析json结构使用$。parsejson()方法。

 

大多数实现将指定一个成功的处理程序:

发送 XML 数据至服务器。设置 processData 选项为 false,防止自动转换数据格式。

 代码如下

 var xmlDocument = [create xml document];

复制代码

 $.ajax({

$.getjson('ajax/test.json', function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

   url: "page.php",

这个例子,当然,依赖于json文件结构:

   processData: false,

{
  "foo": "the quick brown fox jumps教程 over the lazy dog.",
  "bar": "abcdefg",
  "baz": [52, 97]
}

   data: xmlDocument,

 代码如下

   success: handleResponse

复制代码

 });

<!doctype html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src=";
</head>
<body>
  <div id="images">

 

</div>
<script>$.getjson("/?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendto("#images");
            if ( i == 3 ) return false;
          });
        });</script>

load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中,默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

</body>
</html>>

url (String) : 请求的HTML页的URL地址。

jquery $.getScript实例

data (Map) : (可选参数) 发送至服务器的 key/value 数据。如果有[data]参数,就会自动转换为POST方式。

 该函数是简写的 Ajax 函数,等价于:

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

 代码如下

 

复制代码

示例代码:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

$(".ajax.load").load("",

这里的回调函数会传入返回的 JavaScript 文件。这通常不怎么有用,因为那时脚本已经运行了。

         function (responseText, textStatus, XMLHttpRequest){

载入的脚本在全局环境中执行,因此能够引用其他变量,并使用 jQuery 函数。

         this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]

比如加载一个 test.js 文件,里边包含下面这段代码:

         //alert(responseText);//请求返回的内容

 代码如下

         //alert(textStatus);//请求状态:success,error

复制代码

         //alert(XMLHttpRequest);//XMLHttpRequest对象

$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

});

通过引用该文件名,就可以载入并运行这段脚本:

注:不知道为什么URL写绝对路径在FF下会出错。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。

 代码如下

 

复制代码

<b>jQuery Links:</b><ul id="links"></ul>

$.getScript("ajax/test.js", function() {
  alert("Load was performed.");
});

代码:$("#links").load("/Main_Page #p-Getting-Started li");

$.get $.post $.getJSON $.getScript几种了,下面我都找了一些实例分享给大家,估计大家看了之后觉得jquery ajax真简单。...

 

代码:加载 feeds.html 文件内容。

$("#feeds").load("feeds.html");

 

代码:以 POST 形式发送附加参数并在成功时显示信息。

 $("#feeds").load("feeds.php", {limit: 25}, function(){

   alert("The last 25 entries in the feed have been loaded");

 });

 

jQuery.get(url,[data],[callback]):通过远程 HTTP GET 请求载入信息

示例代码:

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){

         //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.

         this; // 在这里this指向的是Ajax请求的选项配置信息

         alert(data);

         //alert(textStatus);//请求状态:success,error等等。当然这里捕捉不到error,因为error的时候根本不会运行该回调函数

         //alert(this);

});

 

请求 test.php 网页,忽略返回值。 $.get("test.php");

$.get("test.php", { name: "John", time: "2pm" } );

 

显示 test.php 返回值(HTML 或 XML,取决于返回值)。

$.get("test.php", function(data){

 alert("Data Loaded: " + data);

});

 

显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数。

$.get("test.cgi", { name: "John", time: "2pm" },

 function(data){

    alert("Data Loaded: " + data);

 });

 

jQuery.getJSON(url,data,callback):通过 HTTP GET 请求载入 JSON 数据

从 Flickr JSONP API 载入 4 张最新的关于猫的图片。

<div id="images"></div>

代码:

$.getJSON("",

function(data){

 $.each(data.items, function(i,item){

    $("<img/>").attr("src",

item.media.m).appendTo("#images");

    if ( i == 3 ) return false;

 });

});

 

从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据。

$.getJSON("test.js", function(json){

 alert("JSON Data: " + json.users[3].name);

});

 

从 test.js 载入 JSON 数据,附加参数,显示 JSON 数据中一个 name 字段数据。

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){

 alert("JSON Data: " + json.users[3].name);

});

 

jQuery.getScript(url,callback):通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

载入 jQuery 官方颜色动画插件 成功后绑定颜色变化动画。

<button id="go">» Run</button>

<div class="block"></div>

代码:

jQuery.getScript("",

function(){

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

    $(".block").animate( { backgroundColor: 'pink' }, 1000)

      .animate( { backgroundColor: 'blue' }, 1000);

 });

});

 

加载并执行 test.js。 $.getScript("test.js");

 

加载并执行 test.js ,成功后显示信息。

$.getScript("test.js", function(){

 alert("Script loaded and executed.");

});

 

jQuery.post(url,data,callback,type):通过远程 HTTP POST 请求载入信息

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

 

示例代码:

Ajax.aspx:

Response.ContentType = "application/json";

Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");

 

代码:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },

         function (data, textStatus){

              // data 可以是 xmlDoc, jsonObj, html, text, 等等.

              //this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this

              alert(data.result);

         }, "json");

 

Ajax事件
ajaxComplete(callback):
AJAX 请求完成时执行函数。

$("#msg").ajaxComplete(function(request, settings){

   $(this).append("<li>Request Complete.</li>");

 });

 

ajaxError(callback):AJAX 请求发生错误时执行函数

 $("#msg").ajaxError(function(request, settings){

   $(this).append("<li>Error requesting page " + settings.url +

"</li>");

 });

 

ajaxSend(callback):AJAX 请求发送前执行函数

 $("#msg").ajaxSend(function(evt, request, settings){

   $(this).append("<li>Starting request at " + settings.url +

"</li>");

 });

 

ajaxStart(callback):AJAX 请求开始时执行函数

 $("#loading").ajaxStart(function(){

   $(this).show();

 });

 

ajaxStop(callback):AJAX 请求结束时执行函数

 $("#loading").ajaxStop(function(){

   $(this).hide();

 });

 

ajaxSuccess(callback):AJAX 请求成功时执行函数

 $("#msg").ajaxSuccess(function(evt, request, settings){

   $(this).append("<li>Successful Request!</li>");

 });

 

其它
jQuery.ajaxSetup(options):
设置全局 AJAX 默认选项

$.ajaxSetup({

 url: "/xmlhttp/",

 global: false,

 type: "POST"

});

$.ajax({ data: myData });

 

serialize():序列表表格内容为字符串。

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

 

serializeArray():序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据

var fields = $("select, :radio").serializeArray();

jQuery.each( fields, function(i, field){

 $("#results").append(field.value

  • " ");

});

 

本文由美高梅网址发布于关于美高梅,转载请注明出处:ajax入门实例详解,方法参数详解

上一篇:没有了 下一篇:的方法实现代码,jQuery插件的写法分享
猜你喜欢
热门排行
精彩图文