JavaWeb基础专项复习6(2)——AJAX补充

目录

[1、load(url, data, callback)](#1、load(url, [data], [callback]))

[1.1 语法](#1.1 语法)

1.2概述

1.3参数

url,data,\[callback]String,Map/String,CallbackV1.0

1.4示例

[HTML 代码:](#HTML 代码:)

[jQuery 代码:](#jQuery 代码:)

[2、get(url, data, callback, type)](#2、get(url, [data], [callback], [type]))

[2.1 语法](#2.1 语法)

[2.2 概述](#2.2 概述)

[2.3 参数](#2.3 参数)

url,data,callback,typeString,Map,Function,StringV1.0

[2.4 示例](#2.4 示例)

[3、post(url, data, callback, type)](#3、post(url, [data], [callback], [type]))

[3.1 语法](#3.1 语法)

[3.2 概述](#3.2 概述)

[3.3 参数](#3.3 参数)

url,data,callback,typeString,Map,Function,StringV1.0

[3.4 示例](#3.4 示例)


发送AJAX请求的一些其他方法

1、load(url, data , callback)

1.1 语法

javascript 复制代码
jQuery.load(url, [data], [callback])

1.2概述

载入远程 HTML 文件代码并插入至 DOM 中。

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。

1.3参数

url,data,\[callback] String,Map/String,CallbackV1.0

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

1.4示例

加载文章侧边栏导航部分至一个无序列表。

HTML 代码:
javascript 复制代码
<div id="result"></div>
<button id="loadData">Load Data</button>
jQuery 代码:
javascript 复制代码
<script>
    $(document).ready(function () {
        $('#loadData').click(function () {
            $('#result')
                .load('test.jsp', function (responseText, statusText, xhr) {
                    if (statusText === 'success') {
                        console.log('数据加载成功');
                    } else if (statusText === 'error') {
                        console.log('请求出错: ' + xhr.status);
                    }
                })
                .css('color', 'red'); // 链式调用,设置加载内容的文本颜色为红色
        });
    });
</script>

在上述示例中,$('#result').load('test.html', ...) 调用 load() 方法从 test.html 文件加载数据并插入到 #result 元素中。由于 load() 方法返回一个 jQuery 对象,所以可以接着调用 css() 方法来设置加载内容的文本颜色为红色。

2、get(url, data , callback , type)

2.1 语法

javascript 复制代码
jQuery.get(url, [data], [callback], [type])

2.2 概述

通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 .ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 .ajax。

2.3 参数

url,data,callback,type String,Map,Function,StringV1.0

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式,xml, html, script, json, text, _default。

2.4 示例

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jQuery.get() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <button id="fetchData">Fetch Data</button>
    <div id="result"></div>
    <script>
        $(document).ready(function () {
            $('#fetchData').click(function () {
                $.get('https://jsonplaceholder.typicode.com/posts/1', function (data, textStatus, jqXHR) {
                    if (textStatus === 'success') {
                        $('#result').html(`
                            <p>标题:${data.title}</p>
                            <p>内容:${data.body}</p>
                        `);
                    }
                }, 'json');
            });
        });
    </script>
</body>

</html>

在上述示例中,点击按钮会触发 $.get() 请求,从 https://jsonplaceholder.typicode.com/posts/1 获取一篇文章的数据,并将文章的标题和内容显示在页面上。

3、post(url, data , callback , type)

3.1 语法

javascript 复制代码
jQuery.post(url, [data], [callback], [type])

3.2 概述

通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂 .ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 .ajax。

3.3 参数

url,data,callback,type String,Map,Function,StringV1.0

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式,xml, html, script, json, text, _default。

3.4 示例

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jQuery.post() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <button id="submitData">Submit Data</button>
    <div id="result"></div>
    <script>
        $(document).ready(function () {
            $('#submitData').click(function () {
                const jqXHR = $.post('https://jsonplaceholder.typicode.com/posts', {
                    title: 'foo',
                    body: 'bar',
                    userId: 1
                }, 'json');

                jqXHR.done(function (data) {
                    $('#result').html(`
                        <p>新文章 ID:${data.id}</p>
                        <p>标题:${data.title}</p>
                        <p>内容:${data.body}</p>
                    `);
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    $('#result').text('请求失败:' + errorThrown);
                });
            });
        });
    </script>
</body>

</html>

在这个示例中,点击按钮会触发 $.post() 请求,向 https://jsonplaceholder.typicode.com/posts 发送一篇新文章的数据,根据请求结果在页面上显示相应信息。

相关推荐
torpidcat几秒前
ruoyi-vue-pro 若依芋道 java springboot +mybatis 生日查询相关
java·vue.js·spring boot
jianpeng的工程笔记14 分钟前
Colab Kaggle 防断开脚本
javascript·深度学习·kaggle·colab
AC赳赳老秦15 分钟前
文旅市场公开数据分析:基于 OpenClaw 采集景区客流与门票公示数据,生成区域文旅热度监测报告
java·c语言·python·php·symfony·deepseek·openclaw
yume_sibai16 分钟前
CSS2 核心知识点完全总结(选择器 + 三大特性 + 常用属性)
前端·css
掘金者阿豪18 分钟前
不装 SSH 客户端也能连服务器:用 WebSSH 把终端搬进浏览器
前端
云小逸22 分钟前
C++ 第一阶段:对象、内存与生命周期
开发语言·c++
Bug修理工Bubble37 分钟前
Optional:为什么一个 String? 能让代码少掉很多崩溃?
前端
玖玥拾38 分钟前
Lua 基础语法(二)
开发语言·unity·lua
王的宝库42 分钟前
GO常用标准库包
开发语言·后端·golang
巴勒个啦1 小时前
2026 年 CSS 选型真相:我用 Tailwind v4 + 原生新特性重构了一个组件库
前端·angular.js