ajax的用法详解,方法实例详解

By admin in 4858美高梅 on 2019年7月14日

本文实例陈说了jQuery中ajax的load()与post()方法。分享给大家供我们参照他事他说加以考察,具体如下:

jQuery中ajax的load()与post()方法实例详解,jqueryajax

本文实例叙述了jQuery中ajax的load()与post()方法。分享给大家供大家参谋,具体如下:

一、load()方法

在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM
中,那么些与post,get依然有某个的界别,但足以异常快在页面加载时就加载叁个页面包车型客车html保存到dom中何况可实行哦。

load()方法默许使用 GET 格局, 假如传递了data参数则运用Post格局.

传递附加参数时自动调换为 POST 格局。jQuery 1.第22中学,可以钦命采取符,来筛选载入的 HTML 文书档案,DOM 上校仅插入筛选出的 HTML
代码。语法形如 “url #some > selector”, 暗中同意的采用器是”body>*”.

讲解:

load是最简便易行的Ajax函数, 可是选用具有局限性:

1.它根本用来直接再次来到HTML的Ajax接口
2.load是二个jQuery包装集艺术,供给在jQuery包装集上调用,并且会将回到的HTML加载到对象中,
固然设置了回调函数也不过不可以还是不可以认load接口设计奇妙並且选取轻便.上面通过示范来演示Load接口的行使:

load()函数:

函数介绍:load(url, [data], [callback]) 返回值:jQuery

参数表达:

url:待装入 HTML 网页网站。
data:(可选参数)发送至服务器的 key/value 数据。
callback:(可选参数)载入成功时回调函数。

下边进行实例演示:

先是创设供给加载的test.html文件:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax演示</title>
</head>
<body>
帮客之家(www.jb51.net),提供大量脚本及素材供大家下载!
</body>
</html>

接下来创建ajax.html文件,记得引入jquery。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#btn").click(function(){
  $("#result").load("test.html",function(responseText,textStatus){
  $("#display").append("<hr>responseText:"+responseText);
  $("#display").append("<hr>textStatus:"+textStatus);
  }); 
 });
 });
</script>
</head>
<body>
<input type="button" value="测试" id="btn" />
<h2>显示的内容如下:</h2>
<div id="result"></div>
<h2>结果:</h2>
<div id="display"></div>
</body>
</html>

上面的示范演示了怎么运用Load方法.

提示:

① 我们要时刻留神浏览器缓存,  当使用GET方式时要加上时间戳参数 (net
Date()).get提姆e() 来保障每一回发送的U翼虎L不相同, 能够避免浏览器缓存.

② 当在url参数后边加多了三个空格, 例如”  “的时候,
会现身”无法辨别标识”的失实, 乞请仍是能够健康发送. 不过力不能及加载HTML到DOM.
删除后难题消除.

二、post()方法

在jquery中的ajax有一个数据发送情势,一种是get(),后面包车型地铁稿子有讲过,另一种是post()。这里再来给我们介绍一下,有需求明白的相爱的人可参谋.

先是认知要jQuery.post(url, [data], [callback], [type])

对参数实行求证:

url:发送央求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:重回内容格式,xml, html, script, json, text, _default。

说明:

因此近距离 HTTP POST 哀告载入消息。

这是四个简练的 POST 诉求作用以代替复杂 $.ajax
。央求成功时可调用回调函数。假使要求在失误时施行函数,请使用 $.ajax。

先来看三个简便的实例
复制代码 代码如下:<?php echo
json_encode(array(“name”=>$_POST[‘name’]));?>
然后建构ajax.html文件,注意js代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#sub").click(function(){
  $.post("testPost.php",{name:$("#name").val()},function(data,textStatus){
  $("#result").append("data:"+data.name);
  $("#result").append("<br>textStatus:"+textStatus);
  },"json");
  return false;
 });
 });
</script>
</head>
<body>
<form action="testPost.php" method="post">
 <input type="text" name="name" id="name" >
 <input type="submit" id="sub" value="提交">
</form>
<h2>显示的内容如下:</h2>
<div id="result"></div>
</body>
</html>

用法2:(点击post数据重回数据)

<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
 function ajaxTest()
 {
 $.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
 {
  $("#divMsg").html(data);
 }
 );
 }
</script>

例3

JS代码:

