jQuery系列(十四):jQuery中的ajax

1、什么是ajax

AJAX = 异步的javascript和XML(Asynchronous Javascript and XML)

简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

2、jQuery的load()方法

jQuery load()方法是简单但强大的AJAX方法。

load()方法从服务器加载数据,并把返回的数据放入被选元素中。

ps:该方法使用不多,了解即可

语法:

$("selector").load(url,data,callback);
// 第一种情况
$('#btn').click(function(){//只传一个url,表示在id为#new-projects的元素里加载index.html$('#new-projects').load('./index.html');
});// 第二种情况
$('#btn').click(function(){//只传一个url,导入的index.html文件含有多个传递参数,类似于:index/html?name='张三'$('#new-projects').load('./index.html',{"name":'张三',"age":12});
});// 第三种情况
//加载文件之后,会有个回调函数,表示加载成功的函数
$('#new-projects').load('./index.html',{"name":'张三',"age":12},function(){
});

3、jQuery的getJSON方法

jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据,并对数据进行解析,显示到页面中

语法: 

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

参数解释:

url参数:为请求加载json格式文件的服务器地址
可选项data参数:为请求时发送的数据
callback参数:为数据请求成功后执行的函数
$.getJSON("./data/getJSON.json", function (data) {var str = "";//初始化保存内容变量$.each(data, function(index,ele) {$('ul').append("<li>"+ele.name+"</li>")});
});

4、jquery中的$.get()方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据

语法:

$.get(URL,callback);
url参数:规定你请求的路径,是必需参数
callback参数:为数据请求成功后执行的函数
$.get('./data/getJSON.json',function(data,status){console.log(status);   //success    200状态码 ok的意思              
})

5、jQuery的post()方法

与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面

语法:

$.post(URL,data,callback);
url参数:规定你请求的路径,是必需参数,可选的data参数是连同请求发送的数据
可选的callback参数:为数据请求成功后执行的函数
 $.post('/index',{name:'张三'},function(data,status){console.log(status);})

6、jQuery中的$.ajax()方法*****

query的$.ajax()方法 是做ajax技术经常使用的一个方法。

参数如下: 

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

(2).type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。

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

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

(5).cache: 要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。

(6).data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看  processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

(7).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:返回纯文本字符串。

(8).beforeSend: 要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 } 9.complete:

要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }

(10).success:

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

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

  (2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 

(11).error: 要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下: function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }

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

(13).dataFilter: 要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }

(14).dataFilter: 要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }

(15).global: 要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。

(16).ifModified: 要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。

(17).jsonp: 要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

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

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

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

(21).scriptCharset: 要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用

6-1:get方式

