Ajax结合Json进行交互数据(四)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//json对象
function loadInfo(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
alert(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")");//得到的是json对象
alert(dataObj.name);//因为是json对象，所以能点属性
alert(dataObj.age);
document.getElementById("name").value=dataObj.name;
document.getElementById("age").value=dataObj.age;
}
};
xmlHttp.open("get", "getAjaxInfo?action=jsonObject", true);
xmlHttp.send();
}
//json数组
function loadInfo2(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
alert(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")");
var st=document.getElementById("studentTable");
alert(dataObj.students.length);
var newTr; // 行
var newTd0; // 第一列
var newTd1; // 第二列
var newTd2; // 第三列
for(var i=0;i<dataObj.students.length;i++){
var student=dataObj.students[i];
newTr=st.insertRow();
newTd0=newTr.insertCell();
newTd1=newTr.insertCell();
newTd2=newTr.insertCell();
newTd0.innerHTML=student.name;
newTd1.innerHTML=student.age;
newTd2.innerHTML="语文:"+student.score.chinese+",数学:"+student.score.math+",英语:"+student.score.english;
}
}
};
// xmlHttp.open("get", "getAjaxInfo?action=jsonArray", true);
xmlHttp.open("get", "getAjaxInfo?action=jsonNested", true);
xmlHttp.send();
}
</script>
</head>
<body>
<div style="text-align: center;">
<div><input type="button" onclick="loadInfo()" value="Ajax获取信息"/> 姓名：<input type="text" id="name" name="name" /> 年龄：<input type="text" id="age" name="age" /></div>
<div style="margin-top: 20px;">
<input type="button" onclick="loadInfo2()" value="Ajax获取信息2"><br/>
<table id="studentTable" align="center" border="1px;" cellpadding="0px;">
<tr>
<th>姓名</th><th>年龄</th><th>得分</th>
</tr>
</table>
</div>
</div>
</body>
</html>
package com.wp.servlet 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 net.sf.json.JSONArray;
import net.sf.json.JSONObject; public class GetAjaxInfoServlet extends HttpServlet { /**
*
*/
private static final long serialVersionUID = 1L; @Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
} @Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String action = request.getParameter("action");
if ("jsonObject".equals(action)) {
this.getJsonObject(request, response);
} else if ("jsonArray".equals(action)) {
this.getJsonArray(request, response);
} else if ("jsonNested".equals(action)) {
this.getJsonNested(request, response);
} } /**
* json对象
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
private void getJsonObject(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
// String resultJson="{\"name\":\"张三\",\"age\":22}";//斜杠在这里是转义
JSONObject resultJson = new JSONObject();
resultJson.put("name", "张三");
resultJson.put("age", 22);
out.println(resultJson);
out.flush();
out.close();
} /**
* 简单的json数组
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
private void getJsonArray(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
JSONObject resultJson = new JSONObject();
JSONArray jsonArray = new JSONArray();
JSONObject jsonObject1 = new JSONObject();
jsonObject1.put("name", "张三");
jsonObject1.put("age", 22);
JSONObject jsonObject2 = new JSONObject();
jsonObject2.put("name", "李四");
jsonObject2.put("age", 23);
JSONObject jsonObject3 = new JSONObject();
jsonObject3.put("name", "王五");
jsonObject3.put("age", 24);
jsonArray.add(jsonObject1);
jsonArray.add(jsonObject2);
jsonArray.add(jsonObject3); resultJson.put("students", jsonArray);
out.println(resultJson);
out.flush();
out.close();
} /**
* 多重json嵌套
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
private void getJsonNested(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter(); JSONObject resultJson = new JSONObject();// 创建最后结果的json JSONArray jsonArray = new JSONArray();// json数组
JSONObject jsonObject1 = new JSONObject();// json对象
jsonObject1.put("name", "张三");
jsonObject1.put("age", 22); JSONObject scoreObject1 = new JSONObject();
scoreObject1.put("chinese", 90);
scoreObject1.put("math", 100);
scoreObject1.put("english", 80);
jsonObject1.put("score", scoreObject1); JSONObject jsonObject2 = new JSONObject();
jsonObject2.put("name", "李四");
jsonObject2.put("age", 23); JSONObject scoreObject2 = new JSONObject();
scoreObject2.put("chinese", 70);
scoreObject2.put("math", 90);
scoreObject2.put("english", 90);
jsonObject2.put("score", scoreObject2); JSONObject jsonObject3 = new JSONObject();
jsonObject3.put("name", "王五");
jsonObject3.put("age", 24); JSONObject scoreObject3 = new JSONObject();
scoreObject3.put("chinese", 80);
scoreObject3.put("math", 60);
scoreObject3.put("english", 90);
jsonObject3.put("score", scoreObject3);
// {"score":{"chinese":80,"math":60,"english":90}}
jsonArray.add(jsonObject1);
jsonArray.add(jsonObject2);
jsonArray.add(jsonObject3);
// {"name":"王五","age":24,"score":{"chinese":80,"math":60,"english":90}}
resultJson.put("students", jsonArray);// "students":[数组]
// {"student":[{"name":"王五","age":24,"score":{"chinese":80,"math":60,"english":90}}]}
out.println(resultJson);
out.flush();
out.close();
}
}
ajax通过XMLHttpRequest的open和send方法进行请求，servlet端就是一个服务器端在接收请求后，通过response.getWriter()得到输出字符流，然后在html页面上通过XMLHttpRequest的responseText来得到响应的信息。
Java小生店铺：
Pc端：http://shop125970977.taobao.com/index.htm
手机端：搜索 java小生店铺
希望店铺的资料能帮助到你！！！
Ajax结合Json进行交互数据(四)的更多相关文章
- Ajax获取 Json文件提取数据
摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":&q ...
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
- 通过Ajax post Json类型的数据到Controller
View function postSimpleData() { $.ajax({ type: "POST", url: "/Service/SimpleData&quo ...
- jquery ajax提交json格式的数据，后台接收并显示各个属性
我的表单如下: <form onsubmit="return false"> <ul> <li><span>用户名</span ...
- ajax请求json中的数据
在这里不多说,直接可以运行代码看效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 如何使用ajax将json传入后台数据
首先采用jquery内部封装好的方法是比较简单的,我们只需做的就是修改里面的一些配置: 对$.ajax()的解析: $.ajax({ type: "POST", //提交方式 co ...
- AJAX获取JSON形式的数据
test.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 把数据转化为JSON格式用ajax进行前后端交互
接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...
- Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、 自定义分页器
MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...
随机推荐
- 学习 Spring (八) 注解之 Bean 的定义及作用域
Spring入门篇 学习笔记 Classpath 扫描与组件管理 从 Spring 3.0 开始,Spring JavaConfig 项目提供了很多特性,包括使用 java 而不是 XML 定义 be ...
- iOS后台运行播放无声音频 测试可行
如果打回来了,就自认倒霉吧 制作无声音频. @interface AppDelegate () { NSInteger count; } @property(strong, nonatomic)NST ...
- Nginx http keepalive针对客户端行为指令
keepalive 描述 多个http请求可以复用Tcp链接 减少握手次数 通过减少并发连接数减少服务器资源消耗 降低Tcp拥塞控制影响 Syntax: keepalive_disable none ...
- 自己实现strchr函数与strstr函数
char* my_strchr(char* str, int i) { if (NULL == str) { return NULL; } while ('\0' != *str && ...
- kubernetes 安装手册（成功版）
管理组件采用staticPod或者daemonSet形式跑的,宿主机os能跑docker应该本篇教程能大多适用安装完成仅供学习和实验 本次安裝的版本: Kubernetes v1.10.0 (1.10 ...
- POJ 2299 -Ultra-QuickSort-树状数组求逆序数
POJ 2299Ultra-QuickSort 使用树状数组记录逆序对数. 把数组按照大小顺序插入,getsum(i)就是i前面的比他大的数. #include <cstdio> #inc ...
- Elasticsearch 5.x 字段折叠的使用
在Elasticsearch 5.x 之前,如果实现一个数据折叠的功能是非常复杂的,随着5.X的更新,这一问题变得简单,找到了一遍技术文章,对这个问题描述的非常清楚,收藏下. 参考:https:// ...
- Android studio preview界面无法预览，报错render problem
1.查看报错信息,如果有报错,该叹号应为红色,点击查看报错,显示为render problem 2.打开res/styles.xml修改为如图,添加Base. 3.再打开preview界面
- WCF 改成 restful api
1. 右健 svc , view markup, 添加 Factory="System.ServiceModel.Activation.WebServiceHostFactory" ...
- [FJOI2015]火星商店问题(分治+可持久化)
题目描述 火星上的一条商业街里按照商店的编号1,2 ,…,n ,依次排列着n个商店.商店里出售的琳琅满目的商品中,每种商品都用一个非负整数val来标价.每个商店每天都有可能进一些新商品,其标价可能与已 ...