jQuery 中几种Ajax的应用
<script type="text/javascript"> //jquery中的几种ajax请求 function ajaxRequest(){ /* $.ajax();最底层的方法 load()、$.post()、$.ajax();第二层 $.getJSON(); $.getScript();//第三层 /* /*******************************load方法********************************/ //url地址/data发送数据json格式键值对/回调函数 load通常用 //来获取web上静态数据文件,并不能体现ajax的全部价值 load(url,[data(key/value)],[callback]); //1.load能将远程html代码添加到dom中 $("#text").load("test.html"); //2.load 筛选载入html文档 $("#text").load("test.html .para"); //3.传递方式get $("#text").load("test.php",function(){ //... }); //传递方式post $("#text").load("test.php",{name:"rain",age:"22"},function(){ //... }); //4.回调函数 $("#text").load("test.html",function(responseText,textStatus,XMLHttpRequest){ //responsetText 请求返回内容 //textStatus 请求状态,success、error、notmodified、timeout 4种 //XMLHttpRequest对象 }); /********************************************get方法************************************************/ //$.get();方法使用GET异步请求 /*url地址/data发送数据json格式键值对/calback回调函数/type返回类型() 回调函数有两个 function(data,textStatus)data返回来的可以是xml、json文件、html片段 textStatus请求状态:success、error、notmodified、timeout 4种 textStatus返回success才会被调用 这一点跟load不同 */ $.get(url,[.data],[.calback],[.type]); $.get("test.action",{name:"zhangsan",age:"10"},function(data,textStatus){ /*...最后一个参数表示返回的是json格式 json、格式非常严格{"name":"张三","age","20"} 必须是这种格式而不是 {name:"zhangsan",age:"10"}任何一个{}不匹配获取缺少逗号,都会导致页面上的脚本终止运行 甚至带来其他更严重的负面影响当然在不就的将来javascript xml跟json一样容易解析,并且解析的xml将会成为主流的数据交换格式,不过在它之前json 依然有很强的生命力 */ },"json"); /********************************************post方法************************************************/ /* $.post()请求 他与get之间的区别 1、GET会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容 发送给WEB服务器。当然,在Ajax请求中,这种区别对用户是可见的。 2、GET方式对传输的数据大小限制(通常不能大于2KB),而使用POST方式传递 数据量要比GET方式大的多(理论上不受限制) 3、GET方式请求的数据会被浏览器缓存起来,因此其他人可以从浏览器的历史记录 中读取到这些数据,例如账号、密码等,在某种情况下,GET方式会带来严重的安全 性问题,而POST方式相对来说可以避免这些问题 4、GET方式和POST方式传递的数据在服务器上获取也是不相同。在PHP中,GET方式 的数据可以用$_GET[]获取,而POST方式可以用$_POST[]获取,两种方式都可以用 $_REQUEST[]来获取。 $.post(url,[.data],[.calback],[.type]); */ $.post("test.action",{name:"zhangsan",age:"10"},function(data,textStatus){ //...........另外load方法有参数传递时,会使用post请求发送请求 },"json"); /********************************************ajax方法************************************************/ /* 使用load $.get() $.post() 方法完成一些常规的Ajax程序,要编写一些复杂的Ajax程序, 那么就的用到$.ajax();不仅能同时实现与load、get、post方法实现同样的的功能,而且 还可以设定beforeSend(提交前回调函数)、error(请求失败处理)、success(请求成功 后处理)以及complete(请求完成后处理)回调函数,通过这些回调函数,可以给用户更多 的Ajax提示信息。另外,还有一些参数,可以设置Ajax请求的超时时间或者页面的最后更改状态 等。 ajax中的参数详解 url:(默认为当前网页地址)发送请求的地址 type:请求的方式 post、get默认为get,注意http请求的方法,例如PUT和DELETE也可以使用, 但仅有部分浏览器支持 timeout:设置请求超时间(毫秒),此设置将覆盖$.ajaxSetup()方法的全局变量 data:发送到服务器的数据可以在URL后面也可以使用json格式key/value对 dataType:返回数据类型 xml、html、script、json、jsonp、text beforeSend:发送请求修改XMLHttpRequest对象的函数,例如添加自定义HTTP头、 在beforeSend中如果返回false中取消本次ajax请求、XmLHttpRequest对象唯一的参数、 function(XMLHttpRequest){ this;//调用贝齿Ajax请求传递的options参数 } complete:请求完成红调用的回调函数(请求成功失败均调用) success:请求成功调用的回调回调函数,有两个参数。1.由服务器返回,并更具dataType参数进行 处理后的数据。2.描述状态的字符串 function(data,textStatus){ //data可能是xmlDac、jsonObj、html、text等等 this;//调用本次ajax请求传递的options参数 } error:请求失败时调用的函数,该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误 对象(可选)。Ajax时间函数如下: function(XMLHttpRequest,textStatus,errorThrown){ //通常情况下textStatus河errorThown只有其中一个包含信息, this;调用本次Ajax请求是传递的options参数 } global:默认为true,表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件,AjaxStart或者 AjaxStop可用控制各种Ajax事件 */ $.ajax({ type:"POST",//请求方式 url:"test.html",//url访问地址 data:{name:"战三",age:"11"}//传递参数 dataType:"json",//返回值类型 success:function(data){//成功数据处理 //data...数据处理 }, error:function(msg){//失败处理 alert(msg); } }); /********************************************ajax方法************************************************/ /* 只用用post,get 传递参数 如果一个表单中的数据多了 就有点麻烦了 序列化元素serialize();他将dom对象序列化成一个字符串 $("#form1").serizlize(); $.post("this.html",$("#form1").serizlize(),function(data){ //处理... }) serizlizeArray方法返回不是一个字符串,而是将dom元素序列化后返回一个就送格式的数据, $.param()方法:他是serizlize()方法的核心,用来对一个数组或对象按照kay/value进行序列化 var obj={a:1,b:2,c:3}; var k=$.param(obj); alert(k);//输出a=1&b=2&c3 */ /********************************************getScript方法************************************************/ /* 有时候 在页面上初次加载时没有必要将所有的js文件都加出来 可以动态的创建加载js文件 可以使用$.getScript(); */ $("#send").click(function(){ $.getScript("js.js"); }); /********************************************getJSON方法************************************************/ /* $.getJSON()用于加载JSON文件 跟getScript()用法一样 */ $("#send").click(function(){ $.getJSON("js.json"); }); $("#send").click(function(){ $.getJSON("js.json",function(data){ //data数据处理 }); }); } } </script>
相关推荐
【jQuery的Ajax应用】 jQuery是JavaScript的一个库,它极大地简化了JavaScript的使用,包括处理Ajax交互。Ajax在jQuery中的应用让开发者能够实现无刷新的数据交换,提升了用户体验,减少了页面加载时间,同时也使得...
资源名称:J2EE中JSON Jquery_AJAX应用 中文PDF版内容简介:本文档主要讲述的是J2EE中JSON Jquery_AJAX应用;主要是描述使用JSON JQuery_AJAX实现页面动态加载与页面表单数据的异步保存。首先页面通过调用JQuery_...
jQuery 的Ajax应用 jQuery操作表格 jQuery插件
本篇文章将深入探讨jQuery中的Ajax应用,包括`$.ajax()`和`.load()`两种常用的方法。 首先,我们来看一下`response.setContentType()`,这是一个在服务器端设置HTTP响应头的方法,用于指定发送到客户端的数据类型。...
在标题“vue基本环境+jquery ajax应用”中,我们可以理解为这个压缩包可能包含了一个基本的Vue开发环境,并展示了如何结合jQuery的AJAX功能来处理数据请求。 Vue的基本环境通常包括Vue的核心库、Vue CLI(命令行...
1. **$.ajax()函数**:这是jQuery中最核心的Ajax方法,可以接受多个参数来定制请求。例如,URL、类型(GET或POST)、数据、回调函数等。基本用法如下: ```javascript $.ajax({ url: 'your-url', type: 'GET', ...
【基于jQuery的Ajax聊天室程序】是一个典型的Web交互应用,它利用了Ajax技术来实现实时的、无需页面刷新的用户交流。Ajax(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页...
然而,现代Web应用中,前端和后端往往部署在不同的服务器上,这就产生了跨域需求。 jQuery的$.ajax()方法是实现跨域Ajax请求的核心。$.ajax()可以接受一系列参数,其中关键的两个是`url`(指定要请求的远程服务地址...
工作之余写的一些Ajax应用,有6个Demo,数据库为mysql,使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。
本实例将深入探讨如何在Asp.Net MVC项目中应用jQuery与AJAX。 一、jQuery简介 jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax交互。在Asp.Net MVC项目中,jQuery可以帮助开发者更...
jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式,它的作用是使得页面无需重新加载即可向服务器请求数据,并将数据动态地加载到页面中。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它...
AJAX(异步JavaScript和XML)技术在现代Web开发中扮演着关键角色,而jQuery的ajax方法则提供了简洁的API来实现这一功能。 首先,我们来看`bean - json`的转化。在Web服务中,我们经常需要在服务器端处理Java Bean...
在"JqureySweepPagesDemo"中,你可以看到这些特性的实际应用,为你的Web项目带来高效、美观的分页功能。对于初学者,这个实例是学习和理解AJAX分页的宝贵资源,而对于经验丰富的开发者,它则提供了灵感和参考。在...
在AJAX应用中,jQuery的`.ajax()`方法简化了发送异步请求的过程,可以轻松地与服务器进行数据交互。此外,它还提供了一套完整的API来处理响应,例如通过`.done()`、`.fail()`和`.always()`处理成功、失败和完成回调...
在IT行业中,前端开发是构建动态网页应用的关键环节,而jQuery和AJAX是其中不可或缺的工具。本篇文章将深入探讨如何使用jQuery与AJAX技术来实现一个...这种技术在现代Web应用中广泛应用,是前端开发者的必备技能之一。
总的来说,Struts2+Jquery+Ajax的组合使得开发者能够构建出交互性强、响应速度快的Web应用。通过理解MVC模式、熟练掌握Struts2的配置和Action处理、灵活运用Jquery和Ajax,可以大大提高开发效率,提升用户使用体验。...
在网页应用中,尤其是在涉及到多媒体内容或大量数据交换的场景下,AjaxUpload显得尤为重要。 **基本使用方法** 1. **引入jQuery和AjaxUpload库** 在HTML文件中,首先需要引入jQuery库和AjaxUpload插件的...