最近所学的Json以及ajax的应用

1、 JSON的优势如下：

1、没有结束标签，长度更短，读写更快。
2、能够直接被JavaScript解析器解析。
3、可以使用数组。
JSON:
{
“id” : 12,
“name” : “gao”,
“age” : 30,
“gender” : “男”,
“interests” : [“篮球”, “爬山”, “旅游”]
}

2、ajax

什么是ajax
Ajax: asynchronous javascript and xml (异步js和xml)
其是可以与服务器进行(异步/同步)交互的技术之一。
ajax的语言载体是javascript。
最大特点：异步请求，不刷新整个页面，只刷新局部也叫局部刷新。

什么是同步，什么是异步
同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

易懂的理解：
异步请求：你传输吧，我去做我的事了，你传输完了告诉我一声。
同步请求：你现在传输，我要亲眼看着你传输完成，才去做别的事。

Jquery的Ajax技术（重点）

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种
1）$.get(url,[data],[callback],[type])后面三个是可选的可以没有2）$.post(url, [data], [callback], [type])
其中：
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等

<script>
    function ajaxGet() {
        //$.get(url, [data], [callback], [type])
        $.get(
            '<%=request.getContextPath()%>/ajax',
            {'name': '张三'},
            function (jsonObj) {
                console.log(jsonObj);
            },
            'json'
        );

    }

    function ajaxPost() {
        //$.get(url, [data], [callback], [type])
        $.post(
            '<%=request.getContextPath()%>/ajax',
            {'name': '张三11'},
            function (jsonObj) {
                console.log(jsonObj);
            },
            'json'
        );
    }



</script>

3）$.ajax(option1:value1,option2:value\mathrm{2...});语法：$.ajax({键值对});
常用的option有如下：
async：是否异步，默认是true代表异步。（get/post方式只能异步，不能配置）
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址

    function ajaxTest() {
        //$.get(url, [data], [callback], [type])
        $.ajax({
            async: true,
            url: '<%=request.getContextPath()%>/ajax',
            type: 'GET',
            data: {'name': '赵六'},
            dataType: 'json',
            success: function (jsonObj) {
                console.log(jsonObj);
            }
        });

    }
    function ajaxTest() {
        //$.get(url, [data], [callback], [type])
        $.ajax({
            async: true,
            url: '<%=request.getContextPath()%>/ajax',
            type: 'Post',
            data: {'name': '赵六'},
            dataType: 'json',
            success: function (jsonObj) {
                console.log(jsonObj);
            }
        });

    }

3、JSON数据和Java对象的相互转换

@JsonIgnore // 忽略该属性
@JsonFormat(pattern = “yyyy-MM-dd”)以日期格式化该属性

private Date birthday;
//Java对象转为JSON字符串
@Test
public void test1() throws Exception {
    //1.创建Person对象
    Person person  = new Person();
    person.setName("张三");
    person.setAge(23);
    person.setGender("男");
    //2.创建Jackson的核心对象  ObjectMapper
    ObjectMapper mapper = new ObjectMapper();
    String json = mapper.writeValueAsString(person);
    // {"name":"张三","age":23,"gender":"男","birthday":null}
    System.out.println(json);
}

@Test
public void test4() throws Exception {
    //1.创建map对象
    Map<String,Object> map = new HashMap<String,Object>();
    map.put("name","张三");
    map.put("age",23);
    map.put("gender","男");
    //2.转换
    ObjectMapper mapper = new ObjectMapper();
    String json = mapper.writeValueAsString(map);
    System.out.println(json);//{"gender":"男","name":"张三","age":23}
}

//演示 JSON字符串转为Java对象
@Test
public void test5() throws Exception {
   //1.初始化JSON字符串
    // String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
    String json = "";
    //2.创建ObjectMapper对象
    ObjectMapper mapper = new ObjectMapper();
    //3.转换为Java对象 Person对象
    Person person = mapper.readValue(json, Person.class);
    System.out.println(person);
}