<script>
$(document).ready(function(){
  $(".ajax_btn").click(function(){
   $.post("ajax.php",//异步处理动态页面
   {name:$(".name").val()},//获取类名为"name"文本的值,以NAME异步传值
   function(data){//data为反回值,function进行反回值处理
     $(".content").val(data);//获得得反回值后,将其填入到类名为"content"的文本框中
   });
  })
})
</script>

ajax.php代码:

<?php
$name=$_POST["name"];
if($name=="netxu"){
  echo "对不起,".$name."数据存在";
}
else{
  echo "恭喜你,".$name."可以使用";
}
?>

但愿本文所述对大家jQuery程序设计有着协助。

后天阅览群里面有网络朋友们问到Jquery
Ajax的(load,post,get,ajax)之间的界别,现在重新整建了一篇作品出来,希望能够帮到网上亲密的朋友们,首先大家先来看某些简约的主意,

当我们用javascript写ajax程序写得很“欢快”的时候,猛然有人报告您有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同一时间您再也不要求再烦恼纠结的ajax乱码难题,更幸福的是你的js代码将大大地简化,看完本文,你会发觉,ajax,简单的来说就是一句话的业务。

一、load()方法

你只怕感兴趣的稿子:

  • jquery 读取页面load get post ajax 各类办法代码写法
  • jQuery中Ajax的load方法详解
  • jQuery中ajax的load()方法用法实例
  • 以防jQuery ajax Load使用缓存的不二法门小结
  • jQuery Ajax之load()方法
  • jquery中AJAX诉求 $.post方法的利用
  • jQuery中ajax – post() 方法实例详解
  • Jquery中$.post和$.ajax的用法小结
  • jQuery中ajax的post()方法用法实例

本文实例叙述了jQuery中ajax的load()与post()方法。分享给大家供咱们参照他事他说加以考察,具体如下:
一、l…

那个格局都以对jQuery.ajax()实行包装以有助于大家应用的章程,当然,假使要拍卖复杂的逻辑,依然必要选拔jQuery.ajax()的(这么些前面会聊起).

1、$.get

在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM
中,这些与post,get照旧有点的区分,但能够急速在页面加载时就加载三个页面包车型客车html保存到dom中同临时候可进行哦。

1、 load( url, [data], [callback] )
:载入远程 HTML 文件代码并插入至 DOM 中。

$.get()方法运用GET格局来进行异步伏乞,它的语法结构为:

load()方法暗中认可使用 GET 形式, 假若传递了data参数则应用Post情势.

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

$.get( url [, data] [, callback] )

传送附加参数时自动转变为 POST 方式。jQuery 1.2中,能够钦命选拔符,来筛选载入的 HTML 文书档案,DOM 军长仅插入筛选出的 HTML
代码。语法形如 “url #some > selector”, 默许的选用器是”body>*”.

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

4858美高梅,解释一下这几个函数的依次参数:

讲解:

callback (Callback) : (可选参数)
供给完毕时(不需如果success的)的回调函数。

url:string类型,ajax央求的地点。

load是最简易的Ajax函数, 可是运用具备局限性:

本条点子默许使用 GET
方式来传递的,若是[data]参数有传递数据进去,就能自行转换为POST格局的。jQuery
1.2 中,能够钦点采取符,

data:可选参数,object类型,发送至服务器的key/value数据会作为QueryString附加到乞请USportageL中。

1.它至关心重视要用来直接回到HTML的Ajax接口
2.load是三个jQuery包装集格局,供给在jQuery包装集上调用,並且会将重回的HTML加载到指标中,
纵然设置了回调函数也可是不可不可以认load接口设计神奇并且利用简单.下边通过演示来演示Load接口的使用:

来筛选载入的 HTML 文书档案,DOM 元帅仅插入筛选出的 HTML 代码。语法形如 “url
#ajax的用法详解,方法实例详解。some > selector”。

callback:可选参数,function类型,当ajax重返成功时自动调用该函数。

load()函数:

以此办法能够很方便的动态加载一些HTML文件,举个例子表单。

末段写一个$.get()的实例供我们参照他事他说加以考察:

函数介绍:load(url, [data], [callback]) 返回值:jQuery

亲自过问代码:

复制代码 代码如下:

参数表达:

