> 文章列表 > JSP+jquery使用ajax方式调用json的实现方法

JSP+jquery使用ajax方式调用json的实现方法

JSP+jquery使用ajax方式调用json的实现方法

本文实例讲述了JSP+jQuery使用Ajax方式调用JSON的实现方法,在这里分享给大家以供大家参考,具体的实现以及代码如下所示:
前台:

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">//testfunction test(uid){if(confirm("确定该用户操作"+uid+"吗?")){var date = new Date();var param = {uid:uid};jQuery.get("test.jsp?para=" + date, param,function(data){if(data != null){var result = data.result;//alert("data==="+data);if(result == 1){alert("操作失败");}if(result == 0){alert("操作失败。");//document.location.href = document.location;//window.location.reload();}}});}}
</script>
<a href="javascript:void(0);" onclick="test(111111111111111111);">submit</a>

后台:
test.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%
response.setContentType("application/x-json;charset=UTF-8");
String uid=request.getParameter("uid");
int ret=0;
String result = "{\\"result\\":" + ret + "}";
out.print(result);
%>

注意:返回json格式
如{"result":0}
需要设置 :

代码如下:

response.setContentType("application/x-json;charset=UTF-8");

jsp+jquery+ajax+json

Person、Address 2个类描述一个人,用ajax把数据取回显示在页面上,在DemoServlet里组装数据,项目用到的文件

json-lib-2.1-jkd15.jar

commons-lang-2.1.jar

commons-logging.jar

commons-collections-3.2.jar

commons-beanutils.jar

jquery.js

json.js

下面是详细代码:

Person:

public class Person implements java.io.Serializable{   private String name;   private String sex;   private Integer age;   private Address address;   public String getName() {   return name;   }   public void setName(String name) {   this.name = name;   }   public String getSex() {   return sex;   }   public void setSex(String sex) {   this.sex = sex;   }   public Integer getAge() {   return age;   }   public void setAge(Integer age) {   this.age = age;   }   public Address getAddress() {   return address;   }   public void setAddress(Address address) {   this.address = address;   }   
} 

Address:

public class Address implements java.io.Serializable{   private String province;   private String city;   private String country;   public Address() {   }   public Address(String province, String city, String country){   this.province =province;   this.city = city;   this.country = country;   }   public String getProvince() {   return province;   }   public void setProvince(String province) {   this.province =province;   }   public String getCity() {   return city;   }   public void setCity(String city) {   this.city = city;   }   public String getCountry() {   return country;   }   public void setCountry(String country) {   this.country = country;   }   
} 

DemoServlet:

import java.io.IOException;   
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;   
import net.sf.json.JSONObject;   
import org.wncnke.json.pojo.Address;   
import org.wncnke.json.pojo.Person;   
public class DemoServlet extends HttpServlet{   @Override protected void doGet(HttpServletRequest request,HttpServletResponse response)   throwsServletException, IOException {   doPost(request, response);  }   @Override protected void doPost(HttpServletRequest request,HttpServletResponse response)   throwsServletException, IOException {   response.setContentType("text/xml;charset=utf-8");   response.setHeader("Cache-Control","no-cache");   try{   Personperson1 = new Person();   person1.setName("小王");  person1.setSex("女");   person1.setAge(23);   person1.setAddress(newAddress("辽宁省","大连市","高新园区"));   List<Person> list = new ArrayList<Person>();   list.add(person1);   try{   //取集合   JSONArray jsonArray = JSONArray.fromObject(list);   JSONObject jsonObject = new JSONObject();   jsonObject.put("person", jsonArray);   response.getWriter().write(jsonObject.toString());    } catch(IOException e) {   e.printStackTrace();   }   }catch(Exception e){   e.printStackTrace();   }   }   
}

web.xml:

<?xml version="1.0"encoding="UTF-8"?> 
<web-app xmlns="http://caucho.com/ns/resin" xmlns:resin="http://caucho.com/ns/resin/core"> <display-name>json</display-name> <welcome-file-list> <welcome-file>index.jsp</welcome-file>        </welcome-file-list> <servlet> <servlet-name>DemoServlet</servlet-name> <servlet-class>org.wncnke.json.servlet.DemoServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>DemoServlet</servlet-name> <url-pattern>/demoServlet</url-pattern> </servlet-mapping> </web-app>

index.jsp:

view plaincopy to clipboardprint?
<%@ page language="java" pageEncoding="utf-8"%> 
<%   
String path = request.getContextPath();   
String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<head> 
<base href="<%=basePath%>"> 
<mce:script language="javascript" src="script/jquery.js"mce_src="script/jquery.js"></mce:script>     
<mce:script language="javascript" src="script/json.js"mce_src="script/json.js"></mce:script>    
<mce:script language="javascript"><!--   function addPerson(){      $.getJSON("demoServlet",null,function call(data){   var list = data.person;   $.each(list, function(i, p){   var row =$("#tr").clone();   row.find("#name").text(p.name);   row.find("#age").text(p.age);   row.find("#sex").text(p.sex);   row.find("#address").text(p.address.province + p.address.city +p.address.country);   row.appendTo("#tbody");   });      });   
}      
// --></mce:script> 
</head> 
<body> 
<input type="button" value="JsonView"onClick="addPerson();">      
<div id="dateMessage">      <table id="planTable"border="1">      <tr> <td>Name</td> <td>Sex</td> <td>Age</td> <td>Address</td> </tr>      <tbody id="tbody"> <trid="tr"> <td id="name"></td> <td id="sex"></td> <td id="age"></td> <td id="address"></td> </tr>      </tbody> </table>      
</div> 
</body> 
</html>