Ajax&Json实例

最新推荐文章于 2022-04-29 08:49:00 发布
原创 最新推荐文章于 2022-04-29 08:49:00 发布 · 500 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一个使用Ajax从服务器获取JSON数据的示例，并展示了如何解析这些数据以更新网页内容。示例包括获取单一对象及数组数据的方法。
GetAjaxInfoServlet.java
<%@ 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">
	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+")");
				alert(dataObj.name);
				alert(dataObj.age);
				document.getElementById("name").value=dataObj.name;
				document.getElementById("age").value=dataObj.age;
			}
		};
		xmlHttp.open("get", "getAjaxInfo?action=jsonObject", true);
		
	    xmlHttp.send();
	}
	
	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>

普通 数组 嵌套共用一个Servlet

<?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>AjaxJsonchap01</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>
  <servlet-name>getAjaxInfoServlet</servlet-name>
  <servlet-class>com.ruanku.web.GetAjaxInfoServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>getAjaxInfoServlet</servlet-name>
  	<url-pattern>/getAjaxInfo</url-pattern>
  </servlet-mapping>
</web-app>

配置文件

Ajax.jsp

<%@ 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">
	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+")");
				alert(dataObj.name);
				alert(dataObj.age);
				document.getElementById("name").value=dataObj.name;
				document.getElementById("age").value=dataObj.age;
			}
		};
		xmlHttp.open("get", "getAjaxInfo?action=jsonObject", true);
		
	    xmlHttp.send();
	}
	
	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>

