JSON&&Ajax

最新推荐文章于 2023-01-06 15:04:20 发布
最新推荐文章于 2023-01-06 15:04:20 发布
阅读量142 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyq1614406553/article/details/98211579
版权

什么是JSON
JSON（javaScript Object Notation，JS对象标记）是一种轻量级的数据交换格式，目前使用特别广泛。

采用完全独立于编程语言文本格式来存储和表示数据，易于人阅读和编写，同时也易于机器解析和生成，并有效的提升网络传输效率。

在JS语言中，一切都是对象。因此，任何JS支持的类型都可以通过JSON来表示，例如字符串，数字，对象，数组等。它的要求和语法格式：

  • 对象表示为键值对
  • 数据有逗号分割
  • 花括号来保存对象
  • 方括号来保存数组

JSON和JS的关系：
JSON是JS对象的字符串表示形式，它使用文本表示一个JS对象的信息，本质是一个字符串。

var obj={a：‘Hello’，b：‘World’}；是一个对象
var  json=‘’{“a”：“Hello”，“b”：“world“}’这是一个JSON字符串

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"}'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    <!--编写一个对象-->
    var user={
        name:"NBA",
        age:3,
        sex:"杜兰特"
    };

    console.log(user);

    //将js对象转换为json字符串
    var str=JSON.stringify(user);
    console.log(str);

    var obj=JSON.parse(str);
    console.log(obj);
document.write(str);

</script>
</body>
</html>

控制台结果:
在这里插入图片描述
使用Controller实现返回JSON数据
1.导包
Jackson应该是目前比较好的json解析工具了，当然工具不止这一个，比如还有阿里巴巴的fastjson等等。

我们这里使用Jackson，使用它需要导入它的jar包；

   <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.8</version>
    </dependency>

我们在来一个一个实体类，方便我们测试，

package com.wang.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类，需要 @ResponseBody，让它不去视图解析器，而直接返回一个字符串，

public class UserController {
    @RequestMapping("/json")
    @ResponseBody
    public String json1() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();

//        创建一个对象
        User user = new User("神州一号", 1, "男");

        System.out.println(user);

        //将Java对象转换为json字符串
        String str = mapper.writeValueAsString(user);
        System.out.println(str);
        return str;
    }

在这里插入图片描述
出现乱码，我们可以在springmvc配置文件中加入以下代码


    <context:component-scan base-package="com.wang.controller"/>
   <mvc:default-servlet-handler/>
    <mvc:annotation-driven>
  <!--      JSON格式乱码处理方式-->
        <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>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB_INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

</beans>

在这里插入图片描述

这样就不回出现乱码了，配置之后，只用配置一次，还有一个解决方案，加注释但是不建议使用，因为它只对它注释的代码起作用，操作如下

  @RequestMapping(value = "/json",produces = "application/json;charset=utf-8")

打印集合试试

@ResponseBody
    @RequestMapping(value = "/json2")
    public String json2() throws JsonProcessingException {
        List<User> list=new ArrayList<>();
        User user = new User("神州一号", 1, "男");
        User user1 = new User("神州二号", 1, "男");
        User user2 = new User("神州三号", 1, "男");
        User user3 = new User("神州四号", 1, "男");
        list.add(user);
        list.add(user1);
        list.add(user2);
        list.add(user3);

        return new ObjectMapper().writeValueAsString(list);

    }

在这里插入图片描述
我们也可以在利用JSON打印出时间，不过他有时间戳，我们要处理

   @ResponseBody
    @RequestMapping(value = "/time1")
    public String json4() throws JsonProcessingException {
        Date date = new Date();
        System.out.println(date);
        return new ObjectMapper().writeValueAsString(date);
    }

在这里插入图片描述

默认日期格式会变成一个数字，是1970年1月1日到当前日期的毫秒数！Jackson 默认是转成timestamps形式解决方案：取消timestamps形式 ， 自定义时间格式

 @RequestMapping(value = "/time2")
    @ResponseBody
    public String json5() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
//        1.如何让他不返回时间戳，所要关闭它的时间戳功能
        mapper.configure(SerializationFeature.WRITE_DATE_KEYS_AS_TIMESTAMPS,false);

        SimpleDateFormat format = new SimpleDateFormat("yy-MM-dd HH-mm-ss");
        mapper.setDateFormat(format);
        Date date = new Date();
        return mapper.writeValueAsString(date);
    }

在这里插入图片描述
对于这些固定代码我么可以把他放在工具类里，用的时候就不用去写了，这就是封装的思想，
工具类：

public class JsonUtils {
    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_DATE_KEYS_AS_TIMESTAMPS,false);

        SimpleDateFormat format = new SimpleDateFormat(dateFormat);
        mapper.setDateFormat(format);

        try {
            return mapper.writeValueAsString(object);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }

}
AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

