前端后端交互系列之Jquery下的Ajax

目录

  • 前言
  • Jquery发送Ajax请求
    • 1. 引入jquery文件
    • 2. 页面结构
    • 3. 发送get请求
    • 4. 发送post请求
    • 5. 通用方法
  • 总结

前言

本篇文章讲解的是Jquery下的Ajax。Jquery到现今用的不是很多,但是会有老的项目依旧使用Jquery,所以了解用Jquery实现利用ajax进行交互是有必要的。并且Jquery对ajax进行了封装,用起来比原生Ajax更简单,语法格式也更偏向于主流的Axios。

在看这篇文章时,需要对Jquery有所了解,它是一个JavaScript库,封装了js让js的使用更加简单。如果想要了解可以参考文档:jQuery教程

本节内容讲解的是以Jquery为主的Ajax。如果对原生Ajax有疑问,可以查看博客:前端后端交互系列之原生Ajax的使用

Jquery发送Ajax请求

1. 引入jquery文件

引入文件的主要方式有两种,一种是从官网上下载jquery文档,然后引入;另一种是使用CDN引入:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

本篇博客采取的是CDN引入的方式引入Jquery。

2. 页面结构

我们一共要将jq下的ajax的三种用法,分别是发送get请求,post请求,和通用方法,所以页面结构如下:

    <div class="container">
        <h2>JQuery发送Ajax请求</h2>
        <button>GET</button>
        <button>Post</button>
        <button>通用</button>
    </div>

效果:
在这里插入图片描述

3. 发送get请求

首先来更新下后台跟get请求相关的代码:

//jquery下的ajax后台代码如下
app.get('/jquery-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('Hello Jquery Ajax')
})

接着是前台页面发起get请求:

            $('button').eq(0).click(() => {
                $.get('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200 }, (data) => {
                    console.log(data);
                })
            })

前台代码的格式如上。点击按钮后,第一个参数是请求url,第二个参数是传参,传参的姓氏是一个对象,第三个参数则是一个回调函数,接收服务器响应值。
最后的打印效果:
在这里插入图片描述

4. 发送post请求

发送post请求的方式于get十分类似。还是一样,先更新后台代码,这里我们传回去一个对象:

//post请求
app.post('/jquery-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    const data = {name: '巧克力小猫猿'}
    response.send(JSON.stringify(data))
})

前台发送请求,收到的参数需要经过处理:

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

最后的效果:
在这里插入图片描述

5. 通用方法

这种方法可以发送get请求,也可以发送post请求,调用ajax函数,函数内部是一个对象,对象内部分别是url,data,和type以及成功的回调函数。

            $('button').eq(2).click(() => {
                $.ajax({
                    //url
                    url: 'http://127.0.0.1:8000/jquery-server',
                    //发送参数
                    data: {a: 200, b: 300},
                    //请求类型
                    type: 'GET',
                    //成功的回调
                    success: (data) => {
                        console.log(data)
                    }
                })
            })

最后效果:
在这里插入图片描述

总结

以上就是jquery下的ajax的使用方法,本系列文章还有很多丰富内容,如原生ajax,axios,promise,nodejs等等,后期都会慢慢更新,欢迎关注。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/6358.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud微服务技术栈.黑马跟学(十二)

SpringCloud微服务技术栈.黑马跟学 十二今日目标服务异步通信-高级篇1.消息可靠性1.1.生产者消息确认1.1.1.修改配置1.1.2.定义Return回调1.1.3.定义ConfirmCallback1.2.消息持久化1.2.1.交换机持久化1.2.2.队列持久化1.2.3.消息持久化1.3.消费者消息确认1.3.1.演示none模式1.3…

蓝桥杯刷题冲刺 | 倒计时6天

