Ajax和Jasn_IT分享知识网

大家好，欢迎来到IT知识分享网。

SpringMVC：Ajax和Json

1. 什么是Json

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。

前后端分离，数据交互异常重要，json才是王者。

1.1 json的语法要求

任何JS支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。要求和语法格式如下：
1. 对象表示为键值对
2. 数据由逗号分隔
3. 花括号保存对象
4. 方括号保存数组
JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 “” 包裹，使用冒号 : 分隔，然后紧接着值，具体格式为：
```
{ 
     "name": "钢铁侠"} { 
     "age": "48"} { 
     "sex": "男"} { 
     "role","hero"} 
```
json本质上是一个字符串，它使用文本表示一个JS对象的信息；总的来说，json本质是一个表示js对象的字符串。

1.2 JSON和JS之间的转换

要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是：{a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({ 
     a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

代码实现两者转换：

<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> //编写一个对象 var user = { 
       name:"啊侠", age:20, sex:"男" }; //输出一下这个对象 console.log(user); //将js对象转换为json字符串； var str = JSON.stringify(user); console.log(str) var obj = JSON.parse(str); console.log(obj); </script> </body> </html>

1.3 使用Controller实现返回JSON数据

json解析工具中有一个最受欢迎的就是jackson，要使用Jackson，就需要使用它的jar包：在maven的pom.xml文件中的dependencies标签中输入以下代码自动导入相关jar包：
```
<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.8</version> </dependency> 
```

编写user类并根据其编写controller

user类：

package com.david.pojo; public class User { 
        private String name; private int age; private String sex; public User() { 
        } public User(String name, int age, String sex) { 
        this.name = name; this.age = age; this.sex = sex; } public String getName() { 
        return name; } public void setName(String name) { 
        this.name = name; } public int getAge() { 
        return age; } public void setAge(int age) { 
        this.age = age; } public String getSex() { 
        return sex; } public void setSex(String sex) { 
        this.sex = sex; } @Override public String toString() { 
        return "User{" + "name='" + name + '\'' + ", age=" + age + ", sex='" + sex + '\'' + '}'; } }

controller：（这部分内容我们顺便展示有关时间的处理方法）

package com.david.controller; import com.david.pojo.User; import com.david.utils.Util; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.databind.SerializationFeature; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.List; @Controller public class UserController { 
        //有关user的controller实现 @RequestMapping(value = "/json1",produces = "application/json;charset=utf-8")//乱码问题：给@RequestMapping加一个属性 @ResponseBody //@ResponseBody作用：该注解用于将Controller的方法返回的对象，通过适当的HttpMessageConverter转换为指定格式后，写入到Response对象的body数据区。 public String json1() throws JsonProcessingException { 
        //User user = new User("李",1,"man"); //ObjectMapper mapper = new ObjectMapper(); //String s = mapper.writeValueAsString(user);将Java对象转换为json字符串； //return s; //以上代码简化如下 return new ObjectMapper().writeValueAsString(new User("爱心觉罗侠",21,"男")); } @RequestMapping(value = "/json2") @ResponseBody public String json2() throws JsonProcessingException { 
        List<User> list = new ArrayList<>(); User user1 = new User("啊侠",20,"男"); User user2 = new User("啊豪",21,"男"); User user3 = new User("啊美",18,"女"); User user4 = new User("啊萌",19,"女"); list.add(user1); list.add(user2); list.add(user3); list.add(user4); return new ObjectMapper().writeValueAsString(list); } //我们创建一个时间日期的对象试试，看看能不能转换成功 //有关时间的controller实现 //发现问题：时间默认返回的json字符串变成了时间戳的格式 //为了不让时间显示时间戳形式，我们进行以下操作 @RequestMapping(value = "/time") @ResponseBody public String time() throws JsonProcessingException { 
        ObjectMapper om = new ObjectMapper(); //1.所以我们要关闭它的时间戳功能 om.configure (SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false); //2.自定日期格式对象； SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); //3.让mapper指定时间日期格式为simpleDateFormat； om.setDateFormat(sdf); //创建日期对象 Date date = new Date(); String str = om.writeValueAsString(date); return str;//由于@ResponseBody注解，这里会将str转成json格式返回；十分方便 } //由于发现再次进行类似处理时候可以使用同样的代码， //于是处于java的精髓为此段代码编写工具类，将其封装起来 //建立util类以后调用util类方法来实现时间在网页的显示 @RequestMapping(value = "/time2") @ResponseBody public String time2() { 
        return Util.getJson(new Date()); } }

