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:视图 ...
随机推荐
- Js返回上一页，刷新页面，定时刷新，改变地址栏 等常用实用技巧
1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forw ...
- source 和 .
Linux Source命令及脚本的执行方式解析 当我修改了/etc/profile文件,我想让它立刻生效,而不用重新登录:这时就想到用source命令,如:source /etc/profile 对 ...
- codeforces659C
Tanya and Toys CodeForces - 659C In Berland recently a new collection of toys went on sale. This col ...
- C++：如何正确的定义一个接口类
C++中如何定义接口类?首先给接口类下了定义:接口类应该是只提供方法声明,而自身不提供方法定义的抽象类.接口类自身不能实例化,接口类的方法定义/实现只能由接口类的子类来完成. 而对于C++,其接口类一 ...
- 自己实现strchr函数与strstr函数
char* my_strchr(char* str, int i) { if (NULL == str) { return NULL; } while ('\0' != *str && ...
- ceph 重启，停止，开始
systemctl restart ceph-mon@mon-node3 systemctl stop ceph-mon@mon-node3 systemctl start ceph-mon@mon- ...
- ☆ [HDU2089] 不要62「数位DP」
类型:数位DP 传送门:>Here< 题意:问区间$[n,m]$的数字中,不含4以及62的数字总数 解题思路 数位DP入门题 先考虑一般的暴力做法,整个区间扫一遍,判断每个数是否合法并累计 ...
- JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...
- NOIP2018 差点退役记
Day 1 不想说了,反正就是三个水题,直接来讲Day 2. Day 2 一上来,T1做法写的丑了点,折腾了一会,大概50min的样子写完了. T3一眼DDP--这玩意儿我就写过一个模板,还只写过一次 ...
- Rainbond v5.1.2发布，微服务架构应用便捷管理和交付
Rainbond v5.1.2发布,微服务架构应用便捷管理和交付 Rainbond是开源的企业应用云操作系统,支撑企业应用的开发.架构.交付和运维的全流程,通过无侵入架构,无缝衔接各类企业应用,底层资 ...