AJAX基础学习4之JSON

最新推荐文章于 2024-09-03 15:34:00 发布
最新推荐文章于 2024-09-03 15:34:00 发布
阅读量358 收藏
点赞数
分类专栏： 前端技术 文章标签： ajax json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhu7478848/article/details/38270297
版权

1、解析JSON

  • JSON只是一种文本字符串。它被存储在responseText属性中
  • 为了读取存储在responseText属性中的JSON数据，需要根据JavaScript的eval语句。函数eval会把一个字符串当做他的参数。然后这个字符串会被当做JavaScript代码来执行。因为JSON的字符串就是有JavaScript代码构成的。所以它本身是可执行的
  • 具体代码：

JSP

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript" src="./js/ajaxutil.js"></script>
    <title>My JSP 'index.jsp' starting page</title>
	
  </head>
  
  <body>
    <form action="" enctype="application/x-www-form-urlencoded">
    	<input type="button" value="提交" name="ok" id="ok"/>
    </form>
    	
   
  </body>
</html>

web.xml 

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>AccessServlet</servlet-name>
    <servlet-class>com.servlet.AccessServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>AccessServlet</servlet-name>
    <url-pattern>/accessServlet</url-pattern>
  </servlet-mapping>	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

AccessServlet.java 

package com.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;

public class AccessServlet extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
//		request.setCharacterEncoding("UTF-8");
//		response.setContentType("html/text,charset=UTF-8");
//		PrintWriter out = response.getWriter();
//		
//		System.out.println("****************************");
//		System.out.println("a:"+request.getParameter("a"));
//		System.out.println("b:"+request.getParameter("b"));
//		System.out.println("c:"+request.getParameter("c"));
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8");
		response.setContentType("html/text,charset=UTF-8");
		PrintWriter out = response.getWriter();
		
//		System.out.println("**post***********************");
//		System.out.println("a:"+request.getParameter("a"));
//		System.out.println("b:"+request.getParameter("b"));
//		System.out.println("c:"+request.getParameter("c"));
		System.out.println("*******1************");
		String str = "{pid:10,pname:'zhutianpeng'}";
		out.println(str);
		System.out.println("***********2*********");
	}

}

ajaxutil.js 

/**
 * 创建XMLHttpRequest对象
 * @returns
 */

function ajaxFunction(){
	var httpRequest;
	try{
		//Firefox,Opera 8.0+ ,Safari
		httpRequest = new XMLHttpRequest();
	}catch(e){
		try{
			//Internet Explorer
			httpRequest = new ActionXObject("Msxm12.XMLHTTP");
		}catch(e){
			try{
				httpRequest = new ActionXObject("Microsoft.XMLHTTP");
			}catch(e){}
		}
	}
	return httpRequest;
}


window.onload = function(){
	//<input type="button" name="ok" id="ok" value="测试服务器连接">
	
	/**
	 * GET方法
	 */
//	document.getElementById("ok").οnclick=function(){
//		
//		//1.获取XMLHttpRequest对象
//		var xmlRequest = ajaxFunction();
//		
//		xmlRequest.onreadystatechange=function(){
//			if(xmlRequest.readyState==4){
//				if(xmlRequest.status==200||xmlRequest.statue==304){
//					//接收服务器返回的数据
//					var date = xmlRequest.responseText;
//					
//				}
//			}
//		}
//		//2.打开连接
//		xmlRequest.open("get","./accessServlet?timeStamp="+new Date().getTime()+"&a=9",true);
//		//3.发送数据
//		xmlRequest.send(null);
//		//4.接收数据
//		
//	}
	/**
	 * POST方法
	 */
	document.getElementById("ok").οnclick=function(){
		
		//1.获取XMLHttpRequest对象
		var xmlRequest = ajaxFunction();
		
		xmlRequest.onreadystatechange=function(){
			if(xmlRequest.readyState==4){
				if(xmlRequest.status==200||xmlRequest.statue==304){
					//接收服务器返回的数据
					var data = xmlRequest.responseText;
					var dataObj = eval("("+data+")");
					alert("pid:"+dataObj.pid+"   pname:"+dataObj.pname);
					
				}
			}
		}
		//2.打开连接
//		xmlRequest.open("post","./accessServlet?timeStamp="+new Date().getTime()+"&a=9",true);
//		xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//		//3.发送数据
//		xmlRequest.send("b= 00&c=9");
//		//4.接收数据
		
		xmlRequest.open("post","./accessServlet?timeStamp="+new Date().getTime(),true);
		xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//3.发送数据
		xmlRequest.send(null);
		//4.接收数据
	}
	
}