//get()方式
  $.ajax({url:'./data/index.txt',type:'get',dataType:'text',success:function(data){$('p').html(data);},error:function(error){console.log(error)}

6-2:post方式

//post()方式
$.ajax({url:'/index',type:'post',data:{name:'张三',age:12},success:function(data){$('p').html(data);},error:function(error){console.log(error)
}

 

转载于:https://www.cnblogs.com/felixwang2/p/9878940.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/279062.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flex 布局以及样式

1.Flex是Flexible Box的缩写&#xff0c;意为”弹性布局”&#xff0c;用来为盒状模型提供最大的灵活性2.任何一个容器都可以用flex布局&#xff08;注意&#xff0c;设为Flex布局以后&#xff0c;子元素的float、clear和vertical-align属性将失效&#xff09; 采用Flex布局的元…

java swing列表数据加监听,【Java Swing公开课|Java监听列表项选择事件怎么用,看完这篇文章你一定就会了】- 环球网校...

【摘要】作为一门面向对象编程语言&#xff0c;Java吸收了C语言的优点&#xff0c;也展现了其强大的一面&#xff0c;我们能在各个地方看到其功能强大和简单易用的两个特征&#xff0c;当然&#xff0c;也吸引了很多程序员的注意力&#xff0c;所以就有人想了解Java的相关内容&…

fc-ae-1553_什么是AE-L,AF-L和*按钮,它们的作用是什么?

fc-ae-1553DSLRs and mirrorless cameras have a lot of buttons. If you’re just starting to get the hang of manually controlling your camera, you’re probably wondering what all the—seemingly non-essential—ones do. Let’s take a look at the AE-L, AF-L, AF-…

PopsTabView--filter容器

PopsTabView是个filter容器,他可以自动,快速,构建不同筛选样式,自由组合成一组tab. DownloadDownloadAuthorLicense筛选样式筛选种类可自定义属性单列单选,多选初始数据bean,筛选结果bean,tab样式,筛选样式多排单选,多选初始数据bean,筛选结果beantab样式,筛选样式双列单项单选…

git 基本使用方法

git clone https://gitee.com/kuaiyiwazz.git //开始下载服务器项目文件&#xff08;后边是服务地项目的地址&#xff09;git add . //这里有个点&#xff08;仔细看&#xff09;git status //检查项目修改状态git commit -m"注释(修改的内容)" git push //添…

大学留级两年不敢和家人说_您说什么:如何与家人保持联系?

大学留级两年不敢和家人说Earlier this week we asked you to share your tips, tricks, and techniques for staying connected when you’re away from your home broadband connection. Now we’re back with a roundup of what you said. 本周早些时候&#xff0c;我们要求…

DevExpress v17.2新版亮点—WinForms篇(四)

2019独角兽企业重金招聘Python工程师标准>>> DevExpress首推团队升级培训套包&#xff0c;最高可省10万元&#xff01;查看详情>>> 用户界面套包DevExpress v17.2终于正式发布&#xff0c;本站将以连载的形式为大家介绍各版本新增内容。开篇介绍了DevExpre…

Solr 11 - Solr集群模式的部署(基于Solr 4.10.4搭建SolrCloud)

目录 1 SolrCloud结构说明2 环境的安装2.1 环境说明2.2 部署并启动ZooKeeper集群2.3 部署Solr单机服务2.4 添加Solr的索引库3 部署Solr集群服务(SolrCloud)3.1 启动ZooKeeper3.2 ZooKeeper管理配置文件3.3 修改SolrCloud监听端口3.4 关联Solr与ZooKeeper3.5 分发SolrCloud服务3…

matlab怎么画一箭穿心,MATLAB学习与使用:如何绘制三维心形图 经验告诉你该这样...

MATLAB是MATrix & LABoratory(矩阵实验室)的缩写&#xff0c;是一款强大的科学软件&#xff0c;具有编程、绘图、仿真等功能。利用MATLAB绘制一款三维的心形图&#xff0c;然后送给心爱的姑娘&#xff0c;也是理工男撩妹的一项小技能。工具/材料MATLAB三维心形图操作方法01…

mac重置系统_如何在Mac上重置打印系统

mac重置系统Printers are notorious for failing frequently. A quick restart of the printer or computer usually fixes most intermittent issues, but occasionally it’s best to reset your printing settings and reinstall the printer completely. Consider this a f…

COW奶牛!Copy On Write机制了解一下

前言 只有光头才能变强 在读《Redis设计与实现》关于哈希表扩容的时候&#xff0c;发现这么一段话&#xff1a; 执行BGSAVE命令或者BGREWRITEAOF命令的过程中&#xff0c;Redis需要创建当前服务器进程的子进程&#xff0c;而大多数操作系统都采用写时复制&#xff08;copy-on-w…

参数回调

1.场景 参数回调方式与调用本地 callback 或 listener 相同&#xff0c;只需要在 Spring 的配置文件中声明哪个参数是 callback 类型即可。 Dubbo 将基于长连接生成反向代理&#xff0c;这样就可以从服务器端调用客户端逻辑 2.

matlab胡良剑第五章,MATLAB习题参考答案(胡良剑,孙晓君)

MATLAB习题参考答案第一章 MATLAB入门4、求近似解解&#xff1a;>> x-2:0.05:2;yx.^4-2.^x两个近似解&#xff1a;y1f(-0.85) -0.0328; y2f(1.250) 0.0630第二章 MATLAB编程与作图1、 设x是数组&#xff0c;求均值和方差 解&#xff1a;函数文件如下&#xff1a;function…

windows 全局变量_如何在Windows中使用全局系统环境变量

windows 全局变量Any system administrator who spends a good bit of time in the command prompt or batch scripts is probably well aware of built in environment variables Windows offers (i.e. Path, WinDir, ProgramFiles, UserProfile, etc.). If you find yourself…

Day2-T1

原题目 Describe&#xff1a;贪心&#xff0c;左边和右边中选字典序小的 code&#xff1a; #include<bits/stdc.h> using namespace std; int n,step,head,tail; char p[50005]; int main() {freopen("bcl.in","r",stdin);freopen("bcl.out&quo…

hadoop编译java,Hadoop源码编译(2.4.1)

背景Hadoop 2.4.1预编译版本自带的libhadoop.so是在32位机器上编译上,导致在64位OS上运行时&#xff0c;总出现如下告警&#xff1a;WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable查看…

C# System.Windows.Forms.NumericUpDown 控件全选其中文字

num_length.Focus(); UpDownBase updbText (UpDownBase)num_length; num_length.Select(0, updbText.Text.Length);转载于:https://www.cnblogs.com/LuoEast/p/7942476.html

twitter api使用_使用P2创建自己的Twitter风格的组博客

twitter api使用Would you like a great way to post stuff quickly online and communicate with your readers? Here’s how you can use the P2 theme to transform WordPress into a great collaboration and communications platform. 您是否想以一种很好的方式在网上快…

10_30_unittest

1、断言 1&#xff09;、self.assertEqual(2,res)#期望值qian、结果值hou2&#xff09;TextTestRunner 源码 必要的参数3&#xff09;测试结果 上下文管理器 with open("test.txt",w,encodingutf-8) as file:runner unittest.TextTestRunner(streamfile,verbosity2)…

用maven profile实现环境配置切换

前言 互联网后端服务通常会部署多个环境&#xff1a;开发环境、测试环境、预发布环境和生产环境。不同的环境通常有各自的环境配置&#xff0c;例如mysql服务器的地址、用户名密码&#xff0c;zookeeper的ip和端口等等。为了使打出的jar包能获取不同环境的配置&#xff0c;业界…