jsp+ajax+servlet+jquery从后台取json数据示例
<span style="font-size:18px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=path%>/js/jquery.min.js" ></script>
<script type="text/javascript">
function sub(){
$.ajax({
dataType:"json", //数据类型为json格式
contentType: "application/x-www-form-urlencoded; charset=utf-8",
type:"GET",
url:"/ajaxTest/TestServlet",
statusCode: {404: function() {
alert('page not found'); }
},
success:function(data,textStatus){
$("#sp").html("<table border='1'><tr><td>序号</td><td>姓名</td><td>年龄</td></tr>"+
"<tr><td>"+data.people[0].id+"</td><td>"+data.people[0].name+"</td><td>"+data.people[0].age+"</td>"+
"<tr><td>"+data.people[1].id+"</td><td>"+data.people[1].name+"</td><td>"+data.people[1].age+"</td></tr></table>");
}
});
}
</script>
</head>
<body>
This is my JSP page. <br>
<input type="button" value="点击获取结果" id="btn" onclick="sub()">
<br>
result :
<span id="sp"></span> </body>
</html>
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 javax.xml.ws.Dispatch; import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject; public class TestServlet extends HttpServlet { /**
*
*/
private static final long serialVersionUID = 1L; /**
* Constructor of the object.
*/
public TestServlet() {
super();
} /**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
} /**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { response.setCharacterEncoding("UTF-8");
//json在这里存放的是数组信息
JSONObject json=new JSONObject();
JSONArray array=new JSONArray(); //两个数据
JSONObject temp1=new JSONObject();
JSONObject temp2=new JSONObject(); try {
//第一个name和sex
temp1.put("id", 1);
temp1.put("name", "张三");
temp1.put("age", "23");
array.put(0,temp1); //第二个name和sex
temp2.put("id", 2);
temp2.put("name", "李四");
temp2.put("age", "33");
array.put(1,temp2); //添加到json中
json.put("people", array);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} //向前台的页面输出结果
PrintWriter out=response.getWriter();
out.println(json);
out.close();
} /**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { response.setContentType("text");
PrintWriter out = response.getWriter();
out.flush();
out.close();
} /**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
} }
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>ajaxTest</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<description></description>
<display-name>TestServlet</display-name>
<servlet-name>TestServlet</servlet-name>
<servlet-class>TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestServlet</servlet-name>
<url-pattern>/TestServlet</url-pattern>
</servlet-mapping> </web-app>
项目结构：
执行结果：
备注:项目完整代码下载链接：
http://download.csdn.net/download/brunome/9804917
jsp+ajax+servlet+jquery从后台取json数据示例的更多相关文章
- Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 function BuildS ...
- jquery用ajax方式从后台获取json数据，将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
- 通过 jsp+ajax+servlet+webservice 远程访问天气预报服务
通过 jsp+ajax+servlet+webservice 远程访问天气预报服务 - webservice 客户端访问的方式 1. java代码来访问 2. ajax 方式异步加 ...
- (转)springMVC框架下JQuery传递并解析Json数据
springMVC框架下JQuery传递并解析Json数据 json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位.Json的语法非常简单,采用的是键值对表示形式.JSON 可以 ...
- AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- 【转】AJAX 跨域请求 - JSONP获取JSON数据
来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...
- 传递给后台的Json数据解析
后台代码如下: public void ProcessRequest(HttpContext context) { context.Response.ContentType = "appli ...
- springMVC框架下JQuery传递并解析Json数据
springMVC框架下JQuery传递并解析Json数据
随机推荐
- Ajax技术之使用XMLHttpRequest对象（一）【初始化XMLHttpRequest对象】
在初始化XMLHttpRequest对象时要考虑两种情况,一种是IE浏览器,另一种是非IE浏览器.在IE浏览器中要把XMLHttpRequest实例化一个ActiveX对象 http_request ...
- mysql 5.6 每天凌晨12:00 重置sequence表中的某个值
#.创建evevt要调用的存储过程update_current_value_procedure delimiter // drop procedure if exists update_current ...
- Python记录8：函数的嵌套
#函数的嵌套分为两类:# 1.函数的嵌套定义: 在函数内部又定义了一个函数# def foo():# x=1# # print(x)# def bar():# print('from bar')## ...
- __init__.py的作用
__init__.py 文件定义了包的属性和方法.其实它可以什么也不定义:可以只是一个空文件,但是必须存在.如果 __init__.py 不存在,这个目录就仅仅是一个目录,而不是一个包,它就不能被导入 ...
- c#关于字符串格式化
1. 如何使用文化来格式化日期 如: /// <summary> /// 根据语言获取文化名称 /// </summary> /// <returns></r ...
- 提示“此Flash Player与您的地区不相容，请重新安装Flash”的解决办法
问题原因: 因为Flash相对于HTML5,有着运算效率低.资源占用大.安全性不高等缺点,随着HTML5越来越普及,Adobe已宣布2020年正式停止支持Flash这项技术. 但Adobe公司为了利益 ...
- Cacti的使用
前期准备 SNMP的安装,控制机和被控机,以及被控机的配置 1.SNMP的安装参考:http://www.cnblogs.com/smallcoderhujin/p/3785731.html 2.被控 ...
- sitecore系统教程之默认收集数据库MongoDB注意事项
MongoDB是一个高度可扩展的基于文档的NoSQL数据库解决方案,Sitecore体验数据库(xDB)用于收集数据库.在安装MongoDB之前,您应该考虑以下事项: 确定您是需要基于公共云的解决方案 ...
- laravel中使用的PDF扩展包——laravel-dompdf和laravel-snappy
这两天项目中需要将HTML页面转换为PDF文件方便打印,我在网上搜了很多资料.先后尝试了laravel-dompdf和laravel-snappy两种扩展包,个人感觉laravel-snappy比较好 ...
- File §2
Previously speaking,File can be seen as one ducument, also can be seen as list of documents like dir ...