【ajax】8.jQuery：jQuery发送AJAX请求+jQuery通用方法发送AJAX请求

最新推荐文章于 2024-04-09 10:00:00 发布
最新推荐文章于 2024-04-09 10:00:00 发布
阅读量330 收藏 1
点赞数
分类专栏： ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43210113/article/details/110821496
版权

〇、前情提要

在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。

参考：

  1. 我的笔记：
    【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记
    https://blog.csdn.net/weixin_43210113/article/details/110628389
  2. b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版）
    https://www.bilibili.com/video/BV1WC4y1b78y?p=2
  3. 笔记视频链接
    链接：https://pan.baidu.com/s/1Wnwb42-AaqAlg6cQ0PRHwg
    提取码：3waj
  4. BootCDN
    https://www.bootcdn.cn
  5. BootCDN - jquery
    https://www.bootcdn.cn/jquery/
  6. BootCDN - css
    https://www.bootcdn.cn/twitter-bootstrap/
  7. ajax > $.ajax(url,[settings])
    https://jquery.cuishifeng.cn/jQuery.Ajax.html

一、jQuery发送AJAX请求

如没有安装过NodeJS和expressjs请看↓

我的笔记：
【ajax】NodeJS的安装与介绍+express框架介绍与基本使用
https://blog.csdn.net/weixin_43210113/article/details/110636188

如没有安装过nodemon请看

我的笔记：
【ajax】5.JSON：服务端响应JSON数据+nodemon自动重启工具安装+Missing write access to /usr/local/lib/node_modules解决方法
https://blog.csdn.net/weixin_43210113/article/details/110792442

页面布局

在这里插入图片描述
点击相应的按钮，发送不同的请求。get/post/通用型方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
    </script>
</body>
</html>
资源引入jquery

BootCDN
https://www.bootcdn.cn

BootCDN - jquery
https://www.bootcdn.cn/jquery/
在这里插入图片描述

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

css来自

BootCDN - css
https://www.bootcdn.cn/twitter-bootstrap/
在这里插入图片描述

<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

在这里插入图片描述
crossorigin=“anonymous” 补习

CORS settings attributes
https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes
在非同源情况下，设置 “anonymous” 关键字将不会通过 cookies，客户端 SSL 证书或 HTTP 认证交换用户凭据。

加了crossorigin="anonymous"后浏览器不会报警告

1.get

为button绑定事件
<script>
    $('button').eq(0).click(function(){
        $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
            console.log(data);
        });
    });
</script>

eq() 选择器补习

jQuery :eq() 选择器
https://www.w3school.com.cn/jquery/selector_eq.asp
$("p:eq(1)"). 与 $('p').eq(1). 相同

jQuery get() 方法 补习

jQuery get() 方法
https://www.runoob.com/jquery/ajax-get.html
$.get(URL,data,function(data,status,xhr),dataType)

server.js
//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
//jQuery 服务
app.get('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('Hello jQuery AJAX');
});

//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

获得参数、有详细数据交换
在这里插入图片描述
请求头有参数
在这里插入图片描述
console里有输出
在这里插入图片描述

2.post

client.html

添加第二个post按钮绑定事件

$('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            });
        });
server.js

把get改为all，可以get post都接受

//3. 创建路由规则
//jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('Hello jQuery AJAX');
});

在这里插入图片描述
数据在form data中
在这里插入图片描述

第四个参数 json

client.html
<script>
    $('button').eq(0).click(function(){
        $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
            console.log(data);
        },'json');
    });
</script>
server.js
//jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

在这里插入图片描述
加了’json’是个对象，没有加则是字符串

client.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            },'json');
        });

        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            });
        });
    </script>
</body>
</html>
server.js
//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
//jQuery 服务
app.get('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

二、jQuery通用方法发送AJAX请求

3.通用方法 ajax

client.html
        $('button').eq(2).click(function(){
            $.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //成功的回调
                success: function(data){
                    console.log(data);
                },
            });
        });
