Jquery+AJAX的结合使用

旧城等待， 2022-06-10 08:09 204阅读 0赞

# 1  调用方式     #

$.ajax(

type: "POST",

url: "serverlet",

//data："username="+username,

data: \{" uid": str\}, // uid为参数的名称，str为值；多个参数写法："\{'参数1':'值1','参数2'：'值2',.....\}"

contentType: "application/json;charset=utf-8",

dataType: "json",//告诉[jQuery][]的返回数据格式。          success: function (msg) \{

//成功返回数据msg(格式为dataType设置的格式),并进行相应的页面刷新操作

附：[jquery][jQuery]还有两种调用方式，这里就不介绍了：

$.get(servlet,data,callback);  $.post(servlet,data,callback);

## 2  参数介绍 ##

<table> 
 <tbody> 
 <tr> 
 <td> 参数名 </td> 
 <td> 类型 </td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td> url </td> 
 <td> String </td> 
 <td> (默认:&nbsp;当前页地址)&nbsp;发送请求的地址。 </td> 
 </tr> 
 <tr> 
 <td> type </td> 
 <td> String </td> 
 <td> (默认:&nbsp;"GET")&nbsp;请求方式&nbsp;("POST"&nbsp;或&nbsp;"GET")，&nbsp;默认为&nbsp;"GET"。注意：其它&nbsp;HTTP&nbsp;请求方法，如&nbsp;PUT&nbsp;和&nbsp;DELETE&nbsp;也可以使用，但仅部分浏览器支持。 </td> 
 </tr> 
 <tr> 
 <td> timeout </td> 
 <td> Number </td> 
 <td> 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 </td> 
 </tr> 
 <tr> 
 <td> async </td> 
 <td> Boolean </td> 
 <td> (默认:&nbsp;true)&nbsp;默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为&nbsp;false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 </td> 
 </tr> 
 <tr> 
 <td> beforeSend </td> 
 <td> Function </td> 
 <td> 发送请求前可修改&nbsp;XMLHttpRequest&nbsp;对象的函数，如添加自定义&nbsp;HTTP&nbsp;头。XMLHttpRequest&nbsp;对象是唯一的参数。 function&nbsp;(XMLHttpRequest)&nbsp;{ &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this;&nbsp;//&nbsp;the&nbsp;options&nbsp;for&nbsp;this&nbsp;ajax&nbsp;request &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} </td> 
 </tr> 
 <tr> 
 <td> cache </td> 
 <td> Boolean </td> 
 <td> (默认:&nbsp;true)&nbsp;jQuery&nbsp;1.2&nbsp;新功能，设置为&nbsp;false&nbsp;将不会从浏览器缓存中加载请求信息。 </td> 
 </tr> 
 <tr> 
 <td> complete &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </td> 
 <td> Function </td> 
 <td> 请求完成后回调函数&nbsp;(请求成功或失败时均调用)。参数：&nbsp;XMLHttpRequest&nbsp;对象，成功信息字符串。 function&nbsp;(XMLHttpRequest,&nbsp;textStatus)&nbsp;{ &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this;&nbsp;//&nbsp;the&nbsp;options&nbsp;for&nbsp;this&nbsp;ajax&nbsp;request &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} </td> 
 </tr> 
 <tr> 
 <td> contentType </td> 
 <td> String </td> 
 <td> (默认:&nbsp;"application/x-www-form-urlencoded")&nbsp;发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 </td> 
 </tr> 
 <tr> 
 <td> data </td> 
 <td> Object, String </td> 
 <td> 发送到服务器的数据。将自动转换为请求字符串格式。GET&nbsp;请求中将附加在&nbsp;URL&nbsp;后。查看&nbsp;processData&nbsp;选项说明以禁止此自动转换。必须为&nbsp;Key/Value&nbsp;格式。如果为数组，jQuery&nbsp;将自动为不同值对应同一个名称。如&nbsp;{foo:["bar1",&nbsp;"bar2"]}&nbsp;转换为&nbsp;'&amp;foo=bar1&amp;foo=bar2'。 </td> 
 </tr> 
 <tr> 
 <td> dataType </td> 
 <td> String </td> 
 <td> 预期服务器返回的数据类型。如果不指定，jQuery&nbsp;将自动根据&nbsp;HTTP&nbsp;包&nbsp;MIME&nbsp;信息返回&nbsp;responseXML&nbsp;或&nbsp;responseText，并作为回调函数参数传递，可用值: "xml":&nbsp;返回&nbsp;XML&nbsp;文档，可用&nbsp;jQuery&nbsp;处理。 "html":&nbsp;返回纯文本&nbsp;HTML&nbsp;信息；包含&nbsp;script&nbsp;元素。 "script":&nbsp;返回纯文本&nbsp;JavaScript&nbsp;代码。不会自动缓存结果。 "json":&nbsp;返回&nbsp;JSON&nbsp;数据&nbsp;。 "jsonp":&nbsp;<a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/" rel="nofollow">JSONP</a>&nbsp;格式。使用&nbsp;<a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/" rel="nofollow">JSONP</a>&nbsp;形式调用函数时，如&nbsp;"myurl?callback=?"&nbsp;jQuery&nbsp;将自动替换&nbsp;?&nbsp;为正确的函数名，以执行回调函数。 </td> 
 </tr> 
 <tr> 
 <td> error </td> 
 <td> Function &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </td> 
 <td> (默认:&nbsp;自动判断&nbsp;(xml&nbsp;或&nbsp;html))&nbsp;请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest&nbsp;对象，错误信息，（可能）捕获的错误对象。 function&nbsp;(XMLHttpRequest,&nbsp;textStatus,&nbsp;errorThrown)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;通常情况下textStatus和errorThown只有其中一个有值&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this;&nbsp;//&nbsp;the&nbsp;options&nbsp;for&nbsp;this&nbsp;ajax&nbsp;request &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} </td> 
 </tr> 
 <tr> 
 <td> global </td> 
 <td> Boolean </td> 
 <td> (默认:&nbsp;true)&nbsp;是否触发全局&nbsp;AJAX&nbsp;事件。设置为&nbsp;false&nbsp;将不会触发全局&nbsp;AJAX&nbsp;事件，如&nbsp;ajaxStart&nbsp;或&nbsp;ajaxStop&nbsp;。可用于控制不同的Ajax事件 </td> 
 </tr> 
 <tr> 
 <td> ifModified </td> 
 <td> Boolean </td> 
 <td> (默认:&nbsp;false)&nbsp;仅在服务器数据改变时获取新数据。使用&nbsp;HTTP&nbsp;包&nbsp;Last-Modified&nbsp;头信息判断。 </td> 
 </tr> 
 <tr> 
 <td> processData </td> 
 <td> Boolean </td> 
 <td> (默认:&nbsp;true)&nbsp;默认情况下，发送的数据将被转换为对象(技术上讲并非字符串)&nbsp;以配合默认内容类型&nbsp;"application/x-www-form-urlencoded"。如果要发送&nbsp;DOM&nbsp;树信息或其它不希望转换的信息，请设置为&nbsp;false。 </td> 
 </tr> 
 <tr> 
 <td> success </td> 
 <td> Function </td> 
 <td> 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function&nbsp;(data,&nbsp;textStatus)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;data&nbsp;could&nbsp;be&nbsp;xmlDoc,&nbsp;jsonObj,&nbsp;html,&nbsp;text,&nbsp;etc... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this;&nbsp;//&nbsp;the&nbsp;options&nbsp;for&nbsp;this&nbsp;ajax&nbsp;request &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} </td> 
 </tr> 
 </tbody> 
</table>

附：

1、返回XML格式数据

前台需设置dataType为xml，同时后台需要httpResponse.setCnontextType("text/xml;charset=utf-8");

例如返回格式：<div>ss</div>

由于xml类似于DOM节点，所以使用操作DOM节点的方法可以取出XML数据

var jqueryObj=$(msg);

var text=jqueryObj.children();

var msgtext=text.text();

msgtext== ss

2、返回json格式数据

注意：经过经验教训，如果返回json格式数据，而且后台要接受前台传来的数据，则前台不要设置 contentType。

前台设置dataType=”json”，如果不设置的话，返回字符串格式的json数据，需要使用eval进行转换：var jsonBack=eval("("+dataBack+")");如果已经设置为json格式，则不需要进行转换，jquery会帮你转换，然后可以进行对json格式数据的获取：

如：

dataBack=\{

\{"id":2,"name":"p1","birthDay":"Jan 15, 2014 2:09:00 PM"\},

\{"id":3,"name":"p2","birthDay":"Jan 15, 2014 2:09:00 PM"\}

\};

$.each(dataBack,function(i,n)\{

var id=data\[i\].id;

var name=data\[i\].name;

alert(“第”\+i+”个人，id为”\+id+”;名字为：”\+name);

)

## 3  AJAX缓存问题   ##

使用时间戳，给url地址增加时间戳，骗过浏览器，不读取缓存，（IE下认为如果url是一样的 就读缓存的数据）

//获取时间戳

var timestamp=(new Date()).valueOf();

//时间戳拼接到url上，

//url=serverlet

if(url.indexOf("?")>=0)\{

url=url+"&t="+timestamp;

\}else\{

url=url+"?t="+timestamp;

## 4  乱码问题 ##

(1)前台：将发送的中文 encodeURI("中文")  (IE解决方案)

后台:name1=new String(name.getBytes("iso8859-1","UTF-8"));

(2)前台发出的数据作两次encodeURI

encodeURI(encodeURI("中文"))；

后台：name1=URLDecoder.decode(name,"UTF-8")

## 5  使用Gson处理Json数据 ##

Gson（又称[Google][] Gson）是[Google][]公司发布的一个开放源代码的[Java][]库，主要用途为[串行化][Link 1][Java][]对象为[JSON][]字符串(toJson()方法)，或反[串行化][Link 1][JSON][]字符串成[Java][]对象(fromJson()方法)。使用起来十分方便。

为了[测试][Link 2]，前台传到后台的是json字符串，所以使用JSON.stringify()方法将json对象转化为json格式的字符串，需要使引入json2.js，同时后台引入gson-2.2.4.jar包。

### 5.1前台传入后台数据： ###

$.ajax(

type: "POST",

url: "serverlet",

//data："username="+username,

data: \{“uid”: str \}", // uid为参数的名称，str为值；多个参数写法："\{'参数1':'值1','参数2'：'值2',.....\}"

contentType: "application/json;charset=utf-8",

dataType: "json",//告诉jquery的返回数据格式。          success: function (msg) \{

//成功返回数据msg(格式为dataType设置的格式),并进行相应的页面刷新操作

l 单数据格式：

data:"num="+num或者data:\{"num":$("\#num").val()\}

l Json格式的数据字符串:

var data=\{\};

data.id=$("\#num").val();//11

data.name=$("\#num1").val();//小明

var myData=JSON.stringify(data);//通过stringify()方法将js对象转换为json格式字符串\{“id”:”1”,”name”:”小明”\}

data:myData

这里主要介绍经常用的json格式数据的交互，测试案例为：前台两个输入框，用于输入id和姓名，点击按钮后在下方显示id,姓名,生日；后台有一个javaBeand对象Student,拥有三个属性 id name birthDay，通过ServletInputStream接收输入框的数据，使用Gson的toJson()将此数据转换为Student对象，同时设置对象的生日属性为此刻时间，最后通过Gson的toJson()方法将对象以List或者HashMap的形式转为为json格式字符串传给前台。

### 5.2接收处理前台传入的数据： ###

1、单个数据  // String num1=request.getParameter("num");

2、Json格式的单个数据如：\{“num”:11\}

// String num1=request.getParameter("num");

3、Json 格式数据字符串

**l 通过ServletInputStream获取POST的数据即接收输入框的数据**

BufferedReader br=newBufferedReader(new InputStreamReader( (ServletInputStream) request.getInputStream()));

String line = null;

StringBuilder jsonRec= new StringBuilder(); //用于接收返回的json字符串

while ((line = br.readLine()) != null) \{

jsonRec.append(line);

得到的json字符串：jsonRec=\{"id":"11","name":"小明"\}

**l 将json字符串转化为对应的javaBean对象（）：**

Gson gson = new Gson(); // 实例化Gson对象

//如果要对输出的json格式的字符串进行指定格式 可以使用以下实例化：

Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();

//将json格式字符串转化为对应的javaBean对象，如果对象的某一属性在此字符串中找不到对应名字的值，则对象的此属性置根据类型为初始值如int 为0 ,string null

Student student= gson.fromJson(jsonRec.toString(), Student.class);

输出结果：Student==\[birthDay=null, id=1, name=小明\]

**l 设置对象的生日为此刻时间**

student.setBirthDay(new Date());

**l 转换对象为json格式串返回前台**

1、以单独一个对象返回

String s = gson.toJson(student);

输出结果：s===\{"id":1,"name":"小明","birthDay":"2014-01-16 10:55:28"\}

2、以List封装对象返回

List<Student> list = new ArrayList<Student>();

list.add(student);

String s = gson.toJson(student);

输出结果：s===\[\{"id":1,"name":"小明","birthDay":"2014-01-16 10:55:28"\}\]

3、以HashMap封装对象返回

HashMap<Integer,Student> map= new HashMap<Integer,Student>();

map.put(student.getId(), student);

String s = gson.toJson(student);

输出结果：s===\{"1":\{"id":1,"name":"小明","birthDay":"2014-01-16 11:18:59"\}\}

[jQuery]: http://lib.csdn.net/base/jquery
[Google]: http://zh.wikipedia.org/wiki/Google
[Java]: http://zh.wikipedia.org/wiki/Java
[Link 1]: http://zh.wikipedia.org/wiki/%E5%BA%8F%E5%88%97%E5%8C%96
[JSON]: http://zh.wikipedia.org/wiki/JSON
[Link 2]: http://lib.csdn.net/base/softwaretest