JavaWeb学习|JSON与AJAX

这篇具有很好参考价值的文章主要介绍了JavaWeb学习|JSON与AJAX。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

学习材料声明

所有知识点都来自互联网,进行总结和梳理,侵权必删。
引用来源:尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版

JSON

JSON (JavaScript Object Notation)
是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式,而且很多语言都提供了对
json 的支持(包括 C, C++, C#, Java, JavaScript, Perl, Python等)。 这样就使得 JSON
成为理想的数据交换格式。 json 是一种轻量级的数据交换格式。 轻量级指的是跟 xml 做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式。

1.如何在javaScript中使用

定义

var jsonObj = {
	"key1":12,
	"key2":"abc",
	"key3":true,
	"key4":[11,"arr",false],
	"key5":{
	"key5_1" : 551,
	"key5_2" : "key5_2_value"
	},
	"key6":[{
	"key6_1_1":6611,
	"key6_1_2":"key6_1_2_value"
	},{
	"key6_2_1":6621,
	"key6_2_2":"key6_2_2_value"
	}]
};

使用

alert(typeof(jsonObj));// object json 就是一个对象
alert(jsonObj.key1); //12
alert(jsonObj.key2); // abc
alert(jsonObj.key3); // true
alert(jsonObj.key4);// 得到数组[11,"arr",false]
// json 中 数组值的遍历
for(var i = 0; i < jsonObj.key4.length; i++) {
alert(jsonObj.key4[i]);
}
alert(jsonObj.key5.key5_1);//551
alert(jsonObj.key5.key5_2);//key5_2_value
alert( jsonObj.key6 );// 得到 json 数组
// 取出来每一个元素都是 json 对象
var jsonItem = jsonObj.key6[0];
// alert( jsonItem.key6_1_1 ); //6611
alert( jsonItem.key6_1_2 );

json 的存在有两种形式。
一种是:对象的形式存在,我们叫它 json 对象。
一种是:字符串的形式存在,我们叫它 json 字符串。
一般我们要操作 json 中的数据的时候,需要 json 对象的格式。
一般我们要在客户端和服务器之间进行数据交换的时候,使用 json 字符串。
JSON.stringify() 把 json 对象转换成为 json 字符串
JSON.parse() 把 json 字符串转换成为 json 对象

常用方法

// 把 json 对象转换成为 json 字符串
var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java 中对象的 toString
alert(jsonObjString)
// 把 json 字符串。转换成为 json 对象
var jsonObj2 = JSON.parse(jsonObjString);
alert(jsonObj2.key1);// 12
alert(jsonObj2.key2);// abc

2.如何在java中使用:JavaBean的转换。这里涉及了List和Map

to和from
这里导入的包是谷歌的GSON
javaBean和json的互换

@Test
public void test1(){
	Person person = new Person(1,"国哥好帅!");
	// 创建 Gson 对象实例
	Gson gson = new Gson();
	// toJson 方法可以把 java 对象转换成为 json 字符串
	String personJsonString = gson.toJson(person);
	System.out.println(personJsonString);
	// fromJson 把 json 字符串转换回 Java 对象
	// 第一个参数是 json 字符串
	// 第二个参数是转换回去的 Java 对象类型
	Person person1 = gson.fromJson(personJsonString, Person.class);
	System.out.println(person1);
}

List和json的互换

// 1.2.2、List 和 json 的互转
@Test
public void test2() {
	List<Person> personList = new ArrayList<>();
	personList.add(new Person(1, "国哥"));
	personList.add(new Person(2, "康师傅"));
	Gson gson = new Gson();
	// 把 List 转换为 json 字符串
	String personListJsonString = gson.toJson(personList);
	System.out.println(personListJsonString);
	List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
	System.out.println(list);
	Person person = list.get(0);
	System.out.println(person);
}

这里需要自己创建一个PersonListType类。或者干脆使用内部类。

public class PersonListType extends TypeToken<List<Person>> {
}

Map和json的互换

/ 1.2.3、map 和 json 的互转
@Test
public void test3(){
	Map<Integer,Person> personMap = new HashMap<>();
	personMap.put(1, new Person(1, "国哥好帅"));
	personMap.put(2, new Person(2, "康师傅也好帅"));
	Gson gson = new Gson();
	// 把 map 集合转换成为 json 字符串
	String personMapJsonString = gson.toJson(personMap);
	System.out.println(personMapJsonString);
	// Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new
	PersonMapType().getType());
	Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new
	TypeToken<HashMap<Integer,Person>>(){}.getType());
	System.out.println(personMap2);
	Person p = personMap2.get(1);
	System.out.println(p);
}

