javaWeb基础六：JQuery—Ajax异步请求

最新推荐文章于 2022-01-21 19:57:56 发布

最好的硕硕

最新推荐文章于 2022-01-21 19:57:56 发布

阅读量442

点赞数

分类专栏： javaWeb基础文章标签： ajax jquery java

本文链接：https://blog.csdn.net/DengShuo_shuai/article/details/120528027

版权

javaWeb基础专栏收录该内容

13 篇文章 5 订阅

订阅专栏

JQuery 之 Ajax 异步请求

1.1 Ajax简介

1.1.1 不使用Ajax存在的问题

在发送请求得到响应时，我们常常只需要刷新网页局部的数据，而不是整个网页的资源（在网页资源过大时，效率会大大降低。），这就导致了资源的浪费，也给浏览器增加了更大的渲染压力。
我们在刷新页面的时候他会自动的保存原来的网页的内容这样一来相当于重复的保存了当前的这个页面。

在这种情况下 Ajax应运而生。

1.1.2 什么是Ajax

Ajax本身就是浏览器的一个内置对象这个对象是位于浏览器的内部我们的浏览器只要支持Ajax 那么我们就可以通过这个Ajax对象来进行HTTP请求的发送

Ajax简单的说就是一个用来发送HTTP请求的工具
实际上：Ajax是用来进行网页上局部刷新的一门技术

1.2 JSON 的使用

1.2.1 什么是JSON

通俗来讲，JSON可以被认为是对数据的格式约束，他就是一种数据格式

1.2.2 JSON的运用

JSON可以表示对象和数组，而在表示对象和数组时，都是可以相互嵌套的，只要满足JSON数据的格式，就是一个正确的JSON字符串。

表示对象使用{}修饰：(":“之前为key，”:“之后为value，不同属性之间使用”,"隔开)

示例：

{
  "username":"zuihaodeshuoshuo",
  "password":"123456"
}

表示数组使用[]修饰：(数组值之间使用","隔开，示例中的数组值为字符串)

示例：

[
  "user1","user2","user3"
]

JSON对象和数组的相互嵌套

//对象中嵌套数组
{
	"username":"zuihaodeshuoshuo",
	"password":"123456",
   	"hobby":["吃饭","睡觉","打豆豆"]
}

//数组中嵌套对象
[
    {
        "username":"zuihaodeshuoshuo",
        "password":"123456",
        "hobby":["吃饭","睡觉","打豆豆"]
    },
    "user2",
    "user3"
]

1.2.3 java 中操作JSON

JSON数据格式在多种语言中都支持，java自然也不例外。

在java中操作JSON，我们常常使用阿里给我们提供的jar包。

导入包（com.alibaba.fastjson）

使用maven可加入依赖如下：

<!--alibaba的JSON依赖-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.47</version>
</dependency>

1.2.4 示例

User类

public class User {
    private int id;
    private String name;
    private String password;

    public User() {
    }

    public User(int id, String name, String password) {
        this.id = id;
        this.name = name;
        this.password = password;
    }

    public int getId() {
        return id;
    }

    public String getName() {
        return name;
    }

