Ajax之个人记录

最新推荐文章于 2024-07-27 13:31:57 发布

DW-CHEN

最新推荐文章于 2024-07-27 13:31:57 发布

阅读量137

点赞数 2

文章标签： java ajax json javascript jquery

本文链接：https://blog.csdn.net/qq_42795277/article/details/108609581

版权

Ajax

Ajax(Asynchronous JavaScript And XML):异步的JavaScript和XML,本身不是一种新技术，而是多个技术的综合，用于快速创建动态网页的技术
一般的网页如果需要更新内容，必须重新加载整个页面，而Ajax通过浏览器与服务器进行少量数据交换，就可以是网页实现异步更新，也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新
同步：服务器端在处理过程中，无法进行其他操作
异步：服务器端在处理过程中，可以进行其他操作

统一处理乱码

package cn.cdw.demo.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @author DW-CHEN
 * 统一处理乱码问题
 */
@WebFilter("/*")
public class CharacterFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig)  {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)  {
        try {
            HttpServletRequest req = (HttpServletRequest)servletRequest;
            HttpServletResponse resp = (HttpServletResponse)servletResponse;

            req.setCharacterEncoding("UTF-8");
            resp.setContentType("text/html;charset=UTF-8");

            filterChain.doFilter(req, resp);

        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    @Override
    public void destroy() {

    }
}

jQuery的GET方式实现Ajax

核心语法

$.get(url,[data],[callback],[type])

url:请求的资源路径
data:发送给服务器端的请求参数，格式可以是key=value,也可以是js对象
callback:当请求成功后的回调函数，可以在函数中编写我们的逻辑代码
type:预期的返回数据类型，取值可以是xml,html,js,json,text等

jQuery的GET方式实现Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的GET请求方式实现Ajax</title>
</head>
<script src="/js/jquery-3.3.1.min.js"></script>
<body>
    用户名：<input type="username" name = "username" id="username"/><span id="sp1"></span> <br/>
    密码：<input type="password" name = "password" id = "password"><br/><br/>
    <input type="submit" id = "sub" value="提交"/>
</body>
<script>

    //当输入好用户名，鼠标失去焦点后使用Ajax自动调用servlet检查该用户输入的用户名是否有人使用过

    $("#username").blur(function (){//当用户名输入框鼠标失去焦点时执行下面ajax请求
        let usernameValue = $("#username").val();//获取用户名数据
        let data = "username="+usernameValue; //拼接好get请求的数据格式

        $.get( //jQuery的GET请求方式实现Ajax
            "servletDemo1",//url
            data,//发送的数据
            function (resData) { //回调函数，处理服务器的响应的回调函数
                $("#sp1").html(resData);//把服务器响应的数据设置到提示标签的文本中
            },
            "text" //响应数据格式
        );
    });

</script>
</html>

服务端处理

package cn.cdw.demo.servlet;

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;

/**
 * @author DW-CHEN
 * 处理Ajax请求
 *
 * 当输入好用户名，鼠标失去焦点后使用Ajax自动调用servlet检查该用户输入的用户名是否有人使用过
 */
@WebServlet("/servletDemo1")
public class Demo1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");

        if("小明".equals(username)){ //测试，如果用户名是小明则提示该用户名已经被使用
            resp.getWriter().write("<font color='red'>该用户名已经被使用</font>");
        }else {
            resp.getWriter().write("<font color='green'>该用户名可以使用</font>");
        }
    }
}

jQuery的POST方式实现Ajax

核心语法

$.post(url,[data],[callback],[type])

url:请求的资源路径
data:发送给服务器端的请求参数，格式可以是key=value,也可以是js对象
callback:当请求成功后的回调函数，可以在函数中编写我们的逻辑代码
type:预期的返回数据类型，取值可以是xml,html,js,json,text等

jQuery的POST方式实现Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的POST请求方式实现Ajax</title>
</head>
<script src="/js/jquery-3.3.1.min.js"></script>
<body>
用户名：<input type="username" name = "username" id="username"/><span id="sp1"></span> <br/>
密码：<input type="password" name = "password" id = "password"><br/><br/>
<input type="submit" id = "sub" value="提交"/>
</body>
<script>

    //当输入好用户名，鼠标失去焦点后使用Ajax自动调用servlet检查该用户输入的用户名是否有人使用过

    $("#username").blur(function () {
        let nameValue = $("#username").val();

        $.post( //jQuery的POST请求方式实现Ajax
            "servletDemo1",
            "username="+nameValue,
            function (resData) {
                $("#sp1").html(resData);//把服务器响应的数据设置到提示标签的文本中
            },
            "text"
        );
    });


