JSON 与 Ajax

JSON 与 Ajax

一、JSON

1、JSON 概述

1.1 JSON概念

JSON（JavaScript Object Notation），JavaScript 对象标记，是一种轻量级的数据交换格式，实际就是一个长一点的字符串。在 Java 开发中，可以将 JSON 数据转换为对象，也可以将对象转换为 JSON 数据。

1.2 JSON语法

注意点：key 值需要使用 "" , value 值可以为多种数据类型：数字、字符串、逻辑值、数据、对象、null

单条数据：

{复制

    "key1" : value1,复制

    "key1" : value1,复制

    ...复制

}复制

多条数据：

[复制

    {复制

        "key1" : value1,复制

        "key1" : value1,复制

        ...复制

    },复制

    {复制

        "key1" : value1,复制

        "key1" : value1,复制

        ...复制

    },   复制

    ...复制

]复制

实例：

student.json

{复制

    "id" : "20201001",复制

    "name" : "张三",复制

    "sex" : "男",复制

    "age" : 18复制

}复制

[复制

    {复制

        "id" : "20201001",复制

        "name" : "张三",复制

        "sex" : "男",复制

        "age" : 18复制

    },复制

    {复制

        "id" : "20201002",复制

        "name" : "李四",复制

        "sex" : "女",复制

        "age" : 19复制

    },复制

    {复制

        "id" : "20201003",复制

        "name" : "王五",复制

        "sex" : "男",复制

        "age" : 20复制

    }复制

]复制

2 、JSON 与 Java 对象转换

JSON 与 Java 对象转换需要引入如下资源：

2.1 Java 对象转 JSON

语法：

String str = JSON.toJSONString(对象名);复制

• 创建动态 Web 项目 json-test ，并引入资源 fastjson

  

