AJAX 和 JSON_lao_kai_ybqy

未知 02-07 5450

AJAX

概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。提升了用户的体验

AJAX实现方式

原生js也可以直接操作AJAX 原生JS使用ajax JQuery实现,使用时一定要引入jquery.

$.ajax() 语法 : $.ajax({传输键值对}); 示例 $.ajax({ url:"ajaxServlet" //这里的路径是和页面一样的根目录,所以没有/,这个要看你服务器的配置路径, //如果配置路径为urlPatterns为"/"则当前路径为“http://localhost:8080/”可以直接调用servlet type:"GET" //请求方式 post和get data:{"username":"hello","age":23,"gender:"男"} success:function (data) { alert(data); },//响应成功后的回调函数 error:function () { alert("出错啦...") },//表示如果请求响应出现错误，会执行的回调函数 });

AjaxServlet.java

@WebServlet("/ajaxServlet") public class AjaxServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.获取请求参数 String username = request.getParameter("username"); //2.打印username System.out.println(username); //3.响应 response.getWriter().write("hello : " + username); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } } $.get():发送get请求语法: $.get(url,[data],[callback],[type]) ?????参数说明 ??????????url:请求路径 ??????????data:请求参数 ??????????callback:回调函数 ??????????type:响应参数类型示例: $.get("ajaxSerlet",{username:"zkr"},function(data){ alert(data) },"text");

这里介绍一下表单中序列化（对象 -> 字节数组）操作 $("#表单id")…serialize(),这样的话就将表单中的键值变为一个数组,并存入request中返回给服务器. 服务器可以通过request.getParameterMap() 获得的数据是这样的

{username=[Ljava.lang.String;@7681b4d0,password=[Ljava.lang.String;@585ea230}

而之中Ljava.lang.String是一个字符串数组的字节码表示【[】：表示一维数组。【[[】：表示二维数组。【L】：表示一个对象。【java.lang.String】：表示对象的类型。【@】：后面表示该对象的hashCode。如果想获得值的话,需要遍历,值的获取使用Arrays.toString(值) 示例:

Map<String, String[]> map = request.getParameterMap(); map.forEach((k,v)->{ System.out.println(k+" : "+Arrays.toString(v)); });

打印结果 password : [546565] username : [zhkuii5565] 也可以直接利用BeanUtils封装对象,在直接调用对象就可以了获得之后进行相关的操作就可以了.回调函数中的data是服务器返回来的数据. 用来接应并进行下一步的操作示例

$.get("user/login",$("#loginForm").serialize(),function (data) { if(data.flag){ location.href="index.html"; }else{ $("#errorMsg").html(data.errorMsg); } }) $.post():发送post请求语法: $.post(url,[data],[callback],[type]) ?????参数说明 ??????????url:请求路径 ??????????data:请求参数 ??????????callback:回调函数 ??????????type:响应参数类型示例: $.post("ajaxSerlet",{username:"zkr"},function(data){ alert(data) },"text"); JSON

概念： JavaScript Object Notation JavaScript对象表示法

json现在多用于存储和交换文本信息的语法进行数据的传输JSON 比 XML 更小、更快，更易解析。

语法: 1.基本规则

数据在名称/值对中：json数据是由键值对构成的键用引号(单双都行)引起来，也可以不使用引号值得取值类型：数字（整数或浮点数）字符串（在双引号中）逻辑值（true 或 false）数组（在方括号中） {“persons”:[{},{}]}对象（在花括号中） {“User”:{“name”：“haha”,“age”:23…}}null

2.获取方式 ????1.json对象.键名 ????2.json对象[“键名”] ????3.数组对象[索引] ????4.遍历

3.示例

结果:依次弹出显示小白,小黄,80,和之后的数组每个键值对

Json转换 Json数据字符串转换为JSON对象

语法JSON.parse(text,reviver) 参数说明

text : 一个JSON数据的字符串格式reviver: 可以省略,一个转换结果的函数，将为对象的每个成员调用此函数。

示例

var p='{"name":"小白","age":12,"gender":"男"}'; var ps=JSON.parse(); document.write(ps.name);

页面输出小白

JSON数据转换成字符串

语法JSON.stringify(value,replace) 参数说明

value:必选参数。被变换的JSON值，一般是对象或数组。replace: 可以省略,一个转换结果的函数 Java对象转换成JSON

使用JSON解析器解析器:Jsonlib, Gson , fastjson , jackson 这里使用jackson 1.转换步骤 ?? ①. 导入jackson的相关jar包 pom.xml依赖坐标

<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.9.9</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.9.9</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.9</version> </dependency>

?? ②. 创建Jackson核心对象 ObjectMapper ?? ③. 调用ObjectMapper ????????1.调用转换方法 ????????????????* writeValue(参数1，obj): ??????????????????????参数1： ????????????????????????????????File：将obj对象转换为JSON字符串，并保存到指定的文件中 ????????????????????????????????Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中 ????????????????????????????????OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中 ????????????????* writeValueAsString(obj):将对象转为json字符串示例

package text; import com.fasterxml.jackson.databind.ObjectMapper; import domain.People; import domain.Person; import org.junit.Test; import java.io.*; import java.util.*; public class JacksonTest { @Test public void testJackson() throws Exception { People peo = new People("黑白黑","男",30); ObjectMapper mapper = new ObjectMapper(); mapper.writeValue(new File("d://a.txt"),peo); mapper.writeValue(new FileWriter("d://b.txt"),peo); String s = mapper.writeValueAsString(peo); System.out.println(s); } }

测试结果: 2. 注解： ??????????1. @JsonIgnore：排除属性。 ????????????????????当转换是自动忽略,直接跳过

??????????2. @JsonFormat：属性值得格式化 ????????????????????* @JsonFormat(pattern = “yyyy-MM-dd”) 示例 People类中加入了Date类 birthday

package text; import com.fasterxml.jackson.databind.ObjectMapper; import domain.People; import domain.Person; import org.junit.Test; import java.io.*; import java.util.*; public class JacksonTest { @Test public void testJackson() throws Exception { People peo = new People("黑白黑","男",30,new Date()); ObjectMapper mapper = new ObjectMapper(); String s = mapper.writeValueAsString(peo); System.out.println(s); } }

不加 @JsonIgnore时,就变成了毫秒值加过之后直接跳过当加入 @JsonFormat(pattern = “yyyy-MM-dd”)时加入时,直接加到变量的上一行

3. 复杂java对象转换

List：数组Map：对象格式一致 writeValueAsString可以直接将List变为json的数组 map也是同样的,形成相应的键值对 JSON转换成Java对象

和上方前几步操作相同引入,创建ObjectMapper对象调用的方法不同 ????调用readValue(json数据字符串,要转换的Java对象的Class) 示例

@Test public void test5() throws Exception { String json="{\"gender\":\"男\",\"name\":\"黑小黑\",\"age\":22,\"birthday\":\"2021-10-06 12:13:22\"}"; //中间的双引号需要用转义符号/ ObjectMapper mapper =new ObjectMapper(); People people = mapper.readValue(json, People.class); System.out.println(people); }

输出结果: