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数据
随机推荐
- MyBatis基础入门《六》Like模糊查询
MyBatis基础入门<六>Like模糊查询 描述: 未改动的文件,不再粘贴出来.项目中SQL的xml映射文件重要标签如下: mapper namespace cache 配置给定命令空间 ...
- windows批处理定时关机
2017-04-11 windows bat文件可以简化很多cmd命令,为我们提供很多方便.今天介绍定时关机的批处理代码实现: 我们知道windows下的定时关机可以通过shutdown命令实现,如果 ...
- jdk自动安装java_home 无法修改解决方法
使用命令行修改 cmd下set java_home=D:\soft\java\jdk1.7.0_72 搞定
- Yii数据对象笔记
要执行一个SQL查询,应该遵循以下步骤 - 创建一个 yii\db\Command 的 SQL查询命令 绑定参数(非必须) 执行命令 第1步 - 创建一个 actionTestDb()方法在 Site ...
- html5-新布局元素header，footer
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 【Linux学习三】VI/VIM全屏文本编辑器
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 一.打开关闭文件打开文件:vim /path/to/somefilev ...
- 大数据权限管理工具 Apache Ranger 初识
资料参考: Apache Ranger – Introduction http://ranger.apache.org/ 阿里云 Ranger简介 Apache Ranger初识 - 阿里云 大数据权 ...
- hive中的with用法
hive 可以通过with查询来提高查询性能,因为先通过with语法将数据查询到内存,然后后面其它查询可以直接使用,这种方法与创建临时表类似但是不需要创建临时表实体表,内存中的子查询结果在会话结束后会 ...
- 通过junit/TestNG+java 实现自动化测试
第一步 安装JDK JDk1.7. 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-188026 ...
- 合并两个JsonArray
//合并两个JSONArray public static String joinJSONArray(JSONArray mData, JSONArray array) { StringBuffer ...