您的位置：首页 > Web前端 > JQuery

jquery ajax刷新局部页面，取得数据后，动态的在前台显示

2016-08-20 10:13 453 查看
jquery ajax刷新局部页面，取得数据后，动态的在前台显示

服务器servlet

GETJSON.JAVA 模拟出本次实验要使用的数据，使用的是json形式的数据格式

（注意使用json格式的一定要添加java-json.jar包）

代码如下

`package com.itheima.service;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;

import org.json.JSONObject;

public class GetJson 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 {

request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
System.out.println("GetJson is start"+request.getParameter("name"));
response.setContentType("appliction/json;charset=utf-8");
try{
//创建json数组
JSONArray jsonArray = new JSONArray();
//创建一个json对象
for(int i =0 ; i<3;i++){
JSONObject good = null;
good = new JSONObject();
good.put("id", "id"+i);
good.put("name", "杯子:"+i);
good.put("adress", "北京："+i);
jsonArray.put(good);
}
//再创建一个Object,用来存放json数组
JSONObject goods = new JSONObject();
goods.put("goodList", jsonArray);
//把json对象封装成为字符串类型的
String goodList = goods.toString();
//打开响应的输出流，把字符串写入响应中
System.out.println(goodList);
PrintWriter out = response.getWriter();
out.print(goodList);

out.flush();
out.close();
}catch(Exception e){
e.printStackTrace();
}

}


}

`

- jsp部分代码是内联

<%@ 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 'json.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 language="javascript" type="text/javascript"
src="./JS/jquery-1.8.3.js"></script>
<script type="text/javascript">
function requestJson() {
$.ajax({
//请求方式
type : "POST",
//请求路径,这里不能直接写成绝对路径，因为写成绝对路径会被当成跨域处理
url : "<%=request.getContextPath()%>/servlet/GetJson",
//传递给服务器的数据
data : "name=alleged",
//告诉jquery返回的数据格式
dataType : "json",
//请求前
success : callback,
error : printError
//定义交互完成，并且服务器正确返回数据时调用的回调函数
});
//回调函数，相当于上面的function(data)
function callback(data) {
//找到json数组，遍历输出
$.each(data.goodList, function(index, item) {
alert(typeof(item));
//jquery调用dom方法动态添加元素
$("#show").append(
"<div>" +index+":"+ item.id + "</div>" +
"<div>" +index+":"+ item.name + "</div>"+
"<div>" +index+":"+ item.adress + "</div><hr/>");
});
}
function printError(data) {
$("#show").html("请求失败");
}
}
</script>
</head>

<body>
<input name="boot" id="boot" type="button" onclick="requestJson()"
value="请求json数据">
<br>
<div id="show" style="width:500px;height:500px;border:1px solid red;"></div>
</body>
</html>


实验成功(不容易啊)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ajax jquery servlet
相关文章推荐
新的分享
章节导航