web项目中ajax传List、Map类型参数以及页面解析

最新推荐文章于 2021-08-06 07:27:16 发布

weixin_34129145

最新推荐文章于 2021-08-06 07:27:16 发布

阅读量622

点赞数

文章标签： java json javascript ViewUI

原文链接：https://my.oschina.net/u/1429171/blog/349536

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.首先先见一个小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() {
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;
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= request.getParameter("name");//得到ajax传递过来的paramater
System.out.print(str);
PrintWriter out = response.getWriter();
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请求
}
}

配置好web.xml中的servlet映射，这一步就略了。

2.建立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>
</head>
<body>
    <input type="button" name="b" value="测试" οnclick=test()>
</body>

3测试开始，点击按钮弹出zah 123
json[0]就相当于u1对象 json[1]相当于u2对象，对于其属性的访问跟java对象一样，其他的Connection测试应该一样,