就和国内百度的搜索框一样：
在这里插入图片描述

传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪造Ajax</title>
</head>
<body>
<script type="text/javascript">
    window.onload=function f() {
         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>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input type="text" id="url" value="https:www.baidu.com/">
        <input type="button" value="提交" onclick="loadPage()">
    </p>
</div>
<div>
    <h3>
        加载页面的位置：
    </h3>
    <iframe style="width: 100%;height: 500px" id="iframePosition">
    </iframe>
</div>


</body>
</html>

在这里插入图片描述
jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！我们来看下他的方法；
编写一个Controller类

@Controller
@RequestMapping("/ajax")
public class AjaxController {
    //第一种方式，服务器要返回一个字符串，直接使用response

    @RequestMapping("/a1")
    public void ajax(String name, HttpServletResponse response) throws IOException {
        if ("admin".equals(name)){
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }

编写一个index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
    <script>
        function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/ajax/a1",
                data:{'name':$("#txtName").val()},
                success:function (data,status) {
                    console.log(data);
                    console.log(status);
                }
            });
        }
    </script>
</head>
<body>
用户名：<input type="text" id="txtName" onblur="a1()">
</body>

在这里插入图片描述
在前段展示集合
controller类

  @RequestMapping("/a2")
    @ResponseBody
    public List<User> ajax2(){

        List<User> list = new ArrayList<>();

        User user1 = new User("秦疆1号",1,"男");
        User user2 = new User("秦疆2号",1,"男");
        User user3 = new User("秦疆3号",1,"男");
        User user4 = new User("秦疆4号",1,"男");
        list.add(user1);
        list.add(user2);
        list.add(user3);
        list.add(user4);

        return list; //由于加了@ResponseBody注解，他会返回一个字符串；
    }

jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
    </tbody>
</table>

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>

<script>
    $(function () {
        $("#btn").click(function () {
            $.post("${pageContext.request.contextPath}/ajax/a2",function (data) {
                console.log(data);
                var html = "";
                for (var i=0;i<data.length;i++){
                    html += "<tr>" +
                        "<td>"+data[i].name + "</td>" +
                        "<td>"+data[i].age + "</td>" +
                        "<td>"+data[i].sex + "</td>" +
                        "</tr>"
                }
                $("#content").html(html);
            })
        })
    })
</script>

</body>
</html>

输出结果：
在这里插入图片描述

注册显示，正确提示Ok，不正确提示错误
controller类：

   @RequestMapping("/a3")
    @ResponseBody
    public String ajax3(String name,String pwd){
        String msg="";
        if (name!=null){
            if ("admin".equals(name)){
                msg="ok";
            }else {
                msg="用户名有误";
            }
        }
        if (pwd!=null){
            if ("123456".equals(pwd)){
                msg="ok";
            }else {
                msg="密码输入有误";
            }
        }
        return msg;
    }
}