方法	作用
mapper.readValue (对象,类)	将字符串转换为对象
mapper.writeValueAsString（对象）	将对象转换为json字符串
mapper.readValue

//将字符串转换为对象
Student student = mapper.readValue(jsonString, Student.class);
System.out.println(student);
 
//将对象转换为json字符串
jsonString = mapper.writeValueAsString(student);
System.out.println(jsonString);
 
 
结果：
Student [ name: Hyl, age: 20 ]
 
{
  "name" : "Hyl",
  "age" : 20
}

实例1 登录重名提示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form>
    <input type="text" name="name" id="nameId"/><span id="span_nameId"></span><br/>
    <input type="text" name="password" id="password"/><span id="span_password"></span><br/>
    <input type="submit" value="登录"/>

</form>
<script src="static/js/jquery-2.1.4.js"></script>
<script>
   
    $(function (){
        $('#nameId').blur(function (){
            var name=$(this).val();
            $.post(
                '<%=request.getContextPath()%>/ajax2',
                {'name':name},  //String name = req.getParameter("name"); 获取的数据
                function (jsonObj){
                    console.log(jsonObj);
                    if(jsonObj.exist){
                        $('#span_nameId').html(jsonObj.msg); //如果和tom相等，在后面输出msg并css改变格式
                        $('#span_nameId').css("color","red");
                    }else{
                        $('#span_nameId').html(jsonObj.msg);
                        $('#span_nameId').css("color","green");
                    }
                },
                'json'
            );
        });
    });
</script>
</body>
</html>

package com.situ.web.controller;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/ajax2")
public class Ajax2Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        //{'exist':true,'msg':'此用户太受欢迎，请换一个'}
        //{'exist':true,'msg':'此用户可以使用'}
        Map<String,Object> map=new HashMap<>();
        if(name.equalsIgnoreCase("tom")){  //相等返回真，不相等返回假。
            map.put("exist",true);
            map.put("msg","此用户太受欢迎，请换一个");
        }else{
            map.put("exist",false);
            map.put("msg","此用户可以使用");
        }
        resp.setContentType("text/html;charset=utf-8");
        ObjectMapper objectMapper = new ObjectMapper();
        //objectMapper.writeValueAsString(map) 拿到字符串不返回
        //map(java对象)转换成json，
        objectMapper.writeValue(resp.getWriter(),map);

    }
}

实例2、显示省，市，区