server.js
//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
//jQuery 服务
app.get('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

返回字符串
在这里插入图片描述
因为没有设置响应体结果的类型
添加上

//响应体结果
dataType: 'json'

即可得到一个对象
在这里插入图片描述
设置失败的回调

				//超时时间
                timeout: 2000,
                //失败的回调
                error: function(){
                    console.log('出错啦!!');
                }

可以将url改到delay上测试
在这里插入图片描述
在这里插入图片描述
添加头信息

				//头信息
                headers: {
                    c:300,
                    d:400
                }

由于是自定义请求头，非预定义，需要

//3. 创建路由规则
//jQuery 服务
app.get('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});
最终代码如下：
client.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            },'json');
        });

        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            });
        });
        
        $('button').eq(2).click(function(){
            $.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function(){
                    console.log('出错啦!!');
                },
                //头信息
                headers: {
                    c:300,
                    d:400
                }
            });
        });

    </script>
</body>
</html>
server.js
//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
//jQuery 服务
app.get('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});
绝不做九漏鱼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中实现AJAX请求
weixin_62922379的博客
05-18 796
以上是jQery对Ajax发送请求里面 可能涉及到jQuery,bootstrap,axios, 如果不想去下载 我们可以。type：设置返回内容格式，xml, html, script, json, text, _default。中找到对应的在线链接 我们使用的时候使用标签引入即可。callback：请求的载入成功时的回调函数。里面的参数与get请求一致。// 配置baseURL。url:请求的url地址。data:请求的参数。
Jquery使用Ajax发送请求的四种方式
m0_67679339的博客
10-12 917
(记录) 方便回忆。
Ajax学习笔记（二）：jQuery 中的 AJAX、axios发送AJAX请求、AJAX-jQuery通用方法发送AJAX请求、fetch发送AJAX请求、同源策略、JSONP、CORS
最新发布
weixin_62764364的博客
04-09 1068
type:设置返回内容格式，xml, html, script, json, text, _default。实现用户校验，服务端响应体是一个函数，先声明handle函数，然后创建script标签，利用src属性请求数据。type:设置返回内容格式，xml, html, script, json, text, _default。AJAX默认遵循同源策略。这是一个跨原的一个请求的设置，匿名的意思，加上这个请求时将不会写在当前域名的。案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持。
jQuery发送Ajax请求
Nxin的小抄本
04-23 12万+
Ajax用于浏览器与服务器通信而无需刷新整个页面，服务器将不再返回整个页面，而是返回少量数据，通过JavaScript DOM更新一部分节点。期间数据传输可采用xml，json等格式，Ajax最早用于谷歌的搜索提示。 其实不刷新整个页面便可与服务器通信的方法有很多，比如Flash，Java applet，iframe等，但Ajax是目前最为常见的一种。 我们可以使用JavaScript扩展对象XMLHttpRequest实现Ajax，对于这种方法在这里不做介绍，下面直接了解jQuery实现Ajax的几种
jQuery的AJAX之POST 请求
m0_51281306的博客
04-04 1万+
$.post() • POST 请求快捷方法 • $.post(url, data, callback) <script src="js/jquery-1.12.4.min.js"></script> <script> // 发送 post 请求 // $.ajax({ // url: "http://localhost:3000/comments", // type: "post", // data...
jquery跨域请求示例分享(jquery发送ajax请求)
10-26
主要介绍了jquery跨域请求示例(jquery发送ajax请求),需要的朋友可以参考下
js与jQuery终止正在发送的ajax请求的方法
01-19
本文实例讲述了js与jQuery终止正在发送的ajax请求的方法。分享给大家供大家参考，具体如下： 核心：调用XMLHttpRequest对象上的abort方法 jquery的ajax方法有自己的超时时间设置参数： $.ajax({type:'POST', url:'...
JQuery发送ajax请求时中文乱码问题解决
10-15
主要介绍了JQuery发送ajax请求时中文乱码问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
jquery中AJAX请求 $.post方法的使用
10-23
使用jQuery的$.post方法可以以POST形式向服务器发起AJAX请求.本篇文章主要给大家讲解jquery中AJAX请求 $.post方法的使用，需要的朋友可以参考下
jQuery实现监控页面所有ajax请求的方法
10-23
本篇文章将深入探讨如何使用jQuery实现监控页面上所有Ajax请求的方法，这对于调试、性能优化或者集成测试等场景非常有用。 首先，我们需要了解jQuery中的Ajax请求方式，包括`$.ajax`、`$.get`、`$.post`、`$.get...
the server responded with a status of 404 (Not Found)
夏至的博客
05-26 8万+
count(*)不能分开写
JQuery 的 Ajax 请求(重点****)
一个菜鸡的博客
10-24 250
【代码】JQuery 的 Ajax 请求(重点****)
html 按键出发json,如何通过单击HTML按钮通过POST请求调用JSON？
weixin_42342206的博客
06-30 2161
我试图通过点击从我的HTML文档中的按钮通过Json调用POST请求，但它返回了一个错误404，也许JSON请求这是这里的问题或者Jquery代码，我真的不知道。如何通过单击HTML按钮通过POST请求调用JSON？API服务器已存在并准备就绪。 我只是想让一些直接发送到API服务器的Json文件的请求“快捷链接”。 我试图使用的代码如下：$jq1 = $.noConflict(true);$jq...
ajax和JSON格式串传输数据时浏览器获取不到服务器返回的信息
weixin_41963554的博客
11-09 559
ajax传数据时浏览器获取不到服务器返回的信息 业务是发布帖子，通过前台获取到帖子数据，插入数据库，成功则弹出成功提示，并刷新页面。 错误是：通过前台获取到帖子数据，插入数据库没有问题，但不会弹出成功提示和刷新页面。 F12看报这个错 POST http://localhost:8080/community/discuss/add 500 jquery-3.3.1.min.js:2 send @ jquery-3.3.1.min.js:2 ajax
ajax的post请求前端传值,jdango ajax 发送post请求 前端报错解决
weixin_28741099的博客
08-05 382
首先在from表单中加上{% csrf_token %}如果还出现POST http://127.0.0.1:8000/login/ 403 (Forbidden)send @ jquery.min.js:6ajax @ jquery.min.js:6(anonymous) @ (index):37dispatch @ jquery.min.js:5y.handle @ jquery.min.js...
jQuery基础7-Ajax请求
qq_41772754的博客
03-03 566
1.jQueryAjax请求 Asynchronous JavaScript and Xml(异步JavaScript和Xml) ajax 请求： $.ajax(url,[settings]) // 通过 HTTP 请求加载远程数据。 load(url,[data],[callback]) ...
ajax跨域问题（三种解决方案）
热门推荐
吴渣渣的博客
05-28 13万+
为什么会出现跨域 跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等 如何解决跨域问题 JSONP 　　JSONP
jQuery实现ajax请求
qq_49044908的博客
11-13 3988
jQuery实现ajax请求 在没学习jQuery之前,发送ajax是比较麻烦的一个过程,需要四个步骤,jQuery将这些个步骤简化了,使用起来更加方便快捷 相关函数 $.ajax() : 它是jQuery中实现ajax的核心函数 $.post() : 这个函数是使用post方式发送ajax请求 $.get() : 这个函数是使用get的方式发送ajax请求 $.post() 和 $.get() 它们都是在内部调用了 $.ajax() ,所以 $.ajax() 是核心函数 $.ajax() 的使用 这个
请帮我写出用jquery ajax请求192.168.200.10:8002的实例
07-14
当然可以！以下是一个使用 jQuery 的 Ajax 请求 192.168.200.10:8002 的示例代码： ```javascript $.ajax({ url: 'http://192.168.200.10:8002', method: 'GET', success: function(response) { // 请求成功，处理返回的数据 console.log(response); }, error: function() { // 请求失败，处理错误信息 console.log('请求失败'); } }); ``` 这个示例中使用了 jQuery 的 `$.ajax()` 方法来发送异步 GET 请求到指定的 URL。通过 `url` 参数指定请求的地址，`method` 参数指定请求的方法。在 `success` 回调函数中处理返回的数据，在 `error` 回调函数中处理错误信息。 请确保你的网络环境可以访问到该 IP 地址和端口，并根据实际情况修改代码中的 URL。另外，确保你已经引入了 jQuery 库。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值