运行结果：

注：

   ①使用eval函数将传过来的JSON数据转换成对象，之后再根据转换成的对象属性获取值

   ②在自己写的JSON字符串是注意格式不要写错。在字符转值使用' ' 隔开，以免将字符串与属性混，造成浏览器无法解析

2、获取多个JSON对象

JSP

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript" src="./js/ajaxutil.js"></script>
    <title>My JSP 'index.jsp' starting page</title>
	
  </head>
  
  <body>
    <form action="" enctype="application/x-www-form-urlencoded">
    	<input type="button" value="提交" name="ok" id="ok"/>
    </form>
    	
   
  </body>
</html>

AccessServlet.java 

package com.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;

public class AccessServlet extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
//		request.setCharacterEncoding("UTF-8");
//		response.setContentType("html/text,charset=UTF-8");
//		PrintWriter out = response.getWriter();
//		
//		System.out.println("****************************");
//		System.out.println("a:"+request.getParameter("a"));
//		System.out.println("b:"+request.getParameter("b"));
//		System.out.println("c:"+request.getParameter("c"));
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8");
		response.setContentType("html/text,charset=UTF-8");
		PrintWriter out = response.getWriter();
		
//		System.out.println("**post***********************");
//		System.out.println("a:"+request.getParameter("a"));
//		System.out.println("b:"+request.getParameter("b"));
//		System.out.println("c:"+request.getParameter("c"));
		System.out.println("*******1************");
		String str = "[{pid:10,pname:'zhutianpeng'},{pid:11,pname:'zhutianpeng1'},{pid:12,pname:'zhutianpeng2'}]";
		out.println(str);
		System.out.println("***********2*********");
	}

}

ajaxutil.js 

/**
 * 创建XMLHttpRequest对象
 * @returns
 */

function ajaxFunction(){
	var httpRequest;
	try{
		//Firefox,Opera 8.0+ ,Safari
		httpRequest = new XMLHttpRequest();
	}catch(e){
		try{
			//Internet Explorer
			httpRequest = new ActionXObject("Msxm12.XMLHTTP");
		}catch(e){
			try{
				httpRequest = new ActionXObject("Microsoft.XMLHTTP");
			}catch(e){}
		}
	}
	return httpRequest;
}