package com.situ.web.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.situ.web.pojo.City;
import com.situ.web.pojo.Province;
import com.situ.web.pojo.Area;
import com.situ.web.util.JDBCUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/ajax3")
public class Ajax3Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String method = req.getParameter("method");
        switch (method){
            case "selectProvince":
                selectProvince(req,resp);
                break;
            case "selectCity":
                selectCity(req,resp);
            case "selectArea":
                selectArea(req,resp);
            default:
                System.out.println("Ajax3Servlet.service");
                break;
        }
    }

    private void selectArea(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String cityId = req.getParameter("cityId");
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        List<Area> list = new ArrayList<>();
        try {
            connection = JDBCUtil.getConnection();
            String sql = "select id,area,city_id from tm_area where city_id=?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1, Integer.parseInt(cityId));
            System.out.println(statement);
            resultSet = statement.executeQuery();
            while (resultSet.next()) {
                int id = resultSet.getInt("id");
                String area = resultSet.getString("area");
                Area a = new Area(id,area,Integer.parseInt(cityId));
                list.add(a);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }

        resp.setContentType("text/html;charset=utf-8");
        ObjectMapper objectMapper = new ObjectMapper();
        objectMapper.writeValue(resp.getWriter(), list);
    }

    private void selectCity(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String provinceId = req.getParameter("provinceId");
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        List<City> list = new ArrayList<>();
        try {
            connection = JDBCUtil.getConnection();
            String sql = "select id,city,province_id from tm_city where province_id=?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1, Integer.parseInt(provinceId));
            System.out.println(statement);
            resultSet = statement.executeQuery();
            while (resultSet.next()) {
                int id = resultSet.getInt("id");
                String city = resultSet.getString("city");
                City ci = new City(id, city, Integer.parseInt(provinceId));
                list.add(ci);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }

        resp.setContentType("text/html;charset=utf-8");
        ObjectMapper objectMapper = new ObjectMapper();
        objectMapper.writeValue(resp.getWriter(), list);
    }

    private void selectProvince(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        Connection connection=null;
        PreparedStatement statement= null;
        ResultSet resultSet =null;
        List<Province> list=new ArrayList<>();

        try {
            connection= JDBCUtil.getConnection();  //JDBCUtil工具类建立链接
            String sql = "select id,province from tm_province";//写sql语句
            statement=connection.prepareStatement(sql);//执行sql语句
            System.out.println(statement);
            resultSet=statement.executeQuery();//executeQuery将执行结果保存到resultSet中
            while(resultSet.next()){//如果不为空，得到各个值，存到表单中
                int id=resultSet.getInt("id");
                String province = resultSet.getString("province");
                Province provin=new Province(id,province);
                list.add(provin);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
resp.setContentType("text/html;charset=utf-8"); //规范编码
        ObjectMapper objectMapper = new ObjectMapper();  //new objectMapper对象
        objectMapper.writeValue(resp.getWriter(),list); //response.getWriter()响应信息通过生成的对象输出到网页上，当响应结束时它自动被关闭，与jsp页面无关，无需刷新页面
                                                       //形象的比喻：当我们调用response.getWriter()这个对象同时获得了网页的画笔，这时你就可以通过这个画笔在网页上画任何你想要显示的东西。

    }
}

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2022/7/28
  Time: 9:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
省份：<select id="provinceId"></select>
城市：<select id="cityId">
    <option>----请选择城市----</option>
</select>
区县：<select id="areaId">
    <option>----请选择地区----</option>
</select>
<script src="static/js/jquery-2.1.4.js"></script>
<script type="text/javascript">
    $(function (){  //ajax表单
        $.post(    //post请求
            '<%=request.getContextPath()%>/ajax3?method=selectProvince',  //url地址
            function (jsonObj){
                console.log(jsonObj);
                //19: {id: 450000, province: '广西壮族自治区'}
               // 20: {id: 460000, province: '海南省'}
                // for(var i=0;i<jsonObj.length;i++){
                //
                // }
                $(jsonObj).each(function (){  //callback：表示服务器端成功响应所触发的函数
                    //this
                    //<option value='460000'>海南省<option>
                    $('#provinceId').append('<option value="'+this.id+'">'+this.province+'</option>'); //选择省份id在后面添加option，value='this.id' ,信息即省份
                });
            },
            'json'  //type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）  常用的返回类型：text、json、html等

        );
        $('#provinceId').change(function() {   //('#')id选择器
            var provinceId = $('#provinceId').val();
            $('#cityId option:gt(0)').remove();   //gt(0)表示，大于option组第0个，（从第一个开始）移除后面的消息，只保留<option>----请选择城市----</option>
                                                 //这样可以在更换省份的时候仅保留更换后显示的城市
            $.post(
                '<%=request.getContextPath()%>/ajax3?method=selectCity',
                {'provinceId': provinceId},  //获取省份来查看城市
                                            // data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
                function (jsonObj) {       //callback：表示服务器端成功响应所触发的函数
                    console.log(jsonObj);
                    $(jsonObj).each(function () {
                        $('#cityId').append('<option value="' + this.id + '">' + this.city + '</option>');
                    });
                },
                'json'
            );
        });
        $('#cityId').change(function (){
           var cityId=$('#cityId').val();
           $('#areaId option:gt(0)').remove();
           $.post(
               '<%=request.getContextPath()%>/ajax3?method=selectArea',
               {'cityId':cityId},
               function (jsonObj){
                   console.log(jsonObj);
                   $(jsonObj).each(function (){
                      $('#areaId').append('<option value="' + this.id + '">' + this.area + '</option>')
                   });
               },
               'json'

           );
        });

    });
</script>
</body>
</html>