作者&#xff1a;指针不指南吗 专栏&#xff1a;蓝桥杯倒计时冲刺 &#x1f43e;马上就要蓝桥杯了&#xff0c;最后的这几天尤为重要&#xff0c;不可懈怠哦&#x1f43e; 文章目录1.凑数2.砝码称重1.凑数 题目 链接&#xff1a; 4941. 凑数 - AcWing题库 初始时&#xff0c;n0…

CesiumForUnreal实现贴地面(SurfacePolygon)效果

文章目录 1.实现目标2.实现过程2.1 材质实例2.2 Cartographic Polygon2.3 Runtime环境使用2.4 效果测试2.5 遇到的UE崩溃问题与解决3.参考资料1.实现目标 基于UE5的Cesium-Unreal插件添加在线世界地形Cesium World Terrain,在地形表面绘制Polygon面,并使其紧贴地形,实现贴地…

实验四 配置OSPF协议

目录 一、实验内容 二、实验环境 三、实验步骤 一、实验内容 在配置NAT实验的基础上&#xff0c;增加R0到R1的GRE VPN隧道&#xff0c;并将10.0.0.0/24网络和192.168.0.0/24网络通过GRE隧道192.168.2.0/24网络连通&#xff0c;使用OSPF协议路由&#xff0c;使得PC2能访问PC0…

MongoDB - 索引知识

索引简介 什么是索引 索引最常用的比喻就是书籍的目录&#xff0c;查询索引就像查询一本书的目录。 索引支持 MongoDB 查询的高效执行。如果没有索引&#xff0c;MongoDB 必须扫描集合中每一个文档&#xff0c;以选择与查询语句相匹配的文档。如果查询存在适当的索引&#x…

深入学习JavaScript系列(七)——Promise async/await generator

本篇属于本系列第七篇 第一篇&#xff1a;#深入学习JavaScript系列&#xff08;一&#xff09;—— ES6中的JS执行上下文 第二篇&#xff1a;# 深入学习JavaScript系列&#xff08;二&#xff09;——作用域和作用域链 第三篇&#xff1a;# 深入学习JavaScript系列&#xff…

ChatGPT探索系列之二:学习GPT模型系列的发展历程和原理

文章目录前言一、GPT的起源GPT系列二、GPT的原理1. GPT原理&#xff1a;自注意2. GPT原理&#xff1a;位置编码3. GPT原理&#xff1a;Masked Language Modeling4. GPT原理&#xff1a;预训练5. GPT原理&#xff1a;微调6. GPT原理&#xff1a;多任务学习三、GPT模型的风险与挑…

二叉搜索树BST的学习

文章目录二叉搜索树BST什么是BST&#xff1f;用BST做什么&#xff1f;一、BST的特性BST的特性是什么&#xff1f;1.[230. 二叉搜索树中第K小的元素](https://leetcode.cn/problems/kth-smallest-element-in-a-bst/)2.[538. 把二叉搜索树转换为累加树](https://leetcode.cn/prob…

Git Commit Message 应该怎么写?

原文链接&#xff1a; Git Commit Message 应该怎么写&#xff1f; 最近被同事吐槽了&#xff0c;说我代码提交说明写的太差。其实都不用他吐槽&#xff0c;我自己心里也非常清楚。毕竟很多时候犯懒&#xff0c;都是直接一个 -m "fix" 就提交上去了。 这样做是非常…

C语言变量

C 变量 变量其实只不过是程序可操作的存储区的名称。C 中每个变量都有特定的类型&#xff0c;类型决定了变量存储的大小和布局&#xff0c;该范围内的值都可以存储在内存中&#xff0c;运算符可应用于变量上。 变量的名称可以由字母、数字和下划线字符组成。它必须以字母或下…

机器学习-卷积神经网络CNN中的单通道和多通道图片差异

背景 最近在使用CNN的场景中&#xff0c;既有单通道的图片输入需求&#xff0c;也有多通道的图片输入需求&#xff0c;因此又整理回顾了一下单通道或者多通道卷积的差别&#xff0c;这里记录一下探索过程。 结论 直接给出结论&#xff0c;单通道图片和多通道图片在经历了第一…