    public String getPassword() {
        return password;
    }

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

测试示例：

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.dream.pojo.User;
import com.dream.result.R;
import org.junit.jupiter.api.Test;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class Test_1 {

    /**
     * 创建JSON对象，装入数据。
     */
    @Test
    public void test01(){

        //创建JSON对象
        JSONObject jsonObject = new JSONObject();
        //向JSON对象中添加数据
        jsonObject.put("username","最好的硕硕");
        jsonObject.put("password","123");

        //在JSON对象中装入JSON对象
        JSONObject jsonObject1 = new JSONObject();
        jsonObject1.put("语文",100);
        jsonObject1.put("数学",100);
        jsonObject.put("course",jsonObject1);
        //以字符串形式输出JSON对象
        System.out.println("JSON对象的内容时候："+jsonObject.toJSONString());
    }

    /**
     * 创建JSON数组
     */
    @Test
    public void test02(){

        //创建JSON数组对象
        JSONArray objects = new JSONArray();

        //向数组中添加数据
        objects.add("滴滴");
        objects.add("嘿嘿");
        objects.add(100);

        //在JSON数组中添加JSON对象
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("a",1);
        jsonObject.put("b",2);
        objects.add(jsonObject);

        //以字符串形式输出JSON数组
        System.out.println("JSON的内容是："+objects.toJSONString());

    }

    /**
     * 添加User对象集合转化为JSON格式
     */
    @Test
    public void test03(){
        //模拟从数据库中读出User对象的集合
        ArrayList<User> users = new ArrayList<>();
        //添加数据
        for (int i = 0; i < 3; i++) {
            users.add(new User(i,"硕硕"+i,"123"+i));
        }

        //将集合转化为JSON格式的字符串
        System.out.println(JSON.toJSONString(users));

    }
    /**
     * JSON格式转化为java对象
     */
    @Test
    public void test04(){
        //模拟从数据库中读出User对象的集合
        ArrayList<User> users = new ArrayList<>();
        //添加数据
        for (int i = 0; i < 3; i++) {
            users.add(new User(i,"硕硕"+i,"123"+i));
        }

        //将集合转化为JSON格式的字符串
        String jsonString = JSON.toJSONString(users);
        List<User> users1 = JSON.parseArray(jsonString, User.class);

        System.out.println(users);

    }
    @Test
    public void test05(){
        //创建数据
        HashMap<String, Object> hashMap = new HashMap<>();
        hashMap.put("语文",100);
        hashMap.put("数学",100);

        R r = R.ok().data(hashMap).data("name","硕硕");

        System.out.println(JSON.toJSONString(r));

    }
}

1.3 Ajax在JQuery中的使用

注：JQuery导包

<!--这里导入JQuery的相关的包-->
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

src为JQuery包的位置。

1.3.1 jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中(只改变被选中的元素)

语法： $(selector).load(URL,data,callback);

URL：Ajax请求的地址

data：发送的数据（可选）

callback：load方法请求之后的回调方法（该方法中有一些默认的参数可以使用：见下表）（可选）

常见参数	内容
第一个参数：responsedata	请求成功之后，从后端返回的数据
第二个参数：statusTxt	请求的状态success
第三个参数：xhr	包含XML HttpRequest对象

注：在function中的三个参数跟位置有关，命名可以随意，三个参数依次出现，从第一个参数到第三个参数。（可写全三个，也可只写一个…）

示例：

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responsedata,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

<div id="div1">
    输入账号和密码
</div>
<a href="PageServlet">点击跳转</a><br>

账号：<input type="text" id="name"><br>
密码：<input type="password" id="password"><br>
<input type="button" value="点击提交" οnclick="fun01()">
<script type="text/javascript">
    function fun01(){
        $("#div1").load("AjaxServlet",{"name":$("#name").val(),"password":$("#password").val()},function (responsedata){
            $("#div1").text(responsedata)
        })
    }
</script>

注：load方法中，Ajax发送给请求地址的data数据，使用JSON格式，但在后端还是以键值对接受（如同表单提交）。

1.3.2 JQuery ajax()方法

使用ajax方法时，可以很简便的设置请求的头部信息，常见的头部信息有：

标识	含义
url	请求地址
type	请求方式（get/post）
async	是否发送异步请求(默认为true)
contentType	传输数据的格式（默认是：“application/x-www-form-urlencoded” 即表单格式发送）（JSON格式发送：“application/json;charset=utf-8”）
data	传输的数据
dataType	返回的数据需要打包的格式（常常设置为：“json”）
error:function (xhr,status,error)	请求失败后运行的函数
success:function (data,status,xhr)	请求成功后运行的函数

示例：

function initListener() {
    $(":button").click(function () {
        //接下来就要获取值了
        var userName= $("#userName").val();
        var password= $("#password").val();
        var id=$("#id").val();
        var data={
            "userName":userName,
            "id":id,
            "password":password
        }
        //接下来发送Ajax请求来进行数据的更新
        $.ajax({
            url:"/UserServlet?methodName=update",    //请求地址
            type:"POST",     //请求方法
            async:true,      //是否发送异步请求
            contentType:"application/x-www-form-urlencoded",  //传输数据的格式是表单
            data:data,   //传输的数据
            dataType:"json",  //告诉他返回来的数据 需要整成JSON格式
            error:function (ajax,status,error) {    //请求出错之后的回调函数
                console.log("错误信息是:"+error);
            },
            success:function (data,status,ajax) {  //请求成功之后的回调函数
                console.log("添加:后台返回的数据是:"+data)
                //执行到这个位置
                //说明添加用户是成功的
                if(data.code==0){
                    //说明需要跳转到首页
                    location.href="/page.html";
                }
            }
        })

    })
}

1.3.3 后端对JSON格式的请求处理

当前端发送请求的数据为JSON数据格式时，在后端需要以流的形式接受。

示例：

private String getJSON(HttpServletRequest req) throws IOException {

    //处理编码格式
    req.setCharacterEncoding("UTF-8");
    //获取前端传来的JSON
    ServletInputStream inputStream = req.getInputStream();
    //设置接受数据的byte数组大小为8192，一般不会超过这么大。
    byte [] buf = new byte[8192];
    inputStream.read(buf);
    return new String(buf,"UTF-8");
}

也可以使用BufferedReader读取

private String getJSON(HttpServletRequest req) throws IOException {

    //处理编码格式
    req.setCharacterEncoding("UTF-8");
    //获取前端传来的JSON
    StringBuffer jsonStr = new StringBuffer();
    BufferedReader reader = req.getReader();
    String line = null;
    while ((line = reader.readLine()) != null) {
        jsonStr.append(line);
    }
    return jsonStr.toString();
}

1.3.4 后端发送JSON格式数据给前端

public static void sendResponse(HttpServletRequest req, HttpServletResponse resp, R r) throws IOException {
    resp.setContentType("application/json;charset=utf-8");//指定返回的格式为JSON格式
    PrintWriter writer = resp.getWriter();
    writer.write(JSON.toJSONString(r));
    writer.flush();
    writer.close();
}

最好的硕硕

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javaWeb基础六：JQuery—Ajax异步请求

JQuery 之 Ajax 异步请求1.1 Ajax简介1.1.1 不使用Ajax存在的问题在发送请求得到响应时，我们常常只需要刷新网页局部的数据，而不是整个网页的资源（在网页资源过大时，效率会大大降低。），这就导致了资源的浪费，也给浏览器增加了更大的渲染压力。我们在刷新页面的时候他会自动的保存原来的网页的内容这样一来相当于重复的保存了当前的这个页面。在这种情况下 Ajax应运而生。1.1.2 什么是AjaxAjax本身就是浏览器的一个内置对象这个对象是位于浏览器的内部我们的浏
复制链接

扫一扫