您的位置：首页 > 编程语言 > Java开发

java ajax json 前后端数据传输

2017-08-04 16:30 351 查看
传输单个对象

example.java

package example;
import servlet.*;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSON;
import net.sf.json.JSONObject;

/**
* Servlet implementation class example
*/
@WebServlet("/example")
public class example extends HttpServlet {
private static final long serialVersionUID = 1L;

public example() {
super();
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
people p=new people("张三", "123");

JSONObject obj=new JSONObject();
obj.put("message",p.getMessage());
obj.put("time", p.getTime());

JSONObject firstp=new JSONObject();
firstp.put("obj",obj);

response.getWriter().append(firstp.toString());
}

}


index.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/my.css"/>
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"example/example",
data:{},
type:"POST",
dataType:"JSON",
success:function(httpdata){
$("#a").append("<li>"+httpdata.obj.message+"</li>");
$("#a").append("<li>"+httpdata.obj.time+"</li>");
}
})
});
</script>
</head>
<body>
<ul id="a"></ul>

</body>
</html>

web.xml插入如下代码
<servlet>
<servlet-name>example</servlet-name>
<servlet-class>example.example</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>example</servlet-name>
<url-pattern>/example/example</url-pattern>
</servlet-mapping>


传输多个对象

example.java

package example;
import servlet.*;
import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSON;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
* Servlet implementation class example
*/
@WebServlet("/example")
public class example extends HttpServlet {
private static final long serialVersionUID = 1L;

public example() {
super();
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
people p1=new people("zhangsan", "123");
people p2=new people("lisi", "123324345");
people p3=new people("wangwu", "332123");
ArrayList<people> list=new ArrayList<people>();
list.add(p1);
list.add(p2);
list.add(p3);

JSONArray arr=new JSONArray();
for(people p: list)
{
JSONObject obj=new JSONObject();
obj.put("message",p.getMessage());
obj.put("time",p.getTime());
arr.add(obj);
}
response.getWriter().append(arr.toString());
}

}


index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/my.css"/>
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"example/example",
data:{},
type:"POST",
dataType:"JSON",
success:function(httpdata){
for(var i=0;i<httpdata.length;i++){
var n=httpdata[i].message
var a=httpdata[i].time
var tr="<tr>"
tr+="<td>"+n+"</td>"
tr+="<td>"+a+"</td>"
tr+="</tr>"
$("#a").append(tr)
}
}
})
});
</script>
</head>
<body>
<table width="100%" id="a" border="1px">
</table>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  数据 json 对象
相关文章推荐
新的分享
章节导航