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:视图 ...
随机推荐
- endnote插入文献时出现{，#}这样的乱码
1)在每次插入文献后,再点击一下Bibliography里面的Update Citation and Bibliography即可: (2)较好的解决方法也较为简单,只需要再一次进入Word中的End ...
- 云服务器ECS
云服务器Elastic Compute Service(ECS)是阿里云提供的一种基础云计算服务.使用云服务器ECS就像使用水.电.煤气等资源一样便捷.高效.您无需提前采购硬件设备,而是根据业务需要, ...
- scrapy爬取知乎问答
登陆 参考 https://github.com/zkqiang/Zhihu-Login # -*- coding: utf-8 -*- import scrapy import time impor ...
- Mining Station on the Sea HDU - 2448（费用流 || 最短路 && hc）
Mining Station on the Sea Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...
- ubuntu 16.04 主题美化及终端美化
如果你使用的是图形界面,你会发现ubuntu默认的界面真是丑的一批,所以简单美化一下: 1.安装unity-tweak-tool: sudo apt-get install unity-tweak-t ...
- python3 字符串str
字符串使用单引号或双引号表示: 是不可变的,当一个字符串被创建后,它始终不会被改变: 可以被迭代,也可以被切片: +拼接字符串,*重复输出字符串: 格式符%s,%d,%f u'字符串:Unicode格 ...
- 【Nowcoder71E】组一组（差分约束，最短路）
[Nowcoder71E]组一组(差分约束,最短路) 题面 Nowcoder 题解 看到二进制显然就直接拆位,那么区间的按位或和按位与转成前缀和之后,可以写成两个前缀和的值的差的大小关系,那么直接差分 ...
- su命令详解
-----------------------------------------------------------------su 权限设置[root@localhost ~]# vim /etc ...
- luogu4728 双递增序列 (dp)
设f[i][j]表示以i位置为第一个序列的结尾,第一个序列的长度为j,第二个序列的结尾的最小值 那么对于f[i][j],有转移$f[i+1][j+1]=min\{f[i+1][j+1],f[i][j] ...
- 洛谷P4553 80人环游世界
题目描述 https://www.luogu.org/problemnew/show/P4553 题解 思路比较显然,把图建出来,一个国家拆成两个点,中间设置上下界,然后跑费用流. 我把源那边的流量也 ...