前端jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>

    <script>
        function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/ajax/a3",
                data:{"name":$("#name").val()},
               success: function(data) {
                    if (data.toString()=='ok') { //信息核对成功
                        $('#userInfo').css("color","green");
                    }else {
                        $('#userInfo').css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            })

        }
        function a2() {
            $.post("${pageContext.request.contextPath}/ajax/a3",
            {"pwd": $("#pwd").val()},
                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>

效果：
在这里插入图片描述
在这里插入图片描述

奇比翼凡
关注
java_web 快速入门之第二十章 ajax+json实现自动补全
qq_61313896的博客
04-27 549
一：Ajax的基本概念 Ajax 是一种客户端技术，无论使用何种服务器技术都可以使用 Ajax；Ajax 是 XMLHttpRequest 对象和 Javascript、XML、CSS、DOM 等多种技术的组合。 XMLHttpRequest 对象为新技术，是 Ajax 技术中的核心部分，是一个具有应用程序接口的 Javascript 对象，能使用 HTTP 连接服务器；由微软公司在 1999 年提出。 XML 即 eXtensible ...
AJAX&JSON
qq_53124400的博客
01-14 322
AJAX 概念 Asynchronous JavaScript And XML :异步的JavaScript 和 XML 异步和同步： Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。这意味着可以不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页如果需要更新内容，必须重新加载整个网页页面。 实现方式 原生的JS实现方式(了解) JQeury实现方式 ...
AJAX异步刷新
weixin_43738352的博客
01-21 198
AJAX异步刷新 原生js实现AJAX异步刷新 get请求 实现ajax可以分为步。 第一步获取实现AJAX的核心对象xmlHttpRequest。 第二步调用xmlHttpRequest对象的open方法。传入请求方式和请求的地址 第三步调用send方法。发送请求 第四部抒写回调函数，处理servlet那边返回的数据 实际代码如下： &lt;body&gt; 用户名：&lt;input ...
Input框实现聚焦，并解决blur事件与enter事件冲突同时触发两次问题
大石化鸟的博客
01-06 2261
Input框实现聚焦，并解决blur事件与enter事件冲突同时触发两次问题
input输入框type=text触发的相关事件
现在学习也不晚
07-30 1万+
我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了input上面，模拟客户输入相关事件的触发流程： 首先还是先触发了鼠标按下事件，然后触发了焦点，接着鼠标抬起，触发click事件。到了这里客户开始输入信息了，keydown，keyup，keydown，keyup的循环，因为用的输入法，所以字
1.用AJAX（使用dwr）来判断用户名是否可用,利用json返回值
缭绕
10-25 963
一、准备工作    1，下载dwr.jar添加到项目中    2，创建配置文件：/WEB-INF/dwr.xml    3，在web.xml中配置       dwr org.directwebremoting.servlet.DwrServlet debug true     dwr /dwr/* 二、在类中创建判断用户名是否已经用过
AJAX&Json
zyl1112的博客
03-21 195
AJAX 概念 AJAX（ASynchronous JavaScript And XML）：异步的JavaScript 和 XML 异步和同步： 客户端和服务器端互相通信的基础上：同步： 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。异步： 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载
Ajax&Json&XML.html
02-04
Ajax&Json&XML常用基本操作 JSON数据和Java对象的相互转换 常见的解析器：Jsonlib，Gson，fastjson，jackson JSON转为Java对象 1. 导入jackson的相关jar包 2. 创建Jackson核心对象 ObjectMapper 3.调用...
ajax&json&axios总结.xmind
01-02
ajax&json&axios总结.xmind
Ajax&Json视频教程
06-28
Ajax（异步JavaScript和XML）...通过这个Ajax&Json视频教程，你将能够熟练地在Web应用中运用Ajax和JSON，实现无刷新的数据交互，提升用户的浏览体验。无论你是初学者还是有经验的开发者，这都将是一次充实的学习之旅。
Ajax&Json笔记
03-28
在Ajax应用中，JSON经常被用作数据交换格式，因为它能直接被JavaScript解析，不需要额外的解析库。当一个Ajax请求发送到服务器时，服务器端处理请求并返回JSON格式的数据。JavaScript的XMLHttpRequest对象接收到这些...
1.Javascript & jQuery & Ajax & JSON
01-04
JavaScript、jQuery、Ajax和JSON是Web开发中的四个关键概念，它们在构建动态、交互式的网页应用中发挥着重要作用。下面将分别对这四个主题进行详细阐述。 **JavaScript** 是一种轻量级的脚本语言，主要用于客户端的...
JavaWeb学习笔记
Curry_Java的博客
03-22 4487
尚硅谷JavaWeb课程笔记
JavaScript
dengdengdecai的博客
03-12 172
JS的标签使用，两种方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jstest.js"></script> </head> <body> </body>
jquery实现可编辑表格，并生成json结果
石家庄IT信息互联
07-19 1774
jquery实现可编辑表格，并生成json结果
input输入效果控制onfocus和onblur事件
热门推荐
kemy88的专栏
03-01 1万+
以前看到alibaba上的注册右边的提示信息效果很不错,总想拿过来自己用.参考建行的代码.主要思想是:在输入框input 里面利用onfocus 和onblur两个事件.分别将提示信息的class改变 .tip_on, .tip_off 代码如下  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">ht
08-React redux
最新发布
09-14
redux 相关代码以及 redux 开发者工具
C#中的数据库迁移是如何实现的
09-14
在C#中，数据库迁移是Entity Framework（EF）的一个核心功能，它允许开发者通过代码变更来更新数据库结构。以下是如何在C#中使用Entity Framework实现数据库迁移的详细步骤和代码示例。 Entity Framework的迁移功能为C#开发者提供了一种强大的工具，用于管理和应用数据库架构的变更。通过上述步骤和命令，可以在开发过程中轻松地同步模型和数据库的更改。在实际开发中，应确保在应用迁移之前充分测试，以避免数据丢失或不一致的问题。 在C#中，数据库迁移是Entity Framework（EF）的一个核心功能，它允许开发者通过代码变更来更新数据库结构。以下是如何在C#中使用Entity Framework实现数据库迁移的详细步骤和代码示例。 Entity Framework的迁移功能为C#开发者提供了一种强大的工具，用于管理和应用数据库架构的变更。通过上述步骤和命令，可以在开发过程中轻松地同步模型和数据库的更改。在实际开发中，应确保在应用迁移之前充分测试，以避免数据丢失或不一致的问题。
RS485数据收发程序示例
09-14
RS485数据收发程序示例
AJAX与JSON技术详解
"该文档主要介绍了AJAX和JSON两种技术，AJAX用于实现网页的异步更新，而JSON则是一种轻量级的数据交换格式。" AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不重新加载整个页面的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值