如果有人看到的话,那我要先声明一下,本人菜鸟,以下内容是自己查资料摸索测试的,肯定有错误的地方,看到的话请你指出来,如果也是刚刚研究这方面知识的同志,希望能给你一些参考。
首先大略介绍一下jquery的ajax。
包括$.get()
, $.post()
,$.ajax()
。
我就只说最后一种了,因为最后一种可操作性最强。
一般格式:
$.ajax({
type: 'POST',//请求方法 默认get
url: url ,//发送请求的地址 就是要交互的jsp文件
data: data ,//发送到服务器的数据对象,将自动转换为请求字符串格式
success: function(data,textStatus){},//请求成功后回调函数
dataType: dataType,//预期服务器返回的数据类型
async:true// 是否异步请求 默认为true
});
具体内容可参看http://www.w3school.com.cn/jquery/ajax_ajax.asp
我大致讲几点:
1.属性data:是key/value类型的对象即可,如{name:”lili”,info:[{home:1},{home:2}]}
2.属性dataType:包括json、text、xml、html、script、jsonp 这个决定了success属性的function(data,textStatus)里data的返回的数据类型,比如写”json”那返回的数据类型就是json对象,可在直接读取对象属性,写text的话那返回的就是字符串了。
3.属性async:这个是刚刚接触者很容易出问题的一个地方,因为默认是异步的,那么$.ajax()
在与后台交互的过程中,它后面的代码已经执行了,而不是等待这行完成返回数据后再执行。这就容易造成形如
var datas=null;
$.ajax({
type:"get",
url:"myjsp.jsp",
data:{name:"lili"},
dataType:"json",
success:function(redata){
datas=redata;
}
});
alert(datas);
发现datas总是取不到值,其实就是这个原因。
有两个方法,一是加上async:false这个属性,那么ajax与后台交互时,它后面的代码就不会执行了,会一直等到交互完成才顺序执行。另一个办法就是将alert(datas)写在success:function(){}这里面。不管是不是异步执行,这里面的代码都是在ajax请求成功后执行的。
下面说说与jsp的交互问题。
这方面没什么心得,写几个超简单例子好了。注意:以下例子都需引用jquery类库
1.最简单交互 传递字符串
html文件:
<html>
<head>
<meta http-equip="Content-Types" content="text/html;charset=utf-8"/>
<script src="jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>
<script>
$.ajax({
type:"post",
url:"myJsp.jsp",
data:{name:"lili"},
success:function(redata){
alert(redata);
}
});
</script>
</body>
</html>
jsp文件:myJsp.jsp
<%
String name=request.getParameter("name");
out.print(name);
%>
2.jsp页面返回对象
<html>
<head>
<meta http-equip="Content-Types" content="text/html;charset=utf-8"/>
<script src="jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>
<script>
$.ajax({
type:"post",
url:"myJspMap.jsp",
data:{name:"lili"},
dataType:"json",
success:function(redata){
alert(redata.name);
}
});
</script>
</body>
</html>
jsp文件:myJspMap.jsp
<%@page import="java.util.*"%>
<%@page import="com.google.gson.Gson"%>
<%
String name=request.getParameter("name");
Map<String,String> map=new HashMap<String,String>();
map.put("name",name);
Gson gson=new Gson();
String jsonStr=gson.toJson(map);
out.print(jsonStr);
%>
这里面需要引用gson-2.3.1.jar的类,需要把jar包放在myJspMap.jsp所在项目的WEB-INF\lib下。
gson下载地址:http://download.youkuaiyun.com/detail/qwcs163/8671349
当然特别简单的可以自己拼凑,如把myJspMap.jsp改成如下这样,那什么也不需要引用,但是没有多大实际价值。
<%
String name=request.getParameter("name");
String str="{\"name\":\""+name+"\"}";
out.print(str);
%>