AJAX&JSON

AJAX

概念

Asynchronous JavaScript And XML :异步的JavaScript 和 XML

异步和同步:

AJAX&JSON

Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量的数据交换,Ajax可以使网页实现异步更新。这意味着可以不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页如果需要更新内容,必须重新加载整个网页页面。

实现方式

JQeury实现方式

JQuery实现方式 语法 参数
$.ajax() $.ajax({键值对}) url:请求路径,type:请求方式,data:post请求方式参数seccess:响应成功后的回调函数,error:表示如果请求响应出现错误,会执行的回调函数
$.get() $.get(url,[data],[callback],[type]) url:请求路径,data:请求参数信息,callback:回调函数,type:响应结果类型
$.post() $.get(url,[data],[callback],[type]) url:请求路径,data:请求参数信息,callback:回调函数,type:响应结果类型

$.ajax()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/jquery-migrate-1.0.0.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script>
       function f() {
            //使用$.ajax()发送异步请求
           $.ajax({
               url:"ajaxServlet",//请求的路径
               type:"POST",//请求方式
               //data:"username=jack&age=23",//第一种方式:post请求方式携带的参数
               data:{"username":"jack","age":23},
               success:function (data) {
                alert("data");
               },//服务器响应成功后的回调函数
               error:function () {
                    alert("出错啦");
               }//表示如果出错后会执行的回调函数
           })
       }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="f();">
<input type="text">
</body>
</html>

JSON

概念

JavaScript Object Notation JavaScript对象表示法

Json现在多用于存储和交换文本信息的语法即存储数据后进行数据的传输。

语法

基本规则

  • 数据在名称/值对中:json数据是由键值对构成的,键用引号(单双都行)引起来,也可以不适用引号。json的值可以是字符串,数字,对象(JSON 对象),数组,布尔,null。
  • 数据由逗号分隔: 多个键值对由逗号分隔
  • 花括号容纳对象 :使用{}定义json格式
  • 方括号容纳数组 :[ ]

获取数据

1. json对象.键名

2.json对象["键名"]

3.数组对象[索引]

   <script>
        //1.定义基本格式
        var person = {"name":"张三","age":23,"gender":true};
        //获取name的值
        //var name = person.name;
        //var name2 = person["name"];
       //2.嵌套格式{}---->[]
        var persons = {
            "persons":[
            {"name":"张三","age":23,"gender":true},
            {"name":"李四","age":23,"gender":true},
            {"name":"王五","age":23,"gender":true}]
        };
        //获取王五对应的信息
       // var name = persons["persons"][2].name;
        //3.嵌套格式[] ----->  {}
        var ps = [{"name":"张三","age":23,"gender":true},
            {"name":"李四","age":23,"gender":true},
            {"name":"王五","age":23,"gender":true}];
        //获取李四的信息
            // var name = ps[1].name;
            
    </script>

遍历获取json对象及数组

  <script>

        var person = {"name":"张三","age":23,"gender":true};

        var ps = [{"name":"张三","age":23,"gender":true},
            {"name":"李四","age":23,"gender":true},
            {"name":"王五","age":23,"gender":true}];
   //获取person对象中的所有键和值
        //key指的是键的名称,key默认是字符串,带有引号
        for(var key in person){
            alert(key+":"+person[key]);
        }
//获取ps数组中的所有键和值
        for (var i = 0; i < ps.length; i++) {
            var p  = ps[i];
            for (var key in p){
                alert(key +":"+p[key])
            }
        }
    </script>

Json数据和Java对象的相互转换

解析器

常见的解析器:Jsonlib,Gson,fastjson,jackson(此次我们使用的是jackson)

Java对象转换为JSON

使用步骤:

1.导入jackson的相关jar包

2.创建Jackson核心对象ObjectMapper

3.调用ObjectMapper的相关方法进行转换

注解:

1.@JsonIgnore:排除属性

2.@JsonFormat:属性值的格式化

 

package domain;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;

import java.util.Date;

public class Person {
    private String name;
    private int age;
    private String gender;
//    @JsonIgnore——方法1:忽略该属性
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    @Override
    public String toString() {
        return "Person{" + "name='" + name + '\'' + ", age=" + age + ", gender='" + gender + '\'' + '}';
    }

    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 getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }
}

 

public class jacksonTest2 {
    @Test
    public void test1() throws Exception {
        //1.创建person对象
        Person p = new Person();
        p.setAge(34);
        p.setGender("男");
        p.setName("张三");
        p.setBirthday(new Date());
      //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(p);
        //生日格式为毫秒值,不友好
        System.out.println(json);

    }

}

List对象转换为Json

package Test;
import com.fasterxml.jackson.databind.ObjectMapper;
import domain.Person;
import org.junit.Test;

import java.io.File;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

public class jacksonTest3 {
//Java对象转为JSON字符串
    @Test
    public void test1() throws Exception {
        //1.创建person对象
        Person p = new Person();
        p.setAge(34);
        p.setGender("男");
        p.setName("张三");
        p.setBirthday(new Date());

        Person p2 = new Person();
        p2.setAge(34);
        p2.setGender("男");
        p2.setName("张三");
        p2.setBirthday(new Date());

        Person p3 = new Person();
        p3.setAge(34);
        p3.setGender("男");
        p3.setName("张三");
        p3.setBirthday(new Date());
     //创建List集合
        List<Person> ps = new ArrayList<Person>();
        ps.add(p);
        ps.add(p2);
        ps.add(p3);
        //转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(ps);
        System.out.println(json);
    //[{"name":"张三","age":34,"gender":"男","birthday":"2022-01-14"},{"name":"张三","age":34,"gender":"男","birthday":"2022-01-14"},{"name":"张三","age":34,"gender":"男","birthday":"2022-01-14"}]

    }

}

Map对象转换为Json

public class jacksonTest4 {
//Java对象转为JSON字符串
    @Test
    public void test1() throws Exception {
     //创建List集合
        Map<String,Object> map = new HashMap<String,Object>();
       map.put("name","张三");
       map.put("age",34);
       map.put("gender","男");
        //转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        System.out.println(json);
//{"gender":"男","name":"张三","age":34}
    }

}

JSON转换为Java对象

步骤:

1.导入jackson的相关jar包

2.创建Jackson核心对象ObjectMapper

3.调用ObjectMapper的相关方法进行转换

 

package Test;

import com.fasterxml.jackson.databind.ObjectMapper;
import domain.Person;
import org.junit.Test;

import java.util.HashMap;
import java.util.Map;

public class jacksonTest5 {
    @Test
    public void test1() throws Exception {
        //初始化Json字符串
String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":34}";
ObjectMapper mapper = new ObjectMapper();
        Person person = mapper.readValue(json, Person.class);
        System.out.println(person);

    }
}

上一篇:页面POST请求302重定向解决方案


下一篇:Web大前端之Jquery