jQuery的Ajax实现异步传输List、Map
由于项目需要通过ajax得到后台的List对象里面的值,由于没有接触过json所以前期我只能先传字符串再在js里截取子串实现。闲暇时间摸索了一下关于json接受List对象的方法,步骤如下:
1.首先下载json所以依赖的包, Json-lib 最新版 json-lib-2.3-jdk15.jar,其是:json-lib.sourceforge/可以直接download,细心的你会发现其网站页面里面有提示它还需要其他包:
Json-lib requires (at least) the following dependencies in your classpath:
jakarta commons-lang 2.4
jakarta commons-beanutils 1.7.0
jakarta commons-collections 3.2
jakarta commons-logging 1.1.1
ezmorph 1.0.6
1.首先下载json所以依赖的包, Json-lib 最新版 json-lib-2.3-jdk15.jar,其是:json-lib.sourceforge/可以直接download,细心的你会发现其网站页面里面有提示它还需要其他包:
Json-lib requires (at least) the following dependencies in your classpath:
jakarta commons-lang 2.4
jakarta commons-beanutils 1.7.0
jakarta commons-collections 3.2
jakarta commons-logging 1.1.1
ezmorph 1.0.6
其中一般项目中都会有前4个,所以只需要下载ezmorph 1.0.6 就可以了
下载地址分别是:
/lang/
/beanutils/
/collections/
/logging/
ezmorph.sourceforge/
2.首先先见一个小web项目
先建一个User类:
package com.json;
public class User {
String username;
String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
jquery字符串截取 return password;
}
public void setPassword(String password) {
this.password = password;
}
}
再建一个servlet
package com.json;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
}
再建一个servlet
package com.json;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class TestJson extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
String str= Parameter("name");//得到ajax传递过来的paramater
import net.sf.json.JSONArray;
public class TestJson extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
String str= Parameter("name");//得到ajax传递过来的paramater
System.out.print(str);
PrintWriter out = Writer();
List list = new ArrayList();//传递List
Map m=new HashMap();//传递Map
User u1=new User();
u1.setUsername("zah");
u1.setPassword("123");
User u2=new User();
u2.setUsername("ztf");
u2.setPassword("456");
list.add(u1); //添加User对象
list.add(u2); //添加User对象
m.put("u1", u1);
m.put("u2", u2);
PrintWriter out = Writer();
List list = new ArrayList();//传递List
Map m=new HashMap();//传递Map
User u1=new User();
u1.setUsername("zah");
u1.setPassword("123");
User u2=new User();
u2.setUsername("ztf");
u2.setPassword("456");
list.add(u1); //添加User对象
list.add(u2); //添加User对象
m.put("u1", u1);
m.put("u2", u2);
JSONArray jsonArray2 = JSONArray.fromObject( list );//转化成json对象
JSONObject jo=JSONObject.fromObject(m);//转化Map对象
out.print(jsonArray2);//返给ajax请求
out.print(jo);//返给ajax请求
}
}
配置好l中的servlet映射,这一步就略了。
3.建立ajax实现
这里为了快速实现用的是jquery实现的。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function test(){
$.ajax({
type:"POST", //请求方式
url:"testjson", //请求路径
cache: false,
data:"name=zah", //传参
dataType: 'json', //返回值类型
success:function(json){
alert(json[0].username+" "+ json[0].password); //弹出返回过来的List对象
}
});
}
</script>
<script type="text/javascript">
function test(){
$.ajax({
type:"POST", //请求方式
url:"testjson", //请求路径
cache: false,
data:"name=zah", //传参
dataType: 'json', //返回值类型
success:function(json){
alert(json[0].username+" "+ json[0].password); //弹出返回过来的List对象
}
});
}
</script>
</head>
<body>
<input type="button" name="b" value="测试" onclick=test()>
</body>
测试开始,点击按钮弹出zah 123
json[0]就相当于u1对象 json[1]相当于u2对象,对于其属性的访问跟java对象一样,其他的Connection测试应该一样,访问Map的话直接把返回函数改成如下即可:
success:function(json){
alert(json.u1.username)
}
}直接跟上Key.属性即可访问Object对象。
<body>
<input type="button" name="b" value="测试" onclick=test()>
</body>
测试开始,点击按钮弹出zah 123
json[0]就相当于u1对象 json[1]相当于u2对象,对于其属性的访问跟java对象一样,其他的Connection测试应该一样,访问Map的话直接把返回函数改成如下即可:
success:function(json){
alert(json.u1.username)
}
}直接跟上Key.属性即可访问Object对象。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论