• 创建实体类 Student.java

  package com.ynnz.entity;
   
  public class Student {
      private String id;
      private String name;
      private String sex;
      private int age;
      
      // get、set方法省略
      
      public Student() {
          
      }
      
      public Student(String id, String name, String sex, int age) {
          this.id = id;
          this.name = name;
          this.sex = sex;
          this.age = age;
      }
      
      @Override
      public String toString() {
          return "Student [id=" + id + ", name=" + name + ", sex=" + sex + ", age=" + age + "]";
      }复制

• 测试

  package com.ynnz.test;
   
  import java.util.ArrayList;
  import java.util.List;
   
  import com.alibaba.fastjson.JSON;
  import com.ynnz.entity.Student;
   
  public class Test {
      public static void main(String[] args) {
          // 准备数据
          List<Student> list = new ArrayList<Student>();
          Student stu1 = new Student("1001", "张三", "男", 20);
          Student stu2 = new Student("1002", "李四", "女", 20);
          list.add(stu1);
          list.add(stu2);
          // 将对象转换为JSON
          String jsonStr = JSON.toJSONString(list);
          System.out.println(jsonStr);
      }
  }复制

  输出结果为：

• 

  以上格式不方便查看，我们可以在网上找一些JSON在线解析工具进行格式整理：

  JSON在线解析及格式化验证 - JSON中文网

  

2.2 JSON 字符串转对象

语法：

类名 对象名 = JSON.parseObject(json字符串,类名.class);复制

• 测试

  package com.ynnz.test;
   
  import com.alibaba.fastjson.JSON;
  import com.ynnz.entity.Student;
   
  public class Test {
      public static void main(String[] args) {
          // 准备数据
          Student stu1 = new Student("1001", "张三", "男", 20);
          // 将对象转换为JSON
          String jsonStr = JSON.toJSONString(stu1);
          
          // 将json字符串转为对象
          Student student = JSON.parseObject(jsonStr,Student.class);
          System.out.println(student);
      }
  }复制

  输出结果：

  复制

二、Ajax

1、Ajax 概念

Ajax（Asynchronous Javascript And XML），异步 JavaScript 和 XML。

Ajax 可以使用 JavaScript 向服务器发送异步请求，在服务器请求少量数据，进行页面的局部刷新，不需要进行整个页面的刷新，可以大大提高页面访问效率。

2、Ajax 使用场景

3、Ajax 语法

Ajax 是 JavaScipt中的一部分，结合 jQuery 使用可以大大提高效率。

$.ajax({
    // 请求方式
    type : "get",
    // 请求地址
    url : "test.json",
    // 是否异步，默认为异步
    async : true,
    // 发送到服务器的数据
    data : {
        id : "1001"
    },
    // 预期服务器返回的类型
    dataType : "json",
    // 请求成功时调用的函数，data为返回的数据
    success : function(data){
        console.log(data);
    },
    // 请求失败时执行的函数
    error : function(){
        alert("请求失败")
    }
})复制

4、Ajax 案例

4.1 注册判断用户名是否存在

• 准备基础数据 account.json（真实开发中需要从数据库查询数据，并转换为json数据）

  [
      {
          "id":"admin",
          "password":"123456"
      },
      {
          "id":"zhangsan",
          "password":"123456"
      },
      {
          "id":"lisi",
          "password":"123456"
      },
      {
          "id":"wangwu",
          "password":"123456"
      },
      {
          "id":"mayun",
          "password":"123456"
      }
  ]复制

• 创建项目，引入 jQuery 文件

• 进行 Ajax 异步请求判断

  <!DOCTYPE html>
  <html>
      <head>
          <meta charset="utf-8">
          <title>注册页面</title>
      </head>
      <body>
          <form action="">
              账号：
              <input type="text" id="username"/><br />
              <span id="msg"></span>
              <br />
              密码：
              <input type="text" id="password"/><br /><br />
              <input type="submit" id="submit" value="注册"/>
          </form>
          <script src="js/jquery-3.6.0.min.js"></script>
          <script>
              $("#username").blur(function(){
                  $.ajax({
                      type : "get",
                      url : "json/account.json",
                      success : function(data){
                          var username = $("#username").val();
                          var count = 0;
                          for(var i=0;i<data.length;i++){
                              if(username == data[i].id){
                                  $("#msg").text("账号已经存在，请重新取名");
                                  $("#msg").css("color","red");
                              }
                              else{
                                  count++;
                              }
                          }
                          if(count == data.length){
                              $("#msg").text("账号合法");
                              $("#msg").css("color","green");
                          }
                      }
                  })
              })
          </script>
      </body>
  </html>复制

4.2 登录判断

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录界面</title>
    </head>
    <body>
        <form action="">
            账号：
            <input type="text" id="username"/><br />
            <br />
            密码：
            <input type="text" id="password"/><br /><br />
            <input type="button" id="submit" value="登录"/>
        </form>
        <script src="js/jquery-3.6.0.min.js"></script>
        <script>
            $("#submit").click(function(){
                $.ajax({
                    type : "get",
                    url : "json/account.json",
                    success : function(data){
                        var username = $("#username").val();
                        var password = $("#password").val();
                        var count = 0;
                        for(var i=0;i<data.length;i++){
                            if(username == data[i].id){
                                if(password == data[i].password){
                                    alert("账号，密码正确，进入主界面")
                                }
                                else{
                                    alert("密码不正确，请重试")
                                }
                            }
                            else{
                                count++;
                            }
                        }
                        if(count == data.length){
                            alert("账号不存在，请重试")
                        }
                    }
                })
            })
        </script>
    </body>
</html>复制

三、SSM + Ajax + JSON 实现登录、信息查询功能

1、数据库设计

数据库：jw

数据表：

account

student

2、SSM框架整合

• 创建动态 Web 项目 student-ajax，导入资源

  资源下载：有道云笔记

  

• mybatis 配置

  mybatis.xml

  <?xml version="1.0" encoding="UTF-8" ?>
  <!DOCTYPE configuration
      PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
      "http://mybatis.org/dtd/mybatis-3-config.dtd">
  <configuration>
      <!-- 设置别名 -->
      <typeAliases>
          <package name="com.ynnz.entity" />
      </typeAliases>
  </configuration>复制

• spring 配置

  spring.xml

  <?xml version="1.0" encoding="UTF-8"?>
  <beans xmlns="http://www.springframework.org/schema/beans"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:context="http://www.springframework.org/schema/context"
      xmlns:aop="http://www.springframework.org/schema/aop"
      xmlns:tx="http://www.springframework.org/schema/tx"
      xmlns:mvc="http://www.springframework.org/schema/mvc"
      xsi:schemaLocation="http://www.springframework.org/schema/beans
         http://www.springframework.org/schema/beans/spring-beans.xsd
         http://www.springframework.org/schema/context
         http://www.springframework.org/schema/context/spring-context.xsd
         http://www.springframework.org/schema/aop
         http://www.springframework.org/schema/aop/spring-aop.xsd
         http://www.springframework.org/schema/tx
         http://www.springframework.org/schema/tx/spring-tx.xsd
         http://www.springframework.org/schema/mvc
         http://www.springframework.org/schema/mvc/spring-mvc.xsd">
   
      <!-- 配置数据源 -->
      <bean id="dataSource"
          class="com.alibaba.druid.pool.DruidDataSource">
          <property name="driverClassName"
              value="com.mysql.jdbc.Driver"></property>
          <property name="url"
              value="jdbc:mysql://localhost:3306/jw?characterEncoding=utf-8&amp;useSSL=false"></property>
          <property name="username" value="root"></property>
          <property name="password" value="123456"></property>
      </bean>
   
      <!-- 配置Mapper扫描 -->
      <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
          <!-- 设置映射接口包扫描 -->
          <property name="basePackage" value="com.ynnz.dao"></property>
      </bean>
   
      <!-- 配置SqlSessionFactory -->
      <bean class="org.mybatis.spring.SqlSessionFactoryBean">
          <!-- 设置mybatis的核心配置文件 -->
          <property name="configLocation" value="classpath:mybatis.xml"></property>
          <!-- 设置数据源 -->
          <property name="dataSource" ref="dataSource"></property>
      </bean>
   
      <!-- 开启注解包扫描（service） -->
      <context:component-scan
          base-package="com.ynnz.service" />
   
      <!-- 配置事务管理器 -->
      <bean id="transactionManager"
          class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
          <property name="dataSource" ref="dataSource"></property>
      </bean>
   
      <!-- 开启注解方式管理AOP事务 -->
      <tx:annotation-driven
          transaction-manager="transactionManager" />
  </beans>复制

• springmvc 配置

  springmvc.xml

  <?xml version="1.0" encoding="UTF-8"?>
  <beans xmlns="http://www.springframework.org/schema/beans"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:context="http://www.springframework.org/schema/context"
      xmlns:mvc="http://www.springframework.org/schema/mvc"
      xsi:schemaLocation="http://www.springframework.org/schema/beans 
      http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
          http://www.springframework.org/schema/context 
          http://www.springframework.org/schema/context/spring-context-4.2.xsd
          http://www.springframework.org/schema/mvc 
          http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd">
   
      <!-- 开启注解包扫描（controller） -->
      <context:component-scan
          base-package="com.ynnz.controller" />
   
      <!-- 配置注解驱动 -->
      <mvc:annotation-driven></mvc:annotation-driven>
      
      <!-- 静态资源处理（放行） -->
      <mvc:default-servlet-handler/>
   
      <!-- 配置视图解析器 -->
      <bean
          class="org.springframework.web.servlet.view.InternalResourceViewResolver">
          <property name="prefix" value="/jsp/"></property>
          <property name="suffix" value=".jsp"></property>
      </bean>
  </beans>复制

• web 服务器配置

  web.xml

     
  复制

  <?xml version="1.0" encoding="UTF-8"?>
  <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns="http://xmlns.jcp.org/xml/ns/javaee"
      xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
      id="WebApp_ID" version="3.1">
      
      <!-- 配置Spring容器 -->
      <context-param>
          <param-name>contextConfigLocation</param-name>
          <param-value>classpath:spring.xml</param-value>
      </context-param>
      <!-- 配置监听器加载Spring -->
      <listener>
          <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
      </listener>
      <!-- 配置前端控制器 -->
      <servlet>
          <servlet-name>springmvc</servlet-name>
          <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
          <init-param>
              <param-name>contextConfigLocation</param-name>
              <param-value>classpath:springmvc.xml</param-value>
          </init-param>
          <load-on-startup>1</load-on-startup>
      </servlet>
      <servlet-mapping>
          <servlet-name>springmvc</servlet-name>
          <url-pattern>/</url-pattern>
      </servlet-mapping>
      <!-- 配置请求数据的字符集编码 -->
      <filter>
          <filter-name>charset</filter-name>
          <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
          <init-param>
              <param-name>encoding</param-name>
              <param-value>utf-8</param-value>
          </init-param>
      </filter>
      <filter-mapping>
          <filter-name>charset</filter-name>
          <url-pattern>/*</url-pattern>
      </filter-mapping>
  </web-app>复制

3、登录功能开发

• entity 层开发

  package com.ynnz.entity;
   
  public class Account {
      private String username;
      private String password;
      
      // get、get方法省略
  }复制

• dao 层开发

  package com.ynnz.dao;
   
  import java.util.List;
  import com.ynnz.entity.Account;
   
  public interface AccountDao {
      // 查询所有账号信息
      public abstract List<Account> queryAccounts();
  }复制

  <?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE mapper 
      PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
      "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
  <mapper namespace="com.ynnz.dao.AccountDao">
      <!-- 自动映射器 -->
      <resultMap type="Account" id="accMap">
          <id column="username" property="username"/>
          <result column="password" property="password"/>
      </resultMap>
      
      <!-- 查询所有客户信息 -->
      <select id="queryAccounts" resultMap="accMap">
          select * from account
      </select>
  </mapper>复制

• service 层开发

  package com.ynnz.service;
   
  import java.util.List;
  import com.ynnz.entity.Account;
   
  public interface AccountService {
      // 查询所有账号信息
      public abstract List<Account> queryAccounts();
  }复制

  package com.ynnz.service.impl;
   
  import java.util.List;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Service;
  import com.ynnz.dao.AccountDao;
  import com.ynnz.entity.Account;
  import com.ynnz.service.AccountService;
   
  @Service("accountService")
  public class AccountServiceImpl implements AccountService {
   
      @Autowired
      private AccountDao accountDao;
      
      @Override
      public List<Account> queryAccounts() {
          return accountDao.queryAccounts();
      }
   
  }复制

• controller 层开发

  package com.ynnz.controller;
   
  import java.util.List;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Controller;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.ResponseBody;
  import com.alibaba.fastjson.JSON;
  import com.ynnz.entity.Account;
  import com.ynnz.service.AccountService;
   
  @Controller
  public class AccountController {
      
      @Autowired
      private AccountService accountService;
      
      // 查询登录信息（账号信息）
      @RequestMapping("/login")
      @ResponseBody
      public String login() {
          List<Account> list = accountService.queryAccounts();
          // 将list对象转为json
          String account = JSON.toJSONString(list);
          return account;
      }
  }复制

• view 层开发

  需要引入jQuery

  <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>登录</title>
  <style>
      fieldset{
          width: 270px;
          margin: 0 auto;
      }
  </style>
  </head>
  <body>
      <fieldset>
          <legend>登录</legend>
          <form action="">
              账号：
              <input type="text" id="username"/><br /><br />
              密码：
              <input type="password" id="password"/><br /><br />
              <input type="button" value="登录" id="login"/>
          </form>
      </fieldset>
      
      <script src="js/jquery-3.6.0.min.js"></script>
      <script>
          $("#login").click(function(){
              $.ajax({
                  type : "post",
                  url : "http://localhost:8080/student-ajax/login",
                  dataType : "json",
                  success : function(data){
                      var username = $("#username").val();
                      var password = $("#password").val();
                      var count = 0;
                      for(var i=0;i<data.length;i++){
                          if(username == data[i].username){
                              if(password == data[i].password){
                                  window.location.href = "main.jsp";
                              }
                              else{
                                  alert("密码不正确，请重试")
                              }
                          }
                          else{
                              count++;
                          }
                      }
                      if(count == data.length){
                          alert("账号不存在，请重试")
                      }
                  }
              })
          })
      </script>
  </body>
  </html>复制

4、查询信息功能开发

• entity 层开发

  package com.ynnz.entity;
   
  public class Student {
      private String id;
      private String name;
      private String sex;
      private int age;
      
      // set、get方法省略
  }复制

• dao 层开发

  package com.ynnz.dao;
   
  import java.util.List;
  import org.apache.ibatis.annotations.Param;
  import com.ynnz.entity.Student;
   
  public interface StudentDao {
      // 查询学生信息
      public abstract List<Student> queryStudent(@Param("id") String id,@Param("name") String name);
  }复制

  <?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE mapper 
      PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
      "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
  <mapper namespace="com.ynnz.dao.StudentDao">
      <!-- 自动映射器 -->
      <resultMap type="Student" id="stuMap">
          <id column="id" property="id"/>
          <result column="name" property="name"/>
          <result column="sex" property="sex"/>
          <result column="age" property="age"/>
      </resultMap>
      
      <!-- 查询所有客户信息 -->
      <select id="queryStudent" resultMap="stuMap">
          select * from student
          <where>
              <if test="id!=null and id!=''">
                  id = #{id}
              </if>
              <if test="name!=null and name!=''">
                  and name like concat('%', #{name} ,'%')
              </if>
          </where>
      </select>
  </mapper>复制

• service 层开发

  package com.ynnz.service;
   
  import java.util.List;
  import com.ynnz.entity.Student;
   
  public interface StudentService {
      // 查询学生信息
      public abstract List<Student> queryStudent(String id,String name);
  }复制

  package com.ynnz.service.impl;
   
  import java.util.List;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Service;
  import com.ynnz.dao.StudentDao;
  import com.ynnz.entity.Student;
  import com.ynnz.service.StudentService;
   
  @Service("studentService")
  public class StudentServiceImpl implements StudentService {
   
      @Autowired
      private StudentDao studentDao;
      
      @Override
      public List<Student> queryStudent(String id, String name) {
          return studentDao.queryStudent(id, name);
      }
  }复制

• controller 层开发

  package com.ynnz.controller;
   
  import java.util.List;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Controller;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.ResponseBody;
  import com.alibaba.fastjson.JSON;
  import com.ynnz.entity.Student;
  import com.ynnz.service.StudentService;
   
  @Controller
  public class StudentController {
      
      @Autowired
      private StudentService studentService;
      
      // 查询学生信息
      @RequestMapping("/queryStudent")
      @ResponseBody
      public String queryStudent(String id,String name) {
          List<Student> list = studentService.queryStudent(id, name);
          return JSON.toJSONString(list);
      }
  }复制

• view 层开发

  <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>主界面</title>
  <style>
      fieldset{
          width: 800px;
          margin: 0 auto;
      }
      th,td{
          text-align: center;
      }
  </style>
  </head>
  <body>
      <fieldset>
          <legend>系统主界面</legend>
          <form action="">
              学号：
              <input type="text" id="id"/>
              姓名：
              <input type="text" id="name"/>
              <input type="button" value="搜索" id="search"/>
          </form>
          <br />
          <table border="1" width="800px" cellspacing="0">
              <tr>
                  <th>学号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
                  <th>操作</th>
              </tr>
          </table>
      </fieldset>
      
      <script src="js/jquery-3.6.0.min.js"></script>
      <script>
          // 访问页面默认查询所有数据
          $(function () {
              showData(); // 展示数据
          });
          
          function showData() {
              $.ajax({
                 type: "get",
                 url: "http://localhost:8080/student-ajax/queryStudent",
                 data: { },
                 dataType: "json",
                 success:function (data) {
                      var str = "";
                      for(var i=0;i<data.length;i++){
                          str +="<tr>";
                          str +="    <td>"+data[i].id+"</td>";
                          str +="    <td>"+data[i].name+"</td>";
                          str +="    <td>"+data[i].sex+"</td>";
                          str +="    <td>"+data[i].age+"</td>";
                          str +="    <td><a href='#'>修改</a>&emsp;<a href='#'>删除</a></td>";
                          str +="</tr>";
                      }
                     $("table").append(str);
                 },
                 error:function () {}
              });
          }
          
          // 搜索数据
          $("#search").click(function(){
              $.ajax({
                 type: "get",
                 url: "http://localhost:8080/student-ajax/queryStudent",
                 data: { 
                    id : $("#id").val(),
                    name : $("#name").val()
                 },
                 dataType: "json",
                 success:function (data) {
                     $("tr:not(tr:eq(0))").remove();
                      var str = "";
                      for(var i=0;i<data.length;i++){
                          str +="<tr>";
                          str +="    <td>"+data[i].id+"</td>";
                          str +="    <td>"+data[i].name+"</td>";
                          str +="    <td>"+data[i].sex+"</td>";
                          str +="    <td>"+data[i].age+"</td>";
                          str +="    <td><a href='#'>修改</a>&emsp;<a href='#'>删除</a></td>";
                          str +="</tr>";
                      }
                     $("table").append(str);
                 },
                 error:function () {}
              });
          })
      </script>
  </body>
  </html>复制