【hello C语言】结构体(下)

目录 1.结构体的声明 1.1 结构的声明 1.2 特殊声明&#xff1a;匿名结构体 1.3 结构的自引用 2. 结构体的定义和初始化 3. 结构体的内存对齐 3.1 内存对齐规则 3.2 内存对齐存在的原因 3.3 修改默认对其数 4. 结构体传参 C语言&#x1f6f4; 1.结构体的声明 结构体便是描述复杂…

一种适合容器化部署的雪花算法ID生成器

雪花算法简介 SnowFlake 中文意思为雪花&#xff0c;故称为雪花算法。最早是 Twitter 公司在其内部用于分布式环境下生成唯一 ID。 雪花算法有以下几个优点&#xff1a; 高并发分布式环境下生成不重复 id&#xff0c;每秒可生成百万个不重复 id。基于时间戳&#xff0c;以及同…

零编程经验,通过 GPT-4 十分钟开发了一个浏览器插件,并成功运行,实现了需求目标!

大佬蓝鸟ID: sundyme零编程经验&#xff0c;通过 GPT-4 十分钟开发了一个浏览器插件&#xff0c;并成功运行&#xff0c;实现了需求目标&#xff01;太不可思意了&#xff0c;真正体会到了自然语言编程的魅力&#xff01; 下一步是利用Pinterest 的 API 接口实现自动发图&#…

No.026<软考>《(高项)备考大全》【第10章】项目沟通和干系人管理(第2部分-干系人管理)

1 干系人管理部分相关 1.1 干系人ITO 1.2 干系人管理 过程过程的定义过程的作用识别干系人识别能影响项目决策、活动或结果的个人、群体或组织&#xff0c;以及被项目决策、活动或者结果影响的个人、群体或者组织&#xff0c;并分析和记录他们的相关信息的过程帮助项目经理建…

此战成硕,我成功上岸西南交通大学了~~~

友友们&#xff0c;好久不见&#xff0c;很长时间没有更一个正式点的文章了&#xff01; 是因为我在去年年底忙着准备初试&#xff0c;今年年初在准备复试&#xff0c;直到3月底拟录取后&#xff0c;终于可以写下这篇上岸贴&#xff0c;和大家分享一下考研至上岸的一个过程 文章…

游戏算法-游戏AI行为树,python实现

参考文章&#xff1a;Behavior trees for AI: How they work (gamedeveloper.com) 本文主要参考上述weizProject Zomboid 的开发者 Chris Simpson文章的概念&#xff0c;用伪代码实现代码例子 AI概述 游戏AI是对游戏内所有非玩家控制角色的行为进行研究和设计&#xff0c;使得游…

电子拣货标签9代系统简介

CK_Label_v9一、产品参数 产品型号 CK_Label_v9 LED 3&#xff08;红&黄&绿&#xff09;独立可控 供电方式 DC 24V 0.2A 通信方式 无线通信 蜂鸣器 支持 尺寸 D60 H307mm 二、革新点 配合标签拣货使用三个灯&#xff08;红黄绿&#xff09;都可以被独立控…

基于MATALB编程的BP神经网络手臂血管分类识别,基于BP神经网络的图像分类

目标 背影 BP神经网络的原理 BP神经网络的定义 BP神经网络的基本结构 BP神经网络的神经元 BP神经网络的激活函数&#xff0c; BP神经网络的传递函数 数据 神经网络参数 基于BP神经网络手臂血管识别的MATLAB代码 效果图 结果分析 展望 背影 随着人工智能的发展&#xff0c;智…

贪心算法-删数问题C++

目录 一、题目 二&#xff1a;思路 代码 运行结果 一、题目 有一个长度为n&#xff08;n < 240&#xff09;的正整数&#xff0c;从中取出k&#xff08;k < n&#xff09;个数&#xff0c;使剩余的数保持原来的次序不变&#xff0c;求这个正整数经过删数之后最小是多…
最新文章