AJAX请求

AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
ajax 是一种浏览器通过 js 异步发起请求,局部更新页面的技术。
Ajax 请求的局部更新,浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

这里的异步很重要哦,可以很有效地提高用户体验感。
整个使用分四步咯:

<script type="text/javascript">
	// 在这里使用 javaScript 语言发起 Ajax 请求,访问服务器 AjaxServlet 中 javaScriptAjax
	function ajaxRequest() {
		// 1、我们首先要创建 XMLHttpRequest
		var xmlhttprequest = new XMLHttpRequest();
		// 2、调用 open 方法设置请求参数
		xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
		// 4、在 send 方法前绑定 onreadystatechange 事件,处理请求完成后的操作。
		xmlhttprequest.onreadystatechange = function(){
			if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
				var jsonObj = JSON.parse(xmlhttprequest.responseText);
				// 把响应的数据显示在页面上
				document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " , 姓名:" +
				jsonObj.name;
			}
		}
		// 3、调用 send 方法发送请求
		xmlhttprequest.send();
	}
</script>

1.在jQuery中如何请求

$("#ajaxBtn").click(function(){
	$.ajax({
		url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
		// data:"action=jQueryAjax",
		data:{action:"jQueryAjax"},
		type:"GET",
		success:function (data) {
		// alert("服务器返回的数据是:" + data);
		// var jsonObj = JSON.parse(data);
		$("#msg").html("编号:" + data.id + " , 姓名:" + data.name);
		},
		dataType : "json"
	});
});
// ajax--get 请求
$("#getBtn").click(function(){
	$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
	$("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name);},"json");
});
// ajax--post 请求
$("#postBtn").click(function(){
	$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data){
	$("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);
	},"json");
});
// ajax--getJson 请求
$("#getJSONBtn").click(function(){
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function
	(data) {$("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name);});
});

表单序列化 serialize()
serialize()可以把表单中所有表单项的内容都获取到,并以 name=value&name=value 的形式进行拼接。

在这里插入代码片// ajax 请求
$("#submit").click(function(){
	// 把参数序列化
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" +
	$("#form01").serialize(),function (data) {
	$("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);
	});
});

书城项目中的实践

1.使用 AJAX 验证用户名是否可用

JavaWeb学习|JSON与AJAX,Java技术学习,java

protected void ajaxExistsUsername(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	// 获取请求的参数 username
	String username = req.getParameter("username");
	// 调用 userService.existsUsername();
	boolean existsUsername = userService.existsUsername(username);
	// 把返回的结果封装成为 map 对象
	Map<String,Object> resultMap = new HashMap<>();
	resultMap.put("existsUsername",existsUsername);
	Gson gson = new Gson();
	String json = gson.toJson(resultMap);
	resp.getWriter().write(json);
}
$("#username").blur(function () {
	//1 获取用户名
	var username = this.value;
	$.getJSON("http://localhost:8080/book/userServlet","action=ajaxExistsUsername&username=" + username,function (data{
		if (data.existsUsername) {
			$("span.errorMsg").text("用户名已存在!");
			} else {
			$("span.errorMsg").text("用户名可用!");
		}
	});
});

2.使用 AJAX 修改把商品添加到购物车

完全和第一点是一样的思路。
JavaWeb学习|JSON与AJAX,Java技术学习,java
自己难以完成是如何修改对应的位置。文章来源地址https://www.toymoban.com/news/detail-837011.html

protected void ajaxAddItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException,IOException {
	// 获取请求的参数 商品编号
	int id = WebUtils.parseInt(req.getParameter("id"), 0);
	// 调用 bookService.queryBookById(id):Book 得到图书的信息
	Book book = bookService.queryBookById(id);
	// 把图书信息,转换成为 CartItem 商品项
	CartItem cartItem = new CartItem(book.getId(),book.getName(),1,book.getPrice(),book.getPrice());
	// 调用 Cart.addItem(CartItem);添加商品项
	Cart cart = (Cart) req.getSession().getAttribute("cart");
	if (cart == null) {
		cart = new Cart();
		req.getSession().setAttribute("cart",cart);
	}
	cart.addItem(cartItem);
	System.out.println(cart);
	// 最后一个添加的商品名称
	req.getSession().setAttribute("lastName", cartItem.getName());
	//6、返回购物车总的商品数量和最后一个添加的商品名称
	Map<String,Object> resultMap = new HashMap<String,Object>();
	resultMap.put("totalCount", cart.getTotalCount());
	resultMap.put("lastName",cartItem.getName());
	Gson gson = new Gson();
	String resultMapJsonString = gson.toJson(resultMap);
	resp.getWriter().write(resultMapJsonString);
}
<div style="text-align: center">
	<c:if test="${empty sessionScope.cart.items}">
	<%--购物车为空的输出--%>
		<span id="cartTotalCount"> </span>
		<div>
			<span style="color: red" id="cartLastName">当前购物车为空</span>
		</div>
		</c:if>
		<c:if test="${not empty sessionScope.cart.items}">
		<%--购物车非空的输出--%>
		<span id="cartTotalCount">您的购物车中有 ${sessionScope.cart.totalCount} 件商品</span>
		<div>
		您刚刚将<span style="color: red" id="cartLastName">${sessionScope.lastName}</span>加入到了购
		物车中
		</div>
	</c:if>
</div>
<Script type="text/javascript">
	$(function () {
		// 给加入购物车按钮绑定单击事件
		$("button.addToCart").click(function () {
		/**
		* 在事件响应的 function 函数 中,有一个 this 对象,这个 this 对象,是当前正在响应事件的 dom 对象
		* @type {jQuery}
		*/
		var bookId = $(this).attr("bookId");
		// location.href = "http://localhost:8080/book/cartServlet?action=addItem&id=" + bookId;
		// 发 ajax 请求,添加商品到购物车
			$.getJSON("http://localhost:8080/book/cartServlet","action=ajaxAddItem&id=" +
			bookId,function (data) {
			$("#cartTotalCount").text("您的购物车中有 " + data.totalCount + " 件商品");
			$("#cartLastName").text(data.lastName);
			})
		});
	});
</Script>

到了这里,关于JavaWeb学习|JSON与AJAX的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaWeb-Ajax的学习

    今日目标: 能够使用 axios 发送 ajax 请求 熟悉 json 格式,并能使用 Fastjson 完成 java 对象和 json 串的相互转换 使用 axios + json 完成综合案例 AJAX (Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML , JavaScript 表明该技术和前端相关; XML 是指以

    2024年02月05日
    浏览(39)
  • 【javaweb】学习日记Day3 - Ajax 前后端分离开发 入门

    目录 一、Ajax 1、简介 2、Axios (没懂 暂留) (1)请求方式别名 (2)发送get请求 (3)发送post请求 (4)案例 二、前端工程化 1、Vue项目-目录结构 2、Vue项目-启动 (1)vscode页面启动 (2)cmd命令框启动 3、配置Vue端口号 4、Vue项目开发流程 三、Vue组件库 - Element  1、快速入门

    2024年02月12日
    浏览(37)
  • [Java]JavaWeb学习笔记(动力节点老杜2022)【Javaweb+MVC架构模式完结】

    视频地址:动力节点最新JavaWeb视频教程,javaweb零基础入门到精通IDEA版https://www.bilibili.com/video/BV1Z3411C7NZ?p=1vd_source=93ab990b9131a1b90943874a5448830a 资料链接:https://pan.baidu.com/s/1y-Dm0dGjQQOvARFBmGiG1w?pwd=1234 提取码:1234 【Tomcat服务器版本与支持Java版本的对应关系:https://tomcat.apache.org/whi

    2023年04月09日
    浏览(248)
  • Ajax+JSON学习二

    Ajax+JSON学习二 GET 请求一般用于信息获取,它没有请求主体,而是使用 URL 传递参数(即:传递数据给后台)。 GET 传递参数的方式,分两步: 对所需发送的数据(具有名称和值)执行普通的 URL 编码,即:由一对对 “名称=值” 组成(称为:名/值对),每一对之间用 “” 拼

    2024年02月22日
    浏览(43)
  • 【主流技术】日常工作中关于 JSON 转换的经验大全(Java)

    目录 前言 一、JSON 回顾 1.1结构形式 二、其它类型 - JSON相关 2.1 JavaBean 转 JsonObject 2.2 JavaBean 转 Json 字符串 2.3 List 转 JsonArray 2.4 List 转Json 字符串 2.5Map 转 Json 字符串 三、JSON 相关 - 其它类型 3.1 Json 字符串转 JavaBean 3.2 Json 字符串转 JsonObject 3.3 Json 字符串转 List 3.4Json字符串转M

    2024年03月11日
    浏览(44)
  • JavaWEB学习笔记(二)------HTTP、Servlet、会话、过滤器、监听器、Ajax、前端工程化

    目录 HTTP HTTP1.1 请求和响应的报文格式 请求报文 响应报文 常见状态响应码 Servlet  静态资源和动态资源 ​编辑  Servlet简介  Servlet开发流程 导入和响应头问题 url-pattern不同写法 url-pattern工作方式 Servlet注解方式配置 Servlet生命周期  Servlet继承结构 Servlet接口 GenerisServlet类 Ht

    2024年01月21日
    浏览(43)
  • Java学习day3——Javaweb登录页面设计(1)(含JSP代码)

    本文主要的内容是完成网页登录页面设计,以及判断用户名密码是否正确,如果正确,进入下一页面,并输出sessionID,若错误,则在登录页面给出用户名或密码错误提示,并在登录页面显示访问次数。 登录页面(userLogin.jsp) 用户名输入框 密码输入框 提交内容到登录处理页面

    2023年04月18日
    浏览(84)
  • Spring MVC学习随笔-Ajax集成(JSON格式返回数据)、拦截器(MyInterceptor)、全局异常处理(GlobalExceptionResolver)

    学习视频:【编程不良人】继spring之后快速入门springmvc,面对SpringMVC不用慌 引入相关依赖 开发控制器 日期格式修正 可以正常响应 拦截器 :Interceptor 拦截 中断 类似于javaweb中的Filter,不过没有Filter那么强大 作用 Spring MVC的拦截器是一种用于在请求处理过程中进行预处理和后处

    2024年02月05日
    浏览(52)
  • 怎么学习AJAX相关技术? - 易智编译EaseEditing

    学习AJAX(Asynchronous JavaScript and XML)相关技术可以让你实现网页的异步数据交互,提升用户体验。以下是一些学习AJAX技术的步骤和资源: HTML、CSS和JavaScript基础: 首先,确保你已经掌握了基本的HTML、CSS和JavaScript知识,因为AJAX主要是在JavaScript中实现的。   HTTP和网络通信基础

    2024年02月12日
    浏览(42)
  • 【JavaWeb】11—Axios Ajax

    ⭐⭐⭐⭐⭐⭐ Github主页👉https://github.com/A-BigTree 笔记链接👉https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以,麻烦各位看官顺手点个star~😊 如果文章对你有所帮助,可以点赞👍收藏⭐支持一下博主~😆 12.1.1 服务器端渲染 12.1.2 Ajax渲染(局部更新) 12.1.3 前后端分离

    2023年04月10日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包