window.onload = function(){
	//<input type="button" name="ok" id="ok" value="测试服务器连接">
	
	/**
	 * GET方法
	 */
//	document.getElementById("ok").οnclick=function(){
//		
//		//1.获取XMLHttpRequest对象
//		var xmlRequest = ajaxFunction();
//		
//		xmlRequest.onreadystatechange=function(){
//			if(xmlRequest.readyState==4){
//				if(xmlRequest.status==200||xmlRequest.statue==304){
//					//接收服务器返回的数据
//					var date = xmlRequest.responseText;
//					
//				}
//			}
//		}
//		//2.打开连接
//		xmlRequest.open("get","./accessServlet?timeStamp="+new Date().getTime()+"&a=9",true);
//		//3.发送数据
//		xmlRequest.send(null);
//		//4.接收数据
//		
//	}
	/**
	 * POST方法
	 */
	document.getElementById("ok").οnclick=function(){
		
		//1.获取XMLHttpRequest对象
		var xmlRequest = ajaxFunction();
		
		xmlRequest.onreadystatechange=function(){
			if(xmlRequest.readyState==4){
				if(xmlRequest.status==200||xmlRequest.statue==304){
					//接收服务器返回的数据
					var data = xmlRequest.responseText;
					var dataObj = eval("("+data+")");
//					alert("pid:"+dataObj.pid+"   pname:"+dataObj.pname);
					for(var i=0;i<dataObj.length;i++){
						alert("pid:"+dataObj[i].pid+"   pname:"+dataObj[i].pname);
					}
				}
			}
		}
		//2.打开连接
//		xmlRequest.open("post","./accessServlet?timeStamp="+new Date().getTime()+"&a=9",true);
//		xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//		//3.发送数据
//		xmlRequest.send("b= 00&c=9");
//		//4.接收数据
		
		xmlRequest.open("post","./accessServlet?timeStamp="+new Date().getTime(),true);
		xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//3.发送数据
		xmlRequest.send(null);
		//4.接收数据
	}
	
}
运行结果：

注：

   获取多个对象时在用数组方式进行获取

3、


