最近所学的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）.get(url, [data], [callback], [type]) 后面三个是可选的可以没有 2）.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:value2...);语法：.ajax( { option1:value1,option2:value2... } ); 语法：.ajax(option1:value1,option2:value2...);语法：.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的核心对象  ObjectMapperObjectMapper 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 {@Overrideprotected 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 {@Overrideprotected 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: dellDate: 2022/7/28Time: 9:08To 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>