</script>
</html>

服务端处理

package cn.cdw.demo.servlet;

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;

/**
 * @author DW-CHEN
 * 处理Ajax请求
 *
 * 当输入好用户名，鼠标失去焦点后使用Ajax自动调用servlet检查该用户输入的用户名是否有人使用过
 */
@WebServlet("/servletDemo1")
public class Demo1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");

        if("小明".equals(username)){ //测试，如果用户名是小明则提示该用户名已经被使用
            resp.getWriter().write("<font color='red'>该用户名已经被使用</font>");
        }else {
            resp.getWriter().write("<font color='green'>该用户名可以使用</font>");
        }
    }
}

jQuery的通用方式实现Ajax

核心语法

$.ajax({name:value,name:value,...})

url:请求的资源路径
async:是否异步请求，true-是，false-否（默认为true）
data:发送给服务器端的请求参数，格式可以是key=value,也可以是js对象
type:请求方式，POST或GET（默认是GET）
dataType:预期的返回数据类型，取值可以是xml,html,js,json,text等
success:请求成功时调用的回调函数
error:请求失败时调用的回调函数

jQuery的通用方式实现Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的通用方式实现Ajax</title>
</head>
<script src="/js/jquery-3.3.1.min.js"></script>
<body>
用户名：<input type="username" name = "username" id="username"/><span id="sp1"></span> <br/>
密码：<input type="password" name = "password" id = "password"><br/><br/>
<input type="submit" id = "sub" value="提交"/>
</body>
<script>

    //当输入好用户名，鼠标失去焦点后使用Ajax自动调用servlet检查该用户输入的用户名是否有人使用过
    $("#username").blur(function () {
        $.ajax({
           type:"post", //请求方式，默认为GET
           url:"servletDemo1",//请求路径
           //url:"servletDemo3daf", //测试出现异常
           data:"username=" + $("#username").val(),//请求数据
           dataType:"text",//响应数据格式
           async:true, //是否异步请求，默认为true
           success:function (respData) { //ajax请求成功执行该方法
               $("#sp1").html(respData);
           },
           error:function () { //ajax请求失败执行该方法
               alert("出现了异常.....")
           }
        });
    });


</script>
</html>

服务端处理

package cn.cdw.demo.servlet;

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;

/**
 * @author DW-CHEN
 * 处理Ajax请求
 *
 * 当输入好用户名，鼠标失去焦点后使用Ajax自动调用servlet检查该用户输入的用户名是否有人使用过
 */
@WebServlet("/servletDemo1")
public class Demo1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");

        if("小明".equals(username)){ //测试，如果用户名是小明则提示该用户名已经被使用
            resp.getWriter().write("<font color='red'>该用户名已经被使用</font>");
        }else {
            resp.getWriter().write("<font color='green'>该用户名可以使用</font>");
        }
    }
}

JSON的处理

JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式

创建格式

语法	说明
{name:value,name:value,…}	对象类型
[{name:value,name:value,…},{name:value,name:value,…},…]	数组/集合类型
{name: [{name:value,name:value,…},{name:value,name:value,…},…] }	混合类型

注意:name是字符串类型，value可以是任意类型

JavaScript中json的常用方法

方法名	说明
stringify(对象)	将指定的对象转换为json格式字符串
parse(字符串)	将指定json格式字符串解析成对象

JSON转换工具

JSON转换工具jar包下载地址：https://download.csdn.net/download/qq_42795277/12847200
Jackson:开源免费的JSON转换工具，SpringMVC转换默认使用Jackson,可以将Java对象或集合转换成JSON格式的字符串，也可以将JSON格式的字符串转换成Java对象

常用类

类名	说明
ObjectMapper	是Jackson工具包的核心类，它提供一些方法来实现JSON字符串和对象之间的转换
TypeReference	对集合泛型的反序列化，使用TypeReference可以明确的指定反序列化的对象类型

ObjectMapper常用方法

方法名	说明
String writeValueAsString(Object obj)	将Java对象转换为JSON字符串
<T> T readValue(String json,Class<T> valueType)	将JSON字符串转换为Java对象
<T> T readValue(String json,TypeReference valueTypeRef)	将JSON字符串转换为Java对象

package cn.cdw.demo.servlet;

import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.io.IOException;
import java.util.*;

/**
 * @author DW-CHEN
 * JSON工具的使用
 */