$(“.ajax.load”).load(“//www.jb51.net”,function (responseText,
textStatus, XMLHttpRequest){this;//在此地this指向的是时下的DOM对象,

$.get(
    “submit.aspx”,{
        id:     ‘123’,
        name:   ‘青藤园’,
    },function(data,state){
        //这里显得从服务器再次回到的数目
        alert(data);
        //这里显示再次回到的动静
        alert(state);
    }
)

url:待装入 HTML 网页网站。
data:(可选参数)发送至服务器的 key/value 数据。
callback:(可选参数)载入成功时回调函数。

即$(“.ajax.load”)[0]
//alert(responseText);//央求重临的内容//alert(textStatus);//需要状态:success,error//alert(XMLHttpRequest);//XMLHttpRequest对象});

2、$.post()

上面实行实例演示:

注:不晓得为啥U昂科威L写相对路线在FF下会出错,知道的难为告诉下。上面包车型大巴get()和post()示例使用的是相对路线,所以在FF下您将会出错并不会看到重临结果。还会有get()和post()示例都以跨域调用的,发掘传上来后无法得到结果,所以把运营按钮去掉了。

$.post()方法应用POST格局来张开异步央浼,它的语法结构为:

率先创建供给加载的test.html文件:

2、 jQuery.get( url, [data],
[callback] ):使用GET情势来拓展异步诉求

$.post(url,[data],[callback],[type])

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax演示</title>
</head>
<body>
脚本之家(www.jb51.net),提供大量脚本及素材供大家下载!
</body>
</html>

参数:

本条方式和$.get()用法大致,唯独多了三个type参数,那么这里就只介绍type参数吧,别的的参照他事他说加以考察上面$.get()的。

然后建设构造ajax.html文件,记得引进jquery。

url (String): 发送须要的UENCOREL地址.

type:type为呼吁的数据类型,能够是html,xml,json等门类,假设大家设置这么些参数为:json,那么重回的格式则是json格式的,若无安装,就和$.get()再次回到的格式同样,都是字符串的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#btn").click(function(){
  $("#result").load("test.html",function(responseText,textStatus){
  $("#display").append("<hr>responseText:"+responseText);
  $("#display").append("<hr>textStatus:"+textStatus);
  }); 
 });
 });
</script>
</head>
<body>
<input type="button" value="测试" id="btn" />
<h2>显示的内容如下:</h2>
<div id="result"></div>
<h2>结果:</h2>
<div id="display"></div>
</body>
</html>

data (Map): (可选) 要发送给服务器的数据,以 Key/value
的键值对格局表示,会做为QueryString附加到恳求U宝马X3L中。

最终写一个$.post()的实例供大家参照他事他说加以考察:

上面包车型地铁言传身教演示了什么样选取Load方法.

callback (Function): (可选)
载入成功时回调函数(唯有当Response的回来状态是success才是调用该格局)。

复制代码 代码如下:

提示:

那是壹个简便的 GET 央求成效以代表复杂 $.ajax
。央浼成功时可调用回调函数。如若须求在失误时举办函数,请使用 $.ajax。

$.post(
    “submit.aspx”,{
        id:     ‘123’,
        name:   ‘青藤园’,
    },function(data,state){
        //这里显得从服务器再次来到的数目
        alert(data);
        //这里展现重临的气象
        alert(state);
    },
    “json”
)

① 我们要时刻注意浏览器缓存,  当使用GET情势时要加上时间戳参数 (net
Date()).getTime() 来有限扶助每一遍发送的U瑞鹰L差别, 能够制止浏览器缓存.

亲自去做代码:

3、$.getJSON()

② 当在url参数前边增加了多个空格, 比方”  “的时候,
会出现”不大概甄别标记”的谬误, 央浼仍是能够符合规律发送. 可是无法加载HTML到DOM.
删除后难题消除.

$.get(“./Ajax.aspx”, {Action:”get”,Name:”lulu”}, function (data,
textStatus){//重临的 data 能够是 xmlDoc, jsonObj, html, text, 等等.this;
//
在此地this指向的是Ajax央浼的选取配置新闻,请参谋下图alert(data);//alert(textStatus);//恳求状态:success,error等等。

$.getJSON()是专程为ajax获取json数据而设置的,并且协助跨域调用,其语法的格式为:

二、post()方法

当然这里捕捉不到error,因为error的时候根本不会运作该回调函数//alert(this);});

getJSON(url,[data],[callback])

在jquery中的ajax有三个数据发送格局,一种是get(),前边的稿子有讲过,另一种是post()。这里再来给我们介绍一下,有要求明白的相爱的人可参照他事他说加以考察.

点击发送恳求:

url:string类型, 发送乞请地址  data :可选参数, 待发送 Key/value 参数
,同get,post类型的data callback
:可选参数,载入成功时回调函数,同get,post类型的callback

率先认识要jQuery.post(url, [data], [callback], [type])

jQuery.get()回调函数里面包车型地铁 this ,指向的是Ajax伏乞的精选配置音讯:

JSON是一种非凡的数码传输格式,它亦可很好的玉石皆碎与JavaScript或其余宿主语言,并且能够被JS直接动用。使用JSON比较古板的经过
GET、POST直接发送“裸体”数据,在结构上更为客观,也尤其安全。至于jQuery的getJSON()函数,只是设置了JSON参数的
ajax()函数的贰个简化版本。那么些函数也是足以跨域使用的,相比较get()、post()有一定优势。另外这一个函数能够经过把央浼url写
成”myurl?callback=X”这种格式,让程序施行回调函数X。

对参数进行认证:

3、 jQuery.post( url, [data],
[callback], [type] ) :使用POST格局来开始展览异步央求

4、$.ajax()

url:发送央浼地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:重回内容格式,xml, html, script, json, text, _default。

参数:

$.ajax()是jquery中通用的七个ajax封装,其语法的格式为:

说明:

url (String) : 发送诉求的UOdysseyL地址.

$.ajax(options)

通过远程 HTTP POST 须要载入音信。

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

内部options是叁个object类型,它指明了此番ajax调用的求实参数,这里自个儿把最常用的几个参数附上

那是二个简便的 POST 央求功效以代表复杂 $.ajax
。央浼成功时可调用回调函数。假若需求在失误时举办函数,请使用 $.ajax。

callback (Function): (可选)
载入成功时回调函数(唯有当Response的回到状态是success才是调用该格局)。

复制代码 代码如下:

先来看多少个回顾的实例

type (String) : (可选)官方的印证是:Type of data to be
sent。其实应当为客户端伏乞的项目(JSON,XML,等等)

$.ajax({
        url: ‘submit.aspx’,
        datatype: “json”,
        type: ‘post’,
        success: function (e) {   //成功后回调
            alert(e);
        },
        error: function(e){    //战败后回调
            alert(e);
        },
        beforeSend: function(){ 
/发送伏乞前调用,能够放一些”正在加载”之类额话
            alert(“正在加载”);
        }
})

复制代码 代码如下:

这是三个差相当少的 POST 诉求功用以替代复杂 $.ajax
。诉求成功时可调用回调函数。若是急需在阴差阳错开上下班时间实践函数,请使用 $.ajax。

上述就是jquery完成ajax调用的二种方法,ajax调用照旧挺复杂的,希望本文能对我们有所帮忙,如有何疑难,也足以调换小编,大家共同升高。

<?php echo json_encode(array(“name”=>$_POST[‘name’]));?>

演示代码:

您可能感兴趣的篇章:

  • jQuery中ajax的load()与post()方法实例详解
  • jQuery中ajax – get()
    方法实例详解
  • jquery中get,post和ajax方法的采纳小结
  • jquery 读取页面load get post ajax
    各个艺术代码写法
  • jQuery中Ajax的get、post等情势详解
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总括
  • jQuery中ajax的get()方法用法实例
  • jQuery中ajax的load()方法用法实例
  • 详谈jQuery
    Ajax(load,post,get,ajax)的用法

然后创建ajax.html文件,注意js代码:

Ajax.aspx:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#sub").click(function(){
  $.post("testPost.php",{name:$("#name").val()},function(data,textStatus){
  $("#result").append("data:"+data.name);
  $("#result").append("<br>textStatus:"+textStatus);
  },"json");
  return false;
 });
 });
</script>
</head>
<body>
<form action="testPost.php" method="post">
 <input type="text" name="name" id="name" >
 <input type="submit" id="sub" value="提交">
</form>
<h2>显示的内容如下:</h2>
<div id="result"></div>
</body>
</html>

Response.ContentType = “application/json”;Response.Write(“{result: ‘” +
Request[“Name”] + “,你好!(那新闻来自服务器)’}”);

用法2:(点击post数据重返数据)

jQuery 代码:

<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
 function ajaxTest()
 {
 $.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
 {
  $("#divMsg").html(data);
 }
 );
 }
</script>

