Ajax+Servlet

来源：互联网发布：编程培训班学费编辑：程序博客网时间：2024/06/06 01:55

Ajax + Servlet + JSON 包 – 使用
主要用于接受对象：
前台：
var obj ="{'name':'123','age':'321'}";
XMLHttpReq.send("conn="+obj); // 发送请求
后台：
String str = request.getParameter("conn");
JSONObject object = JSONObject.fromObject(str);
String name = object.getString("name");
发送对象：
User user = new User();
user.setAge(26);
user.setName("www");
PrintWriter out = response.getWriter();
System.out.println(name + "-" + age);
JSONObject jsonObject = JSONObject.fromObject(user);
out.write(jsonObject.toString());
发送 list 和数组
JSONArray jsonArray = JSONArray.fromObject(list);
System.out.println(jsonArray);
发送 map：
JSONObject json = JSONObject.fromObject(map);
System.out.println(json);
一、建立项目项目
二、添加 JSON 库文件
三、创建页面
代码：
<%@ page language="java" import="java.util.*" 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%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords"
content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
}
//发送请求函数
function sendRequest()
{
createXMLHttpRequest();
var url = "add.do";
XMLHttpReq.open("post", url, true);
XMLHttpReq.setRequestHeader("Content-Type","application/x-www-for
m-urlencoded");
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
var obj ="{'name':'123','age':'321'}";
XMLHttpReq.send("conn="+obj); // 发送请求
//XMLHttpReq.send(o.toJSONString());
}
// 处理返回信息函数
function processResponse()
{
if (XMLHttpReq.readyState == 4)
{
// 判断对象状态
if (XMLHttpReq.status == 200)
{
var t = XMLHttpReq.responseText; //返回文本数据（JSON对象格
式的数据,数组）
var obj = eval('('+t+')'); //json对象的字符串转换成对象
var ht = "";
for(var i = 0;i<obj.length;i++){
ht +=obj[i].b;
ht +=obj[i].a;
}
// 信息已经成功返回，开始处理信息
document.getElementById("ca").innerText =obj.name ;
}
else
{
//页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
</script>
</head>
<body>
<button onclick="sendRequest();">sendRequest</button>
<div id="ca">asdfasdfasd</div>
</body>
</html>
四、编写 Servlet 接受数据
代码：
public class AddServlet 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 {
String str = request.getParameter("conn");
JSONObject object = JSONObject.fromObject(str);
String name = object.getString("name");
int age = object.getInt("age");
User user = new User();
user.setAge(26);
user.setName("www");
PrintWriter out = response.getWriter();
System.out.println(name + "-" + age);
JSONObject jsonObject = JSONObject.fromObject(user);
out.write(jsonObject.toString());
}
}

0 0