`

jquery的几种ajax方式对比

阅读更多

jquery的ajax方式有如下几种:
1.   $.post(url,params,callback);
2.   $.getJSON(url,params,callback);
3.   $.ajax();
4.   $.load(url,params,callback);

第一种:采用post方式提交,中文参数无需转码,在callback中如果要获取json字符串,还需转换一下。
如:

Java代码 复制代码
  1. $.post(url,   
  2.                             {id: id,   
  3.                             code: code,   
  4.                              companyId:companyId    
  5.                              },   
  6.                         function (data){   
  7.                             showCompanyRadialDataListdatalist   
  8.                             });   
  9.   
  10. 这个datalist为从后台取回来的数据List。   
  11.   
  12. function showCompanyRadialDataList(datalist){   
  13.  var obj = eval(datalist);     
  14. }//这个eval可以将data转成json串。方便后面取值。   
  15. 如:   
  16.     for (var i =0 ; i< obj.length ;i++){   
  17.           $("td:eq(1)",$tr).htmlobj[i].nuclide);//这里可以用json方式取  datalist里面的数据   
  18.      }   
  19.       
$.post(url,
							{id: id,
							code: code,
							 companyId:companyId 
							 },
						function (data){
							showCompanyRadialDataListdatalist
							});

这个datalist为从后台取回来的数据List。

function showCompanyRadialDataList(datalist){
 var obj = eval(datalist);  
}//这个eval可以将data转成json串。方便后面取值。
如:
	for (var i =0 ; i< obj.length ;i++){
          $("td:eq(1)",$tr).htmlobj[i].nuclide);//这里可以用json方式取	datalist里面的数据
     }
 	



第2种方式:getJSON采取get方式提交,所以如果你的params参数里面有中文的话,请先转码,否则会出现乱码提交到后台。

Java代码 复制代码
  1. $.getJSON(url,param,function(jsondata){   
  2. 这里返回的jsondata可以直接取不用再转换了。   
  3. 如:jsondata[0].nuclide   
  4. }  
$.getJSON(url,param,function(jsondata){
这里返回的jsondata可以直接取不用再转换了。
如:jsondata[0].nuclide
}


第3种方式:$.ajax, 这种方式最灵活。

Java代码 复制代码
  1. $.ajax({   
  2.         url: url,//地址   
  3.         data: data,//参数   
  4.         type: 'POST',//提交方式 可以选择post/get 推荐post    
  5.              async: false,//同步异步    
  6.         dataType: 'json',//返回数据类型    
  7.         success:function(data){   
  8.             accidentList = data.list;   
  9.         //这里可以直接取data里面的数据了,因为设置返回值为json方式。            
  10.         }   
  11.     });  
$.ajax({
	    url: url,//地址
	    data: data,//参数
	    type: 'POST',//提交方式 可以选择post/get 推荐post 
             async: false,//同步异步 
	    dataType: 'json',//返回数据类型 
	    success:function(data){
	    	accidentList = data.list;
	   	//这里可以直接取data里面的数据了,因为设置返回值为json方式。	   		
		}
	});


当然$.ajax里面还有很多参数 可以加更多的特效在里面,如ajaxStart ,ajaxStop等等,
上面的参数type,async,dataType都不是必须的。
第4种方式:$.load 这种用得很少,一般是来加载某一个页面或者xml等等。

总结:如果参数中没有中文,又想直接用json ,那就推荐$.getJSON,如果有中文 那就采用$.post或者$.ajax。

分享到:
评论

相关推荐

    传统Ajax和JqueryAjax操作Json对比案例

    本案例主要对比了传统Ajax和JqueryAjax在处理JSON数据时的区别和用法,这对于理解和优化Web应用的交互体验至关重要。 1. **传统Ajax操作JSON** 传统Ajax操作JSON通常涉及到以下几个步骤: - 创建XMLHttpRequest...

    struts2 + jquery +ajax 登录验证

    Struts2、jQuery和Ajax是Web开发中的三大关键技术,它们结合使用可以构建高效、动态且用户友好的登录验证系统。以下是对这些技术及其在登录验证中的应用的详细说明。 Struts2是一个基于MVC(Model-View-Controller...

    jQuery技巧,比较经典的几种用法总结。

    首先,jQuery 提供了一种简洁的方式来引用页面上的元素。你可以通过ID、类、元素名称或DOM层级关系,甚至XPath条件来选择元素。例如,`$("#msg")`会选取ID为'msg'的元素,`$(".myClass")`会选取所有类名为'myClass'...

    四种流行的AJAX框架jQuery_Mootools_Dojo_ExtJS的对比

    ### 四种流行的AJAX框架对比分析:jQuery, Mootools, Dojo, ExtJS #### 一、jQuery **主页**: &lt;http://jquery.com/&gt; **设计思想**: - **简洁性**: 几乎所有操作都始于选择DOM元素,并对其进行操作(支持Chaining...

    servlet%Ajax$JQuery的对比

    ### servlet与Ajax、jQuery的对比 #### 一、Servlet概览 Servlet是一种由Sun Microsystems定义的标准,用于扩展Web服务器的功能。它可以被视为服务器端的小应用程序,能够处理来自客户端的HTTP请求并返回响应。...

    表格行合并的几种做法(javascript jQuery)

    本篇文章将探讨几种在JavaScript和jQuery中实现表格行合并的方法。 首先,我们理解表格的基本结构。HTML表格由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头单元格)等元素构成。行合并通常涉及到`&lt;td&gt;...

    jQuery权威指南-源代码

    4.2.2 ready()方法的几种相同写法/86 4.3 绑定事件/86 4.4 切换事件/90 4.4.1 hover()方法/90 4.4.2 toggle()方法/93 4.5 移除事件/94 4.6 其他事件/96 4.6.1 方法one() /97 4.6.2 方法trigger () /98 4.7...

    几种流行的AJAX框架介绍pdf格式

    本文将详细介绍几种流行的AJAX框架:jQuery、Mootools、Dojo、Ext JS,并对比它们的特点,帮助开发者根据项目的具体需求选择最合适的框架。 #### 二、AJAX框架概述 AJAX框架是一种提供了一组API和工具集的软件库,...

    ajax全集参考手册

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了用户体验。Ajax的核心是...

    Ajax查看,比较好的Ajax查询

    Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的核心在于利用JavaScript与服务器进行后台通信,实现页面的局部刷新...

    可拖动对比图片jQuery焦点图.zip

    【可拖动对比图片jQuery焦点图】是一种基于JavaScript库jQuery实现的交互式图像展示插件,主要用于比较两张图片的不同之处。这种焦点图插件的独特之处在于它提供了动态的、可拖动的分割条,用户可以通过左右移动这个...

    ajax佟刚老师源码

    8. **jQuery/Ajax库**:对比原生JavaScript实现的Ajax与使用jQuery或其他库如axios、fetch的便利性。 9. **实战项目**:通过实际项目案例,如实时搜索、无刷新分页等,将理论知识应用于实践。 10. **最佳实践**:...

    jQuery中ajax和post处理json的不同示例对比

    本文将对jQuery中的AJAX和POST方法处理JSON数据进行对比,通过示例来展示在处理JSON时可能会遇到的问题,以及它们之间的差异。 首先,我们需要明确AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载...

    几种二级联动案例(jQuery\Array\Ajax php)

    在开发过程中,遇到过非常多的二级联动,下面是我总结出来的几种二级联动案例 二级联动(1)  第一种案例是一种比较简单的二级联动,利用jquery的显示隐藏来实现,对于数据较少的二级联动来说可以采纳 &lt;!...

    jQuery手势密码特效.zip

    【jQuery手势密码特效】是一种基于JavaScript库jQuery实现的九宫格手势解锁功能,常用于增强网页应用的安全性和用户体验。在Android系统中,手势密码解锁已经成为一种常见且便捷的身份验证方式,而这种效果现在也被...

    jQuery手机大转盘抽奖活动代码.zip

    jQuery是一款轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在本案例中,jQuery被用来处理用户交互、控制转盘旋转和展示抽奖结果。 资源中的主要文件包括: 1. `index.html`:这...

    jQuery 验证码

    在网页开发中,验证码是一种常见的安全机制,用于防止自动化脚本或机器人进行恶意操作,如批量注册、垃圾信息发布等。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在这...

    jQuery Ajax页面局部加载方法汇总

    在jQuery中,有几种不同的方式来实现页面的局部加载,包括但不限于: 1. **使用$.ajax方法**:这是最灵活的方式,允许开发者自定义请求的各个方面,如请求类型(GET, POST等)、数据类型(html, json等)、发送数据...

    学习AJAX最好的教材

    AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这种技术使得Web应用程序更加用户友好,因为它允许页面与服务器进行异步交互,提高了用户体验,减少了等待时间...

Global site tag (gtag.js) - Google Analytics