一：首先要明白前后台数据交互的几种方式：
1：最简单的标签
<a href="xxx.xxx?username='liufukin'">请求服务器</a>
2:用的最多的表单
<form action="xxx.xxx" method="post/get">
用户名：<input type="text" name="username">
密码：<input type="password" name="userpwd">
<input type="submit" value="提交">
</form>
3：目前最流行的ajax异步请求
第一步：首先构造需要发送给后台的json格式数据
var sendData = {
forgetType:flag,
loginID:recevData.loginID,
contactType:contactType,
}
第二步：使用jQuery的ajax、load、get、post、getJSON、getScript、getHTML等方法。
$.ajax({
type:"post",
url:"ResetLoginIDorPwd.action",
data:sendData,
success:function(data){
if(isStrEmpty(data.error)){
$("#sendResult").text(sendResult);
gotoStep3();
}else{
$.alert(data.error);
gotoLoginForm();
}
},
error:function(){
$.alert("<s:text name="err.system"/>");
gotoLoginForm();
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
注意：对于构造json格式对象的数据，有以下几种方法
1：var data1 = new Object();
data1.username = "liufu";
data1.userpwd = "abc";
data1.age = 22;
2：var data2 = {
username:"liufu",
userpwd:"abc"
}
data2.age = 22;
注意：若放在ajax方法的第二个位置，则数据必须是*json格式的对象，而不能够用JSON.stringify(data1)转化为String后再放入
二：JQuery ajax详解：
1）首先在html页面要引入jquery插件jquery-1.9.1.min.js的位置所在。2）jquery ajax的基本结构： $.ajax，这个是JQuery对ajax封装的最基础步，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。看一下常用的参数： $.ajax( {
type //数据的提交方式：get和post
url //数据的提交路径
async //是否支持异步刷新，默认是true
data //需要提交的数据
dataType //服务器返回数据的类型，例如xml,String,Json等
success //请求成功后的回调函数
error //请求失败后的回调函数
});
$(function(){ });可以代替JS中的window.οnlοad=function(){}
$.ajax(configObj);//通过$.ajax函数进行调用。
$.ajax的参数描述
参数 描述 url 必需。规定把请求发送到哪个 URL。 data 可选,映射或字符串值,规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType 可选。规定预期的服务器响应的数据类型。 默认执行智能判断（xml、json、script 或 html）。
$.ajax需要注意的一些地方：
1.data主要方式有三种，html拼接的，json数组，form表单经serialize()序列化的；通过dataType指定，不指定智能判断。
后台接收问题：
1.如果是JSON格式的数据，后台需要转换为Map集合或者直接以属性方式获得：（以字符串形式传递，且将JSON对象看做一个整体，
后台只需以参数接收）
var data= [{name:"jon",age:"12"},{name:"jic",age:"18"},{name:"petter",age:"14"}]
$.ajax({
url:'./service/iposremoteapprove/caseToUser.do',
data:{
ds:JSON.stringify(data) /* 特别需要注意这里，需要现将json数组通过JSON.stringify()处理一下之后，才能作为我们需要的参数传过去
},
type:'post'，
success:function(json){
$.messager.alert("提示","成功","info");
}
});
java接收参数
String ds = request.getParameter("ds");
JSONArray json=JSONArray.fromObject(ds);
JSONObject jsonOne;
Map<String,String> map=null;
for(int i=0;i<json.size();i++){
updataMap = new HashMap<String,String>();
jsonOne = json.getJSONObject(i);
map.put("name", (String) jsonOne.get("name"));
map.put("age", (String) jsonOne.get("age"));
}
此时map中就保存了页面传过来的数组中所有json中的键值对了
2.如果是表单类型：（将其序列化serialize()为字符串参数拼接传递或者serializeArray()将其转换为JSON格式数据，
然后使用data:{'User':JSON.stringify(formParam)},）以参数‘User’传递给后台。
3.如果是字符串类型（则后台只能以单个参数的形式获得所有一个个参数）
4.$.ajax只提交form以文本方式，如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit
1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回
responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时
（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。
在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
9.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数 }
11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。
data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。
20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
3)使用jquery案例分析：
jquery ajax提交
表单数据：
第一种：拼接字符串的形式 即url?param=param1¶m=param2：
$(function(){
$("#save").on("click", function (){
$.ajax({
url:'ajax1.action',
data:$('#sub').serialize(),
type:'post',
success:function(data){
alert(data);
}
});
});
});
<form id="sub">
<input type="text" name="test1"/>
<input type="text" name="test2"/>
<input type="text" name="test3"/>
<input
type="text" name="test4"/>
<input type="button" id="save" value="save"/>
</form>
后台接收：String par1 = req.getParameter("test1");形式接收
第二种：使用JSON格式数据：
$(function(){
$("#save").on("click", function (){
var params = $('#sub').serializeArray();
//序列化表格内容为对象数组（表格中的数据需要起name=""）
$.ajax({
url:'ajax1.action',
data:{'mydata':JSON.stringify(params)
},
dataType:'json',
type:'post',
success:function(data){
alert(data);},
error:function(){
alert("表单提交失败 ");
}
});
});});
String jsonStr = req.getParameter("mydata");
JSONArray jsonArray = JSONArray.fromObject(jsonStr); //将得到的字符串转换为Json数组
String name = "";
String value="";
for(int i=0;i<jsonArray.size();i++){
JSONObject jsonObject = jsonArray.getJSONObject(i);
name = jsonObject.getString("name");
value = jsonObject.getString("value");
System.out.println(jsonObject);
}
第三种：构建JSON对象，后台以对象形式接收
4）方法区别：
①parse用于从一个字符串中解析出json对象,如
var str = '{"name":"huangxiaojian","age":"23"}'
结果：
JSON.parse(str)
- age: "23"
- name: "huangxiaojian"
- __proto__: Object
注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。
②stringify()用于从一个对象解析出字符串，如
var a = {a:1,b:2}
结果：
JSON.stringify(a)
"{"a":1,"b":2}"
2.serializeArray()与serialize()
serializeArray()序列化表单内容，返回JSON数据结构数据。
serialize()序列化表单元素为字符串（即url请求时参数拼接的形式），用于 Ajax 请求。
eg:varfields = $("#表单id").serializeArray(); 返回对象数组。
5）Ajax中解析JSON的两种方法分析：
eval(); //此方法不推荐
JSON.parse(); //推荐方法
一、两种方法的区别
我们先初始化一个json格式的对象：
var jsonDate = '{
"name":"周星驰","age":23 }'
var jsonObj = eval( '(' + jsonDate + ')' );
// eval();方法
var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方法
然后在控制台调用：
console.log( jsonObj.name ); // 两种方法都可以正确输入 周星驰
那么问题来了 两种方法有什么区别呢？（下面我们稍微把代码改动一下，蓝色字体为修改部分）
var jsonDate = '{ "name":alert("hello"),"age":23
}'
var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法
console.log( jsonObj.age ); //会先执行“alert”输出“hello” 然后才输出 23
换“JSON.parse();”方法：
var jsonDate = '{ "name":alert("hello"),"age":23
}'
var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方法
cosole.log( jsonobj.age ) //
报错 这个错误告诉我们这个字符串是不合法的
小结：“eval();”方法解析的时候不会去判断字符串是否合法，而且json对象中的js方法也会被执行，这是非常危险的；
而“JSON.parse();”方法的优点就不用多说了，推荐此方法。（不明白的盆友可以自己在控制台测试一下）
二、扩展问题
var jsonDate = '{ "name":"周星驰","age":23 }'
大家可以看到在上面测试时一直用红色把包在花括号外面的引号标注了起来，这对引号是很关键却又是常常被忽略的，因为
“eval();” 和 “JSON.parser();” 这两个方法的参数只接受字符串，也就是说只能解析字符串!!
那我不经会有一个思考，我们在初始化的时候若不加引号对，那么它本身就是对象，js可以直接获取对象本身的属性和方法；
为什么还要加引号将它变成字符串之后再用 “eval();” 或者 “JSON.parse();” 解析，这样做不是既不环保又没有效率吗？
原因很简单：前端提供给后台的只能是字符串数据格式，后台返回给前台的就看返回的是什么数据格式，是字符串就必须
解析之后再用。
待解决问题：jquery九种选择器,jquery ajax的几个常用的事件方法。ajax提交文件
1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回
responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时
（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。
在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
9.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数 }
11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。
data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。
20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
3)使用jquery案例分析： jquery ajax提交
表单数据： 第一种：拼接字符串的形式 即url?param=param1¶m=param2： $(function(){
$("#save").on("click", function (){
$.ajax({
url:'ajax1.action',
data:$('#sub').serialize(),
type:'post',
success:function(data){
alert(data);
}
});
});
}); <form id="sub">
<input type="text" name="test1"/>
<input type="text" name="test2"/>
<input type="text" name="test3"/>
<input type="text" name="test4"/>
<input type="button" id="save" value="save"/>
</form> 后台接收：String par1 = req.getParameter("test1");形式接收 第二种：使用JSON格式数据： $(function(){
$("#save").on("click", function (){
var params = $('#sub').serializeArray();
//序列化表格内容为对象数组（表格中的数据需要起name=""）
$.ajax({
url:'ajax1.action',
data:{'mydata':JSON.stringify(params)
},
dataType:'json',
type:'post',
success:function(data){
alert(data);},
error:function(){
alert("表单提交失败 ");
}
});
});}); 后台接收：
返回的数据格式为
-
String jsonStr = req.getParameter("mydata");
JSONArray jsonArray = JSONArray.fromObject(jsonStr); //将得到的字符串转换为Json数组
String name = "";
String value="";
for(int i=0;i<jsonArray.size();i++){
JSONObject jsonObject = jsonArray.getJSONObject(i);
name = jsonObject.getString("name");
value = jsonObject.getString("value");
System.out.println(jsonObject);
} 第三种：构建JSON对象，后台以对象形式接收
4）方法区别：
①parse用于从一个字符串中解析出json对象,如
var str = '{"name":"huangxiaojian","age":"23"}'
结果：
JSON.parse(str)
- age: "23"
- name: "huangxiaojian"
- __proto__: Object
注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。
②stringify()用于从一个对象解析出字符串，如
var a = {a:1,b:2}
结果：
JSON.stringify(a)
"{"a":1,"b":2}"
2.serializeArray()与serialize()
serializeArray()序列化表单内容，返回JSON数据结构数据。
serialize()序列化表单元素为字符串（即url请求时参数拼接的形式），用于 Ajax 请求。
eg:varfields = $("#表单id").serializeArray(); 返回对象数组。
5）Ajax中解析JSON的两种方法分析：
eval(); //此方法不推荐
JSON.parse(); //推荐方法
一、两种方法的区别
我们先初始化一个json格式的对象：
var jsonDate = '{ "name":"周星驰","age":23 }'
var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法
var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方法
然后在控制台调用：
console.log( jsonObj.name ); // 两种方法都可以正确输入 周星驰
那么问题来了 两种方法有什么区别呢？（下面我们稍微把代码改动一下，蓝色字体为修改部分）
var jsonDate = '{ "name":alert("hello"),"age":23 }'
var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法
console.log( jsonObj.age ); //会先执行“alert”输出“hello” 然后才输出 23
换“JSON.parse();”方法：
var jsonDate = '{ "name":alert("hello"),"age":23 }'
var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方法
cosole.log( jsonobj.age ) // 报错 这个错误告诉我们这个字符串是不合法的
小结：“eval();”方法解析的时候不会去判断字符串是否合法，而且json对象中的js方法也会被执行，这是非常危险的；
而“JSON.parse();”方法的优点就不用多说了，推荐此方法。（不明白的盆友可以自己在控制台测试一下）
二、扩展问题
var jsonDate = '{ "name":"周星驰","age":23 }'
大家可以看到在上面测试时一直用红色把包在花括号外面的引号标注了起来，这对引号是很关键却又是常常被忽略的，因为
“eval();” 和 “JSON.parser();” 这两个方法的参数只接受字符串，也就是说只能解析字符串!!
那我不经会有一个思考，我们在初始化的时候若不加引号对，那么它本身就是对象，js可以直接获取对象本身的属性和方法；
为什么还要加引号将它变成字符串之后再用 “eval();” 或者 “JSON.parse();” 解析，这样做不是既不环保又没有效率吗？
原因很简单：前端提供给后台的只能是字符串数据格式，后台返回给前台的就看返回的是什么数据格式，是字符串就必须
解析之后再用。
待解决问题：jquery九种选择器,jquery ajax的几个常用的事件方法。ajax提交文件