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:视图 ...
随机推荐
- react为按钮绑定点击事件和修改属性值
注意点:1.事件名称由react提供,所以事件名首字母大写.比如onClick,onMouseOver. 2.为事件提供的处理函数,格式必须是onClick={function},没有小括号. 3.绑 ...
- 配置 Django
Django项目的设置文件位于项目同名目录下,名叫settings.py.这个模块,集合了整个项目方方面面的设置属性,是项目启动和提供服务的根本保证. 一.简述 settings.py文件本质上是一个 ...
- Qt 获取屏幕信息
void GetScreenInfo() { QDesktopWidget* desktopWidget = QApplication::desktop(); //获取可用桌面大小 QRect des ...
- .net core Include问题
本文章为原创文章,转载请注明出处 当时不知道为什么这样写,可能是突然间脑子停止了转动,既然犯过这样的错误,就记录下来吧 错误示例 ).Include(a=>a.User).Select(a =& ...
- codeforces1093G Multidimensional Queries 【线段树】
题目分析: 搜索2^k种情况,线段树分别处理就行了,正确性明显. 代码: #include<bits/stdc++.h> using namespace std; ; int n,k; ] ...
- Appium环境的安装以及一路上的坑
Appium环境的安装以及一路上的坑 第一步环境的安装 l javaJDK的安装以及环境变量的配置这个我就不说了网上的教程全都是,搜一个安装一下吧 l AndroidSDK的安装也是如此我是直接安 ...
- robotframework用例标签的使用
*** Settings ***Force Tags req-42Default Tags owner-john smoke *** Variables ***${HOST} 10.0.1.42 ** ...
- 【XSY1596】旅行 期望DP
题目大意 有\(m\)个游客, 他们都依次访问城市\(1,2,3,\ldots,n\), 第\(i\)个游客到达任意一个城市后有\(p_i\)的概率会停下, 不再继续前行 设\(c_i\)个乘客经过了 ...
- composer 重装常见错误
install composer error: ------------------------------------ The PHP exe file you specified did not ...
- rt-thread之串口设备的配置流程
@2019-01-30 [小记] > rt-thread 工程启动之后先是进入函数 rtthread_startup 做一些系统运行前的基础工作,主要有: * 板级硬件初始化 * 系统定时器初始 ...