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数据
随机推荐
- 将Web项目War包部署到Tomcat服务器基本步骤
参考来源: http://www.cnblogs.com/pannysp/archive/2012/03/07/2383364.html 1. 常识: 1.1 War包 War包一般是在进行Web ...
- 向量体系结构(2)----SIMD指令集扩展和GPU
进行SIMD多媒体扩展的设计,源于一个很容易观察到的事实: 许多多媒体应用程序操作的数据类型比对32位处理器进行针对性优化的数据类型更窄一些. 图像三基色,都是8位.音频采样也都是8位和16位来表示. ...
- node.js中ws模块创建服务端和客户端，网页WebSocket客户端
首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...
- websocket服务器握手协议
测试网页代码如下 <!DOCTYPE html> <html> <head> <title>测试 websocket 世界最简单案例</title ...
- python绝对路径的表述方式 及 字符串的转义
当我们打开某文件的路径时,应该时刻注意绝对路径的表示方法,例如打开某个txt文件时 1, with open(‘d:\77\111.txt’) as f: f.read() 此时会报错 ,路径被反 ...
- Python全栈-数据库介绍与基本操作
.数据库管理软件的由来 数据库的产生是为了解决数据的永久储存.数据安全.以及对方对外服务时能够实现并发服务等效果.例如解决前面所学的Scoket编程中,在不考虑硬件问题的基础上,服务端服务多个客户端时 ...
- Sitecore CMS中删除项目
如何删除项目以及如何在Sitecore CMS中恢复已删除的项目. 删除项目 有多种方便的方法可以删除Sitecore中的项目. 从功能区 在内容树中选择您要删除的项目. 单击功能区中“主页”选项卡的 ...
- Python -- Pandas介绍及简单实用【转】
转http://www.datadependence.com/2016/05/scientific-python-pandas/ 一. Pandas简介 1.Python Data Analysis ...
- python 列表推导
废话不多说,直接上代码 #coding=utf-8 def getitem(index, element): return '%d: %s' % (index, element) def getite ...
- Future复习笔记
1. Future就是对于具体的Runnable或者Callable任务的执行结果进行取消.查询是否完成.获取结果.必要时可以通过get方法获取执行结果,该方法会阻塞直到任务返回结果. Future类 ...