jQuery实现Ajax
- 目前Web开发形式是后端仅仅提供api接口,那么系统的前端如何得到后端传来的这些数据呢?
- 然后系统前端所填的信息又是如何传递給后端呢?
- 我想最容易易理解的方案那就是通过ajax进行前后端的数据交互,(直接用jQuery库封装好的ajax方法)
ajax都是异步请求的 所以接下去所记录的方法也都是异步进行的
load(url,[data],[callback]) 异步请求载入远程HTML片段并插入至DOM中
- 直接加载HTML页面
$('#abc').load('abc.html')
- 也可以加载HTML片段中某个需要的匹配部分
$('#abc').load('html5/abc.html #abc')
$.getJSON(url,[data],[callback]) 使用一个HTTP GET请求从服务器加载JSON编码的数据
getJSON()是全局jQuery对象的方法,也就是全局函数。
通过url获取JSON数据格式,然后使用回调函数将获取的数据进行后续操作。
$.getJSON('abc.json',function(data){ console.log(data); })
$.getScript(url,[callback]) 使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件
同getJSON方法一样,也是全局jQuery对象的方法。
有时候初次加载页面是有些js文件未必都是必须的,可以通过这个方法可以用户在操作可以动态灵活的加载所需的js脚本。
$.getScript('abc/abc.js')
$.get(url,[data],[callback]) 使用一个HTTP GET请求从服务器加载数据
get可简单的理解为从服务器获取数据进行之后一系列操作。
$.get('http://www.imooc.com/data/info_f.php',function(data){ $('#abc').html(data); })
$.post(url,[callback]) 使用一个HTTP POST 请求从服务器加载数据
而post请求虽说与get请求结构一样但也有一些区别.
- GET方式对传输的数据大小有限制,而POST方式传递的数据量要比GET方式大得多。
$.post("http://www.imooc.com/data/check_f.php",{ num:$("txtNumber").val() },function(data){ console.log(data); })
- 使用post请求发送序列化表单数据
$.post("test.php", $("#testform").serialize(),function(data){ alert('发送成功'); });
$.ajax([settings]) 执行一个异步的HTTP(Ajax)的请求
ajax()是功能最强大的请求数据的方法,不仅可以请求数据,也可以向服务器发送数据,也可以进行跨域获取json数据。
$.ajax({ url:'url' type:'post', async:true, data:data, dataType: 'json', success:function(data){} })
$.ajaxSetup[options] 设置全局默认的Ajax默认选项
$.ajaxSetup({ type:'post', async:true, dataType: 'json', })
实际用$.ajax()时 仍然可以将默认选项值覆盖
ajaxStart()和ajaxStop()
$(document).ajaxStart(function() { $( "#loading" ).show(); }); $(document).ajaxStop(function() { $( "#loading" ).hide(); });
- ajaxStart()方法用于在Ajax请求发出前触发函数。
- ajaxStop()方法用于在Ajax请求完成后触发函数。
$.ajaxError()和$.ajaxSuccess()
$.ajaxError()
Ajax请求出错时注册一个回调处理函数,这是一个Ajax Event。$.ajaxuccess()
绑定一个函数当Ajax请求成功完成时执行, 这是一个AjaxEvent。
总结
关于前后端用数据Ajax实现就先到这吧,$.ajax()此方法是最底层的方法并未展,但的确在今后实践生产是用得最多的,get和post 区别也是需要清楚的。
相关推荐
TONIYH 2020-07-22
83510998 2020-07-18
wcqwcq 2020-06-26
delmarks 2020-06-14
ppsurcao 2020-06-14
tthappyer 2020-06-07
时光如瑾雨微凉 2020-07-19
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16