拥有必珍惜
关注
专栏目录
Python学习之JSON模块基础知识
mrdeam的博客
05-04 1052
JSON是一种轻量级的数据格式，易于阅读和编写，同时也易于机器解析和生成。它基于键值对的方式组织数据，支持嵌套结构，包括对象和数组。Python的json模块提供了处理JSON数据的工具，包括序列化（将Python对象转换为JSON字符串）和反序列化（将JSON字符串转换为Python对象）功能。JSON模块不仅仅局限于基本的数据类型序列化，还支持用户自定义类的序列化与反序列化。通过default和参数，我们可以实现更高级的应用。考虑以下场景，有一个自定义的Person# 创建一个Person实例。
Ajax基础，xhr和JSON格式
weixin_46273011的博客
04-07 3120
Ajax请求的步骤 1，实例化，2，对请求进行监听，3，准备请求，4，发送请求。 请求的返回，是请求监听处的代码返回的。 <!-- 没有ajax，科研同XMLHttpRequest构造函数实例化来创建 --> <script> //要连接的后端地址 const url = 'https://www.imooc.com/api/http/search/suggest?words=js'; // Ajax的使用步骤
AJAX基础操作&JSON基础学习
感谢关注
01-05 661
AJAX基础操作&JSON基础学习
JSON和Ajax
最新发布
bear_309的博客
09-03 989
JSON和Ajax介绍
JavaWeb学习之Ajax、JSON08
hhhhhh的博客
12-24 1222
目录​​​​​​​1.概念2.JQeury实现方式Ajax方式2.JSON1.概念2.语法1.基本规则2.获取数据1.JS0N转为]ava对象2.Java对象转换JS0N异步的]avaScript和XML 1.异步和同步：客户端和服务器端相互通信的基础上 *客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 *客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。1.$.ajax（）通用方式 语法：$.ajax({键值对)； //使用$，ajax（）发送异步请求
全栈学习之ajax基础学习
星光不问赶路人的博客
01-28 1823
由于我用普通的maven项目没法运行样例123，于是就改用了springboot + thymeleafAjax什么是Ajax伪造一个Ajax maven实现jQuery实现的Ajax样例一 、实现失去焦点触发事件 (spring boot + thymeleaf)样例二、显示table数据 (spring boot + thymeleaf)样例三、动态验证用户名密码 (spring boot + thymeleaf) Ajax 什么是Ajax Ajax即Asynchronous Javascript An
Javaweb之AJAX axios JSON
lpblog的博客
03-12 608
AJAX我们先来说概念中的JavaScript和XMLJavaScript表明该技术和前端相关；XML是指以此进行数据交换。而这两个我们之前都学习过。
Ajax与Json的简单学习(入门)
weixin_42947972的博客
04-05 763
AJAX: 1. 概念: ASynchronnous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步: 客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应.在等待的期间客户端不能做其它操作 * 客户端不需要去等待服务器的响应,在服务器处理请求 的过程中,客户端可以进行其它的操作 通过在后台与服务器进行少量数据交换，...
JavaWeb：Ajax和JSON
2401_85111562的博客
06-25 1059
其实关于Kafka，能问的问题实在是太多了，扒了几天，最终筛选出44问：基础篇17问、进阶篇15问、高级篇12问，个个直戳痛点，不知道如果你不着急看答案，又能答出几个呢？若是对Kafka的知识还回忆不起来，不妨先看我手绘的知识总结脑图（xmind不能上传，文章里用的是图片版）进行整体架构的梳理梳理了知识，刷完了面试，如若你还想进一步的深入学习解读kafka以及源码，那么接下来的这份《手写“kafka”》将会是个不错的选择。Kafka入门为什么选择KafkaKafka的安装、管理和配置。
JSON&Ajax入门学习
Cubezc的博客
04-06 614
JSON JSON介绍 JSON全名：JavaScript Object Notation JS对象表示，是一种轻量级的数剧交换格式，它基于ECMAScript的一个子集，采用完全独立于变成语言的文本格式来存储和表示数据。 JSON语法 []表示数组，{}表示对象，""表示是属性名或字符串类型的值，: 表示属性和值之间的分割符，，表示多个属性的间隔符或者是多个元素的间隔符。Json的数据类型与js...
Ajax&Json基础学习和redis基础学习.zip
07-09
通过阅读压缩包中的学习笔记和练习源码，你可以深入理解Ajax的异步通信机制、JSON的数据交换格式以及Redis的数据存储和操作。同时，参考配套博客中的内容，可以更全面地掌握这三个技术的使用场景和最佳实践。在实践...
JSON+js+jquery+ajax基础.zip
07-05
在"JSON+js+jquery+ajax基础.zip"这个压缩包中，可能包含的教程或示例将涵盖以下几个方面： 1. JSON基础知识：介绍JSON的语法结构，如对象和数组的表示，以及如何在JavaScript中创建和解析JSON对象。 2. JavaScript...
ajax响应json字符串和json数组的实例(详解)
10-20
通过上述内容的学习，我们可以了解到在使用AJAX技术与服务器进行异步数据交互时，如何处理后台返回的JSON字符串和JSON数组。掌握了这些知识，我们就可以在开发中更加灵活地利用这些技术来构建动态、响应迅速的Web...
Ajax提交表单并接收json实例代码
10-19
通过理解这段代码的工作原理，可以帮助开发者掌握Ajax基础用法，并为开发更加复杂和高效的Web应用打下坚实基础。对于遇到问题的读者，文章最后也提供了留言反馈的途径，以便于及时获取帮助和解答。
JavaScript给日期加一天或者减一天
热门推荐
拥有必珍惜
07-07 2万+
JavaScript日期加减操作
ZTree获取父节点
拥有必珍惜
09-12 1万+
getParentNode 方法是关键，利用这个可以轻松找到第一级。 treeNode当前节点 参考代码如下： var pNode = treeNode.getParentNode(); while(!!pNode) {     pNode = treeNode.getParentNode(); }
node与node-sass版本对应
拥有必珍惜
01-11 6775
Node与Node-Sass版本对应
IE下JavaScript字符串转换成Date后出现NaN错误
拥有必珍惜
11-29 3580
原始字符串 2016-10-11 var  date  = new Date("2016-10-11") 在IE下date是NaN,而其他浏览器正常。 字符串修改成 2016/10/11 var  date  = new Date("2016/10/11")  就正常了。
Vue自定义指令监听el-table的滚动事件，滚动到底部加载更多数据
拥有必珍惜
05-11 2430
Vue自定义指令监听el-table的滚动事件，滚动到底部加载更多数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拥有必珍惜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值