有关时间的内容的util类：

package com.david.utils; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.databind.SerializationFeature; import java.text.SimpleDateFormat; public class Util { 
        public static String getJson(Object object) { 
        return getJson(object,"yyyy-MM-dd HH:mm:ss"); } public static String getJson(Object object,String dateFormat){ 
        ObjectMapper mapper = new ObjectMapper(); mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false); SimpleDateFormat simpleDateFormat = new SimpleDateFormat(dateFormat); mapper.setDateFormat(simpleDateFormat); try { 
        return mapper.writeValueAsString(object); } catch (JsonProcessingException e) { 
        e.printStackTrace(); } return null; } }

编写完这三个类，配置好tomcat我们就可以在网页中简单测试了。

上面处理问题的过程中我们都在尽量的体现封装的思想，所以这里介绍一种一劳永逸的json处理乱码的方法：可以通过Spring配置统一指定，这样就不用每次都去处理了！

<mvc:annotation-driven> <mvc:message-converters register-defaults="true"> <bean class="org.springframework.http.converter.StringHttpMessageConverter"> <constructor-arg value="UTF-8"/> </bean> <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="objectMapper"> <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean"> <property name="failOnEmptyBeans" value="false"/> </bean> </property> </bean> </mvc:message-converters> </mvc:annotation-driven>

至此，我们简单了解了如何将json转换为js，也了解了一些将时间戳转换为时间格式的方法，顺便回顾了封装的思想。

上面代码中都是用的是@ResponseBody注解，它就是把后台的对象转换成json对象，返回到页面，和它对应的当然就是@RequestBody，一般用来负责接收前台的json数据，把json数据自动封装到pojo中；下面用Ajax来测试这一块，这两个注解一般都会在异步获取数据中使用到；。

2. Ajax

2.1 AJAX简单介绍

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在以前的网页中还有现在少部分网站会出现，登录如果失败，需要刷新才能登录；或者不点击刷新就不知道自己的信息是否正确（web1.0时代）。而现在大多数网站都是局部刷新，不更新网页的情况下，实现局部信息更新（即为web2.0时代）。
一定要注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
利用AJAX可以做：
1. 注册时，输入用户名自动检测用户是否已经存在。
2. 登陆时，提示用户名密码错误
3. 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。

2.2 利用前端的一个标签来伪造ajax:(iframe标签)

建立HTML文件并进行以下代码操作：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>david</title> </head> <body> <script type="text/javascript"> window.onload = function(){ 
     var myDate = new Date(); document.getElementById('currentTime').innerText = myDate.getTime(); }; function LoadPage(){ 
     var targetUrl = document.getElementById('url').value; console.log(targetUrl); document.getElementById("iframePosition").src = targetUrl; } </script> <div> <p>请输入要加载的地址：（格式要正确，如：https://www.baidu.com/或https://www.sogou.com/）</p> <p>为方便观察，当前时间戳为：<span id="currentTime"></span></p> <p> <input id="url" type="text" value=""/> <input type="button" value="提交" onclick="LoadPage()"> </p> </div> <div> <h3>加载页面位置：</h3> <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe> </div> </body> </html>