$.post(“Ajax.aspx”, { Action: “post”, Name: “lulu” },function (data,
textStatus){// data 能够是 xmlDoc, jsonObj, html, text, 等等.//this; //
那个Ajax需要的精选配置音信,请参见jQuery.get()提及的thisalert(data.result);},
“json”);

例3

点击提交:

JS代码:

此处安装了乞求的格式为”json”:

<script>
$(document).ready(function(){
  $(".ajax_btn").click(function(){
   $.post("ajax.php",//异步处理动态页面
   {name:$(".name").val()},//获取类名为"name"文本的值,以NAME异步传值
   function(data){//data为反回值,function进行反回值处理
     $(".content").val(data);//获得得反回值后,将其填入到类名为"content"的文本框中
   });
  })
})
</script>

设若你设置了诉求的格式为”json”,此时您未有设置Response回来的ContentType
为:Response.ContentType = “application/json”;
那么您将不也许捕捉到再次回到的数码。

ajax.php代码:

细心一下,alert(data.result);
由于设置了Accept报头为“json”,这里重返的data正是一个指标,并不要求用eval()来更动为对象。

<?php
$name=$_POST["name"];
if($name=="netxu"){
  echo "对不起,".$name."数据存在";
}
else{
  echo "恭喜你,".$name."可以使用";
}
?>

4、 jQuery.getScript( url, [callback] )
: 通过 GET 方式呼吁载入并推行四个 JavaScript 文件。

指望本文所述对我们jQuery程序设计有所协理。

参数

您恐怕感兴趣的篇章:

  • jQuery中ajax – get()
    方法实例详解
  • jquery中get,post和ajax方法的选用小结
  • jquery 读取页面load get post ajax
    八种办法代码写法
  • jQuery中Ajax的get、post等艺术详解
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总括
  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
  • jQuery中ajax的get()方法用法实例
  • jQuery中ajax的load()方法用法实例
  • 详谈jQuery
    Ajax(load,post,get,ajax)的用法

url (String) : 待载入 JS 文件地方。

callback (Function) : (可选) 成功载入后回调函数。

jQuery 1.2 版本在此以前,getScript 只可以调用同域 JS 文件。
1.第22中学,您可以跨域调用 JavaScript 文件。注意:Safari 2
或更早的本子不能够在大局成效域中协同施行脚本。假使由此 getScript
参加脚本,请步入延时函数。

其一措施能够用在诸如当唯有编辑器focus()的时候才去加载编辑器须求的JS文件.下边看某些演示代码:

加载并施行 test.js。

jQuery 代码:

$.getScript(“test.js”);

加载并推行 Ajax伊芙nt.js ,成功后展现新闻。

jQuery 代码:

$.getScript(“Ajax伊芙nt.js”, function(){alert(“Ajax伊芙nt.js
加载完结并实行实现.你再点击下面的Get或Post按钮看看有啥样两样?”);});

jQuery Ajax 事件

Ajax诉求会生出若干见仁见智的事件,大家能够订阅那一个事件并在内部管理大家的逻辑。在jQuery这里有二种Ajax事件:局地事件
和 全局事件。

一部分事件正是在每回的Ajax乞求时在章程钦定义的,举例:

$.ajax({beforeSend: function(){// Handle the beforeSend event},complete:
function(){// Handle the complete event}// …});

大局事件是历次的Ajax要求都会触发的,它会向DOM中的全部因素广播,在上头
getScript() 示例中加载的本子正是大局Ajax事件。全局事件能够如下概念:

$(“#loading”).bind(“ajaxSend”,
function(){$(this).show();}).bind(“ajaxComplete”,
function(){$(this).hide();});

或者:

$(“#loading”).ajaxStart(function(){$(this).show();});

大家能够在特定的央求将全局事件禁止使用,只要设置下 global 选项就能够了:

$.ajax({url: “test.html”,global: false,//
禁止使用全局Ajax事件.// …});

以上那篇详谈jQuery
Ajax(load,post,get,ajax)的用法正是小编分享给大家的全部内容了,希望能给大家二个参考,也希望我们多多帮忙脚本之家。

您大概感兴趣的篇章:

  • jQuery中ajax的load()与post()方法实例详解
  • jQuery中ajax – get()
    方法实例详解
  • jquery中get,post和ajax方法的选用小结
  • jquery 读取页面load get post ajax
    各类办法代码写法
  • jQuery中Ajax的get、post等方法详解
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法计算
  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
  • jQuery中ajax的get()方法用法实例
  • jQuery中ajax的load()方法用法实例

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有