JQuery对Ajax操作进行了封装,$.ajax()方法属于最底层的方法,第2层是load()$.get()$.post()方法,第3层是$.getScript()$.getJSON()方法。

$.get()方法和$.post()方法是jQuery中的全局函数。


load()方法

描述

可以载入远程HTML代码并插入DOM中。

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

url为请求HTML页面的URL地址,data为发送至服务器的key/value数据,callback为请求完成时的回调函数,无论请求成功或失败。

还可以筛选载入的HTML文档:为URL参数指定选择符。

load()方法的URL参数的语法结构为"url selector"。如果URL参数的字符串中包含一个或多个空格,那么第一个空格后面的内容,会被当成是jQuery 的选择器,从而决定应该加载返回结果中的哪部分内容。

传递方式

load()方法的传递方式根据参数data来自动指定。默认采用GET方式传递;如果有参数传递,则会自动转换为POST方式。

//无参数传递,为GET方式
$("#resText").load("test.php",function(){
// body...
});
//有参数传递,为POST方式
$("#resText").load("test.php",{name:"rain", age:"22"},function () {
// body...
});

回调函数

对于必须在加载完成后才能继续的操作

callback(responseText, textStatus, XMLHttpRequest)

responseText为请求返回的内容,textStatus为请求状态(success、error、notmodified、timeout4种),XMLHttpRequest为一个XMLHttpRequest对象。

注意:在load()方法中,无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数就被触发。

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

load()方法通常用来从Web服务器上货去静态的数据文件。如果需要传递一些参数给服务器中的页面,就可以使用$.get()和$.post()方法(或者$.ajax())。

$.get()方法

$.get()方法使用GETR方式来进行异步请求。

$.get(url, [data], [callback(data, textStatus, jqXHR)], [dataType])

\\url:  请求HTML页面的URL地址
\\data: 发送至服务器的key/value数据
\\callback(): 载入成功时的回调函数
\\dataType: 服务器端返回内容的格式,包括xml、html、script、json、text和_default

回调函数callback(data,textStatus,jqXHR)中,data为返回的内容,可以是XML文档、JSON文件、HTML片段等等,textStatus为请求状态(success、error、notmodified、timeout)。

$.post()方法

用ajax传递一个表单并把结果在一个div中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form action="#" id="usrForm">
<input type="text" name="usrname" placeholder="请输入用户名">
<input type="submit" value="OK">
</form>
<div id="result"> </div>
<script type="text/javascript">
$(funciton(){
$("#usrForm").submit(function(event){
//防止重复点提交按钮
event.preventDefault();
var url = $("#usrForm").attr("action");
$.post(url,{
usrname: $(this).find("input[name=usrname]").val();
},function(data,textStatus){
var content = $( data ).find("#content");
$("#result").empty().append(content);
}
});
});
</script>
</body>
</html>

$.getScript()方法和$.getJson()方法

$.getScript()方法

使用一个HTTP GET请求从服务器加载并执行一段JavaScript代码。

$.getScript( url [, success(script, textStatus, jqXHR) ] )

success()为回调函数,在JavaScript文件成功载入后运行。

$.getJson()方法

使用一个HTTP GET请求从服务器加载JSON编码的数据。

jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

如果URL包含字符串“callback=?”(或类似的参数,取决于服务器端 API 是如何定义的),这个请求被视为JSONP形式请求。

jQuery中的ajax的相关方法的更多相关文章

  1. Jquery中的Ajax

    AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...

  2. jQuery入门(4)jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  4. jquery中的ajax参数

    jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...

  5. 用JQuery中的Ajax方法获取web service等后台程序中的方法

    用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

  6. jQuery中操作Ajax方法小结

    有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...

  7. $.ajax()方法详解 jquery中的ajax方法

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  8. 深入理解ajax系列第九篇——jQuery中的ajax

    前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而 ...

  9. 两强相争,鹿死谁手 — JQuery中的Ajax与AngularJS中的$http

    一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...

随机推荐

  1. Angular利用@ViewChild在父组件执行子组件的方法

    代码如下: @Component({ selector: 'my-app', template: ` <step-bar #stepBar></step-bar> ` }) e ...

  2. C# 如何使用预处理指令?

    #define Debug #define Release #undef Release #if Debug using System; #endif 注意:#define 必须在文档最前面

  3. nyoj61 传纸条(一) dp

    思路:两人一个从左上角出发只能向右和向下,另一人从右下角出发只能向左和向上,可以看做两人都是从右下角出发,且只能向左和向上传纸条,并且两条路径不会相交,因为一个人只会传一次,那么随便画一个图就能知道两 ...

  4. windows NLB实现MSSQL读写分离--从数据库集群读负载均衡

    主从模式,几乎大部分出名的数据库都支持的一种集群模式. 当Web站点的访问量上去之后,很多站点,选择读写分离,减轻主数据库的的压力.当然,一主多从也可以作用多个功能,比如备份.这里主要演示如何实现从数 ...

  5. javascript中快速求数组的全部元素的相加之和

    js中快速求数组的全部元素的相加之和: var arr = [1,2,3,4,5];var sum = eval(arr.join('+')); console.log(sum); 运行结果: 15

  6. linux查看端口被占用等常用命令

    一   根据端口号 查找对应的服务 比如我们查查找端口号8189对应的服务是哪个 1  先根据端口号查找对应对的pid(进程id)为23367 netstat -anp  | grep 8189    ...

  7. FusionCharts封装-Label

    Category.java: /** * @Title:Category.java * @Package:com.fusionchart.model * @Description:FusionChar ...

  8. FusionCharts中图的属性的总结归纳

    FusionCharts中图的属性的总结归纳 1.横坐标label间隔显示 labelStep="4" 2.柱状图有椭圆角 useRoundEdges="1"

  9. Caused by: org.xml.sax.SAXParseException; lineNumber: 28; columnNumber: 81;

    1.错误描述 严重: Exception sending context initialized event to listener instance of class org.springframe ...

  10. MySQL插入数据时插入无效的列

    1.错误描述 com.mysql.jdbc.exception:jdbc4.MySQLSyntaxErrorException:Unknown column 'man' in 'field list' ...