2.3jQuery.Ajax

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
为了避免重复的代码，我们直接学习jQuery提供的Ajax；jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，就能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或 JSON–同时您能够把这些外部数据直接载入网页的被选元素中。
我们来简单看一下这些让人方便却又让刚接触的人头痛的方法：
1. jQuery.get(…)
  参数：
  url: 待载入页面的URL地址
  data: 待发送 Key/value 参数。
  success: 载入成功时回调函数。
  dataType: 返回内容格式，xml, json, script, text, html
2. jQuery.post(…)
  所有参数：
  url: 待载入页面的URL地址
  data: 待发送 Key/value 参数
  success: 载入成功时回调函数
  dataType: 返回内容格式，xml, json, script, text, html
3. jQuery.getScript(…)
  所有参数：
  url: 待载入页面的URL地址
  data: 待发送 Key/value 参数。
  success: 载入成功时回调函数。
4. jQuery.getJSON(…)
  所有参数：
  url: 待载入页面的URL地址
  data: 待发送 Key/value 参数。
  success: 载入成功时回调函数。
5. jQuery.ajax(…)
  部分参数：
  
  url：请求地址
  type：请求方式，GET、POST（1.9.0之后用method）
  headers：请求头
  data：要发送的数据
  contentType：即将发送信息至服务器的内容编码类型(默认: “application/x-www-form-urlencoded; charset=UTF-8”)
  async：是否异步
  timeout：设置请求超时时间（毫秒）
  beforeSend：发送请求前执行的函数(全局)
  complete：完成之后执行的回调函数(全局)
  success：成功之后执行的回调函数(全局)
  error：失败之后执行的回调函数(全局)
  accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
  dataType：将服务器端返回的数据转换成指定类型
  “xml”: 将服务器端返回的内容转换成xml格式
  “text”: 将服务器端返回的内容转换成普通文本格式
  “html”: 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
  
  “script”: 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式

使用ajax实现注册提示

编写controller：

 @RequestMapping("/a") @ResponseBody public String ajax(String name,String pwd){ 
      String msg = ""; //模拟数据库中存在数据 if (name!=null){ 
      if ("admin".equals(name)){ 
      msg = "OK"; }else { 
      msg = "用户名输入错误"; } } if (pwd!=null){ 
      if ("".equals(pwd)){ 
      msg = "OK"; }else { 
      msg = "密码输入有误"; } } return msg; //由于@ResponseBody注解，将list转成json格式返回 }

编写前端页面，进行异步处理：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html> <head> <title>ajax</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script> <script> function a1(){ 
       $.post({ 
       url:"${pageContext.request.contextPath}/ajax/a3", data:{ 
      'name':$("#name").val()}, success:function (data) { 
       if (data.toString()=='OK'){ 
       //学习链接：https://www.w3school.com.cn/jquery/css_css.asp $("#userInfo").css("color","green"); }else { 
       $("#userInfo").css("color","red"); } $("#userInfo").html(data); } }); } function a2(){ 
       $.post({ 
       url:"${pageContext.request.contextPath}/ajax/a3", data:{ 
      'pwd':$("#pwd").val()}, success:function (data) { 
       if (data.toString()=='OK'){ 
       $("#pwdInfo").css("color","green"); }else { 
       $("#pwdInfo").css("color","red"); } $("#pwdInfo").html(data); } }); } </script> </head> <body> <p> 用户名:<input type="text" id="name" onblur="a1()"/> <span id="userInfo"></span> </p> <p> 密码:<input type="text" id="pwd" onblur="a2()"/> <span id="pwdInfo"></span> </p> </body> </html>

以上代码即可实现动态请求响应，局部刷新的效果。

乱谈阿贾克斯（纯属娱乐）

我们介绍的是编程过程中的Ajax，不要到百度上胡乱搜索！AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

如果去网页上直接搜索阿贾克斯，会出现好多不是这个层面的知识，如下：
1. 地理知识：
2. 神话知识：
3. 电影知识：
4. 体育知识：

无论是什么方面的知识，多知道一些总是没错的。其实随意搜索是会出现很多生活彩蛋的。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/146348.html

Ajax和Jasn