要好好理解！！！！！
AJAX了解
zhazhali_fenqi的博客
09-04 198
1.简介 AJAX = Asynchronous JavaScript And XML. AJAX 并非编程语言。 AJAX 仅仅组合了： 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据） JavaScript 和 HTML DOM（显示或使用数据） Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。 作用： Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网
Java项目：springboot药品管理系统
m0_74967853的博客
12-25 1940
本项目属于前后端分离的项目，分为两个角色药品管理员和取药处人员药品管理员：登录、退出、药品信息录入、药厂信息录入、采购员信息录入、药品信息浏览、药厂信息浏览、采购人员信息浏览、药品信息查询入库修改删除、药厂信息入库修改删除、采购员信息入库修改删除、入库记录浏览、出库记录浏览、系统帮助取药处人员：登录、退出、药品信息浏览、药厂信息浏览、采购员信息浏览、药品信息查询出库、出库记录浏览、系统帮助。
Java项目:药品管理系统(java+SpringBoot+html+layui+bootstrap+echarts+mysql)
常年被追砍的博客
04-29 1219
源码获取：博客首页 "资源" 里下载！ 项目介绍 本项目属于前后端分离的项目，分为两个角色药品管理员和取药处人员 药品管理员： 登录、退出、药品信息录入、药厂信息录入、采购员信息录入、药品信息浏览、药厂信息浏览、采购人员信息浏览、药品信息查询入库修改删除、药厂信息入库修改删除、采购员信息入库修改删除、入库记录浏览、出库记录浏览、系统帮助 取药处人员： 登录、退出、药品信息浏览、药厂信息浏览、采购员信息浏览、药品信息查询出库、出库记录浏览、系统帮助 环境需要 1.运行环境：最好是java jdk.
response笔记content-disposition等
enthan809882的博客
01-01 1048
@Data public class AjaxInfo { public AjaxInfo() {} { this.code = 0;//默认成功 this.msg = "操作成功";//默认请求成功信息 } private Integer code; private String msg; private Ob...
ajax异步详解同步请求,ajax async异步请求和同步请求
weixin_42520656的博客
08-06 846
ajax async异步请求和同步请求ajax是指异步加载。这个异步是相对于页面来说的，页面不刷新就加载服务器数据。ajax中的请求又分为同步请求和异步请求，这里是相对于进程来说的，ajax异步请求，发送请求了不用等服务器响应，页面其他的地方还能点，其他的函数也能执行。可是我们有时候也需要使用ajax同步请求，要求服务器没响应前，页面其他函数不能执行。下面分别来看如何实现。异步Async=true...
Ajax-服务器响应数据详解
m0_37510446的博客
05-09 781
前面主要讲了ajax的一些请求，这篇来讲讲ajax向服务器端请求到的响应数据： 主要有两种 responseText :使用情况，若服务器响应的数据是字符串形式就使用该属性 responseXML:使用情况，看名字就可以知道，当服务器响应的数据是XML的形式的时候，使用该属性 简单写两个例子，顺便再熟悉一下ajax工作流程 <!DOCTYPE　html> <html> &l...
XMLHttpRequest
那年秋季有点冷的专栏
08-02 1074
XMLHttpRequest 对象用于和服务器交换数据。 向服务器发送请求 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法： xmlhttp.open("GET","test1.txt",true);
原创：ajax中get与post请求的详解
redarmychen的专栏
03-29 2621
<br />      学习ajax技术的时候,很多同学对于ajax中get与post请求总是疑问不解,为了给学员解决疑问,现将授课中对get与post的请求的总结发表于学生大本营中,希望能给你带来帮助.  <br />      在ajax入门详解中我也简单的介绍了它们之间的使用区别,为了使学员能够彻底的明白,现将如授课中的总结发表如下。<br /> <br />一、get()和post()基本区别<br />1.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对
原创：Ajax中get与post请求详解
redarmychen的专栏
03-29 6836
        学习ajax技术的时候,很多同学对于ajax中get与post请求总是疑问不解,为了给学员解决疑问,现将授课中对get与post的请求的总结发表于学生大本营中,希望能给你带来帮助.  一、get()和post()基本区别1.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制
Jquery<6>Jquery Ajax
wicycc的专栏
12-27 585
JqueryAjax  简介 Jquery 对 Ajax 操作封装了一套跨浏览器，方便用户使用的 Api JqueryAjax Load  方法 远程请求，把请求的数据载入到 DOM 里； load( url , [,data] , [,callback]) Url：请求地址 Data:请求参数 Callback:请求完成后的回调方法 jqueryAja
Ajax&Json交互实例
wicycc的专栏
12-17 579
共用的Servlet GetAjaxInfoServlet.java package com.ruanku.web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; imp
EL表达式
wicycc的专栏
11-28 577
表达式语言（Expression Language，EL） 百度百科：el 表达式 EL  表达式内置对象              表达式内置对象         说明 1          pageContext               表示 javax.servlet.jsp.PageContext  对象 2          pageScope
jsp的九大内置对象和四大作用域<1>
wicycc的专栏
11-12 545
page只能在页面内传递,设置page范围的数据 key->value    pageConte
javaBean组件<1>
wicycc的专栏
11-13 542
JavaBean 是使用 Java 语言开发的一个可重用的组件，在 JSP 开发中可以使用 JavaBean 减少重复代码，使整个 JSP 代码的开发更简洁。 jsp:useBean  创建 javabean
JavaScript高级<3>
wicycc的专栏
12-12 515
JavaScript  自定义对象 创建对象方式：方式一，对象初始化器方式； 方式二，构造函数方式； var cc = { name : "cc", age : 22, shout : function() { alert("我是：" + this.name + "今年" + this.age + "岁了！"); }, action : f
jsp的九大内置对象和四大作用域<2>
wicycc的专栏
11-12 503
需要常用的五个内置对象 1.responc
Servlet<4>
wicycc的专栏
11-25 487
下午弄了一下午这个登录 蛋疼的要死= =不过最好还是成功了 = = 用的是mysql的
Jquery<2> Jquery选择器
wicycc的专栏
12-18 466
Jquery选择器介绍 我们可以通过Jquery选择器能从网页文档中找到我们需要的DOM节点； 基本选择器 属性选择器 其他选择器 Insert title here $(document).ready(function(){ //基本选择器 //$("#a1").css("background-color","yellow");//根据id //$(".c1"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值