起因
如今的Web形式是后端仅仅提供api接口,那么系统的前端如何得到后端传来的这些数据呢?然后系统前端所填的信息又是如何传递給后端呢?
我想最易理解的方案那就是通过ajax进行前后端的数据交互,嘻嘻嘻嘻,直接用jQuery库封装好的ajax方法,可以说是一种快速生产的方式.
ajax都是异步请求的,所以接下去所记录的方法也都是异步进行的.
ajax方法
load(url,[data],[callback]) 异步请求载入远程HTML片段并插入至DOM中
这些HTML片段可以没有<html>、<head>、<body>,只包含最基本的代码
$('#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.
$.ajaxSuccess()绑定一个函数当 Ajax 请求成功完成时执行, 这是一个Ajax Event. 总结
关于前后端用数据Ajax实现就先到这吧.
$.ajax()此方法是最底层的方法 并未展开,但的确在今后实践生产是用得最多的.get和post区别也是需要清楚的.前端路漫漫 任重而道远