在 web 开发中异步请求方式普遍使用, Ajax 技术减少程序员的工作量, 也提升用户交互体验. Ajax 的四种异步请求方式都能实现基本需求, 闲话不多说, 直接切入正题.
1.$.getJSON
$.getJSON() 是专门为 Ajax 获取 JSON 数据而设置的, 并且支持跨域调用, 其语法的格式为:
- $.getJSON(
- url, // 请求 URL
- [data], // 传参, 可选参数
- [callback] // 回调函数, 可选参数
- );
url:string 类型, 发送请求地址
data : 可选参数, 待发送 Key/value 参数 , 同 get,post 类型的 data
callback : 可选参数, 载入成功时回调函数, 同 get,post 类型的 callback
JSON 是一种理想的数据传输格式, 它能够很好的融合与 JavaScript 或其他宿主语言, 并且可以被 JS 直接使用. 使用 JSON 相比传统的通过 GET,POST 直接发送 "裸体" 数据, 在结构上更为合理, 也更为安全. 至于 jQuery 的 getJSON() 函数, 只是设置了 JSON 参数的 Ajax() 函数的一个简化版本. 这个函数也是可以跨域使用的, 相比 get(),post() 有一定优势. 另外这个函数可以通过把请求 url 写 成 "myurl?callback=X" 这种格式, 让程序执行回调函数 X.
特别注意:$.getJSON 是以 GET 方式提交数据, 所以不能提交过大的数据量, 可选 $.post. 至于如何修改为可用 POST 方式提交或者扩大 GET 提交数据量的问题, 没有深入研究.
- //-- 项目中的实际案例
- function changeAnswerShow(id){
- $.getJSON(
- "/legalconsult/admin/changeshowanswer",{id:id}, //URL 和参数
- function(data){
- if(data.error==0){ // 回调函数, 与后台交互
- showSuccessMessage("操作成功, 正在刷新....");
- setTimeout("window.location.reload()",2200);
- var i=$("td.show"+id+"a i" );
- if(i.hasClass("splashy-gem_okay")){
- i.removeClass("splashy-gem_okay").addClass("splashy-gem_remove");
- }else{
- i.removeClass("splashy-gem_remove").addClass("splashy-gem_okay");
- }
- return true;
- }else{
- showErrorMessage(data.error);
- return false;
- }
- }
- );
- }
- $.get
$.get 是以 GET 方式实现 Ajax 请求, 在提交短数据时可用. 但我基本不常用, 因为 $.getJSON 完全满足功能需要, 正如上所说, 结构合理, 更加安全. 即便是为了提交长数据, 也不会选用 $.get, 而是 $.post. 但还是要了解其 用法:
- $.get(
- url,
- [data],
- [ callback]
- ;)
url:string 类型, Ajax 请求的地址.
data: 可选参数, object 类型, 发送至服务器的 key/value 数据会作为 QueryString 附加到请求 URL 中.
callback: 可选参数, function 类型, 当 Ajax 返回成功时自动调用该函数.
- // 项目案例
- $.get(
- "/legalconsult/answer/focus",
- {id:id},
- function(data){
- if(data.error==0){
- var su=$("#focus"+id).text();
- su=parseInt(su);
- su++;
- $("#focus"+id).text(su); // 后台操作成功后返回 error==0, 在这里进行前端操作
- var i=$("#show_"+id);
- var j=$("<span><p class='icon-ok'></p > 已赞同 </span>");
- i.empty().append(j);
- return true;
- }else{
- showError(data.error); // 调用其它函数, 读者可忽视
- return false;
- }
- }
- );
- $.post
我在提交评论或者留言之类的数据时经常使用 $.post, 不废话上代码:
- $.post(
- url,
- [data],
- [callback],
- [type]
- );
url:string 类型, Ajax 请求的地址.
data: 可选参数, object 类型, 发送至服务器的 key/value 数据会作为 QueryString 附加到请求 URL 中.
callback: 可选参数, function 类型, 当 Ajax 返回成功时自动调用该函数.
type:type 为请求的数据类型, 可以是 html,xml,JSON 等类型, 如果我们设置这个参数为: JSON, 那么返回的格式则是 JSON 格式的, 如果没有设置, 就和 $.get() 返回的格式一样, 都是字符串的.
这个方法和 $.get() 用法差不多, 唯独多了一个 type 参数, 那么这里就只介绍 type 参数吧, 其他的参考上面 $.get() 的.
- // 实际项目案例
- function changeMarkShow(id){
- $.post(
- "/legalconsult/admin/markquestion",{id:id},
- function(data){
- if(data.error==0){
- showSuccessMessage("操作成功, 正在刷新....");
- setTimeout("window.location.reload()",2200);
- var i=$("td.markshow"+id+"a i" );
- if(i.hasClass("splashy-star_full")){
- i.removeClass("splashy-star_full").addClass("splashy-gem_empty");
- }else{
- i.removeClass("splashy-gem_empty").addClass("splashy-gem_full");
- }
- return true;
- }else{
- showErrorMessage(data.error);
- return false;
- }
- },
- "json" // 声明数据格式
- );
- }
- $.Ajax
$.Ajax 是一种常用的普通封装异步方式.
1 $.Ajax(options);
options 是一个 object 类型, 它指明了本次 Ajax 调用的具体参数. 呈上代码:
- // 示例
- .Ajax(
- url: "/legalconsult/layer/update-info",
- datatype:"json",
- type:'post',
- beforeSend:function(){
- // 函数体, 数据发送前执行.
- }
- success:function(){
- // 函数体, 数据发送成功回调
- }
- error: function(){
- // 函数体, 数据发送错误时执行
- }
- );
来源: http://www.qdfuns.com/article/51759/c9939d5205493da7708b9f83abebef2e.html