在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
Ajax Web数据交互方式有什么作用?怎么用?Ajax 技术发送http请求获取后台服务器数据,Ajax的简写方式可以使用$.get和$.post方法来完成。AJAX 是开发者利器:不刷新页面更新网页;在页面加载后从服务器请求数据;在页面加载后从服务器接收数据;在后台向服务器发送数据。
学习目标:能够知道Ajax的作用
1. Ajax是什么?
Ajax 是Asynchronous JavaScript and XML的简写,Ajax一个前后台配合的技术,它可以让 javascript 发送异步的 http 请求,与后台通信进行数据的获取,Ajax 最大的优点是实现局部刷新,Ajax可以发送http请求,当获取到后台数据的时候更新页面显示数据实现局部刷新,在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用Ajax了。
这里提示一下大家, 在html页面使用Ajax需要在web服务器环境下运行, 一般向自己的web服务器发送Ajax请求。
2. Ajax的使用方法介绍
jquery将它封装成了一个方法$.Ajax(),我们可以直接用这个方法来执行Ajax请求。
示例代码:
<script>
$.ajax({
// 1.url 请求地址
url:'http://t.weather.sojson.com/api/weather/city/101010100',
// 2.type 请求方式,默认是'GET',常用的还有'POST'
type:'GET',
// 3.dataType 设置返回的数据格式,常用的是'json'格式
dataType:'JSON',
// 4.data 设置发送给服务器的数据, 没有参数不需要设置
// 5.success 设置请求成功后的回调函数
success:function (response) {
console.log(response);
},
// 6.error 设置请求失败后的回调函数
error:function () {
alert("请求失败,请稍后再试!");
},
// 7.async 设置是否异步,默认值是'true',表示异步,一般不用写
async:true
});
</script>
Ajax方法的参数说明:
1.url 请求地址
2.type 请求方式,默认是'GET',常用的还有'POST'
3.dataType 设置返回的数据格式,常用的是'json'格式
4.data 设置发送给服务器的数据,没有参数不需要设置
5.success 设置请求成功后的回调函数
6.error 设置请求失败后的回调函数
7.async 设置是否异步,默认值是'true',表示异步,一般不用写
8.同步和异步说明
同步是一个Ajax请求完成另外一个才可以请求,需要等待上一个Ajax请求完成,好比线程同步。
异步是多个Ajax同时请求,不需要等待其它Ajax请求完成, 好比线程异步。
Ajax的简写方式:
$.Ajax按照请求方式可以简写成$.get或者$.post方式
Ajax简写方式的示例代码:
<script>
$(function(){
/*
1. url 请求地址
2. data 设置发送给服务器的数据, 没有参数不需要设置
3. success 设置请求成功后的回调函数
4. dataType 设置返回的数据格式,常用的是'json'格式, 默认智能判断数据格式
*/
$.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
console.log(dat);
console.log(status);
alert(dat);
}).error(function(){
alert("网络异常");
});
/*
1. url 请求地址
2. data 设置发送给服务器的数据, 没有参数不需要设置
3. success 设置请求成功后的回调函数
4. dataType 设置返回的数据格式,常用的是'json'格式, 默认智能判断数据格式
*/
$.post("test.php", {"func": "getNameAndTime"}, function(data){
alert(data.name);
console.log(data.time);
}, "json").error(function(){
alert("网络异常");
});
});
</script>
$.get和$.post方法的参数说明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
1.url 请求地址
2.data 设置发送给服务器的数据,没有参数不需要设置
3.success 设置请求成功后的回调函数
data 请求的结果数据
status 请求的状态信息, 比如: "success"
xhr 底层发送http请求XMLHttpRequest对象
4.dataType 设置返回的数据格式
"xml"
"html"
"text"
"json"
5.error 表示错误异常处理
func 错误异常回调函数
3. 小结
Ajax是发送http请求获取后台服务器数据的技术;Ajax的简写方式可以使用$.get和$.post方法来完成。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
零基础如何入门Python语言?有哪些学习建议?
众所周知,Python目前是最受欢迎的编程语言之一,尤其是对于零基础的初学者来说,Python语言更是十分的友好。因此,不少初学者常常会有这样一个共同的疑惑,零基础如何入门Python语言?本文就来给大家一些学习上的建议,希望可以让大家少走弯路。毕竟不正确的学习方法,可能会大大降低大家一开始的学习兴趣,现在就一起来看看入门Python语言的建议吧!
5265
2019-11-27 15:44:25
Python中的“字典”怎么学?有没有详细的教程?
Python中的“字典”怎么学?有没有详细的教程?注意,此“字典”非新华字典,这个“字典”指的是键/值对之间用冒号隔开,项之间用逗号隔开,整个字典用大括号括起来。大家千万不能弄混,这是学习Python的知识点之一,接下来小编结合案例为大家详细讲解“字典”。
4529
2020-01-11 14:20:31
零基础快速上手Python要多久?
人生苦短,我用Python。这句话完美的总结了Python这门编程语言的优点,即简洁优美,功能强大,新手友好。Python总能够轻松帮我们实现复杂的功能,因此不管是出于什么原因学习Python,都是十分值得的。毫不夸张的说,在未来掌握一门编程语言将是大势所趋,而Python则是零基础学习者最好的选择。那么零基础快速上手Python要多久呢?这个要结合情况具体分析,学习时间从一个月到半年不等。
5392
2020-03-02 18:12:38
怎样学习Python
应该如何学习Python呢?买一本书、找一套视频、报名一个培训班?从理论上来讲,无论选择哪种学习方式,都可以掌握Python语言,但实际情况而言,总会因为某些原因导致自己的学习计划搁浅。所以在这里整理本片文章,希望本文能为大家的学习节约更多的时间成本。
4482
2020-05-15 18:06:36
Python基础培训教程学什么?
对于许多Python初学者来讲,“从哪开始学起”、“要学什么内容”都是一开始困扰他们的首要难题。确实刚开始踏入编程学习的大门,感到迷茫和不知所措也是正常的。本文将和大家一起聊聊,Python基础培训教程学什么?一般来讲,都是从Python的基础语法开始学起,Python 容器、函数和文件操作以及面向对象都是需要学习的内容。
4221
2020-07-02 11:19:59