public class Demo2 {
    private ObjectMapper objectMapper = new ObjectMapper();

    @Test
    public void test1() throws IOException {//对象转json，json转对象
        User user = new User("小明","12");
        String userString = objectMapper.writeValueAsString(user);
        System.out.println("json："+userString);

        System.out.println("User对象："+objectMapper.readValue(userString,User.class));
    }

    @Test
    public void test2() throws IOException {//List<String>转json，json转List<String>
        List<String> list = new ArrayList<>();
        list.add("小明");
        list.add("小麦");
        list.add("小希");

        String json = objectMapper.writeValueAsString(list);
        System.out.println("json:" + json);
        System.out.println("List<String>:"+objectMapper.readValue(json,new TypeReference<List<String>>(){}));
    }


    @Test
    public void test3() throws IOException {//List<User>转json，json转List<User>
        List<User> list = new ArrayList<>();
        list.add(new User("小明", "23"));
        list.add(new User("小希", "22"));
        list.add(new User("小小", "21"));

        String json = objectMapper.writeValueAsString(list);
        System.out.println("json:"+json);
        System.out.println("List<User>:"+objectMapper.readValue(json,new TypeReference<List<User>>(){}));

    }


    @Test
    public void test4() throws IOException {//Set<String>转json，json转Set<String>
        Set<String> set = new HashSet<>();
        set.add("小明");
        set.add("小明");
        set.add("小李");
        set.add("小李");
        set.add("小小");
        set.add("小小");

        String json = objectMapper.writeValueAsString(set);
        System.out.println("json:"+json);
        System.out.println("Set<String>:"+objectMapper.readValue(json,new TypeReference<Set<String>>(){}));
    }


    @Test
    public void test5() throws IOException {//Set<User>转json，json转Set<User>
        Set<User> set = new HashSet<>();
        set.add(new User("小明", "23"));
        set.add(new User("小希", "22"));
        set.add(new User("小小", "21"));

        String json = objectMapper.writeValueAsString(set);
        System.out.println("json:"+json);
        System.out.println("Set<User>:"+objectMapper.readValue(json,new TypeReference<Set<User>>(){}));
    }


    @Test
    public void test6() throws IOException {//Map<String,String>转json，json转Map<String,String>
        Map<String, String> map = new HashMap<>();
        map.put("key1", "小明");
        map.put("key2", "小李");
        map.put("key3", "小小");

        String json = objectMapper.writeValueAsString(map);
        System.out.println("json:" + json);
        System.out.println("Map<String,String>:"+objectMapper.readValue(json,new TypeReference<Map<String,String>>(){}));

    }

    @Test
    public void test7() throws IOException {//Map<String,User>转json，json转Map<String,User>
        Map<String, User> map = new HashMap<>();
        map.put("key1", new User("小明", "12"));
        map.put("key2", new User("小小", "14"));
        map.put("key3", new User("小鹅", "21"));

        String json = objectMapper.writeValueAsString(map);
        System.out.println("json:"+json);
        System.out.println("Map<String,User>:"+objectMapper.readValue(json,new TypeReference<Map<String,User>>(){}));
    }

    @Test
    public void test8() throws IOException {//Map<String,List<User>>转json，json转Map<String,List<User>>
        Map<String, List<User>> map = new HashMap<>();

        List<User> list = new ArrayList<>();
        list.add(new User("小明", "23"));
        list.add(new User("小希", "22"));
        list.add(new User("小小", "21"));

        List<User> list1 = new ArrayList<>();
        list1.add(new User("晓晓", "23"));
        list1.add(new User("小麦", "22"));

        map.put("key1",list);
        map.put("key2",list1);

        String json = objectMapper.writeValueAsString(map);
        System.out.println("json:" + json);
        System.out.println("Map<String,List<User>>:"+objectMapper.readValue(json,new TypeReference<Map<String,List<User>>>(){}));
    }
}

class User{
    private String name;
    private String age;

    public User() {

    }
    public User(String name, String age) {
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

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

DW-CHEN

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax之个人记录

AjaxAjax(Asynchronous JavaScript And XML):异步的JavaScript和XML,本身不是一种新技术，而是多个技术的综合，用于快速创建动态网页的技术一般的网页如果需要更新内容，必须重新加载整个页面，而Ajax通过浏览器与服务器进行少量数据交换，就可以是网页实现异步更新，也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新同步：服务器端在处理过程中，无法进行其他操作异步：服务器端在处理过程中，可以进行其他操作统一处理乱码package cn.c
复制链接

扫一扫