【AJAX】使用JQ发送AJAX发送请求

首先要引入JQ

    <script crossorigin="anonymous" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

服务端代码

// 服务端准备
// 1、引入express
const express = require('express');
// 2、创建应用对象
const app = express()
// 3、创建路由规则
// request是对请求的封装
// response是对响应的封装
app.all('/server',(request,response)=>{// 设置响应头:设置运行跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');// 第一步:设置发给客户端的JSON格式数据var data={code:200,msg:"成功"}// 第二步:由于response.send()只能发送字符串,所以要把JSON转换成字符串data = JSON.stringify(data)// 第三步:发送数据response.send(data);
});
// 4、监听端口的启动服务
app.listen(8000,()=>{console.log("服务已启动,8000端口监听中...");
})// 5、启动服务,终端输入: node server.js基本使用.js ,启动之后在浏览器输入127.0.0.1:8000


客户端代码

格式1: $.get/post(发送地址, 发送参数{key:value,key:value...} 回调函数(function(data){}[data:响应体]))

$.get('http://127.0.0.1:8000/server', { a: 100, b: 200 }, function (data) {console.log(data);}); 

运行结果

 获取的响应是字符串,如何把字符串变成JSON对象

方法一:JSON.parse(data)

方法二:设置响应数据类型为json格式

// $.get/post(发送地址, 发送参数{key:value,key:value...} 回调函数(function(data){}[data:响应体]),,'json)

    $.get('http://127.0.0.1:8000/server', { a: 100, b: 200 }, function (data) {

        console.log(data);

    },'json');

运行结果

 格式2:    // $.ajax({url:发送地址,data:发送参数,type:GET/POST(请求类型), 回调函数(data:响应体)})

<script>$.ajax({// 1、urlurl:'http://127.0.0.1:8000/server',// 2、参数data:{a:100,b:200},// 3、请求类型GET/POSTtype:'GET',// 4、成功的回调success:function(data){console.log(data);},// 5、响应体类型设置dataType:'json',// 失败回调error:function(){console.log('报错');},// 超时时间设置timeout:2000,// 请求头信息headers:{c:300,d:400}}) 
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch【文档操作、搜索操作、入门案例】(五)-全面详解(学习总结---从入门到深化)

目录 原生JAVA操作ES_文档操作 原生JAVA操作ES_搜索操作 SpringDataES_入门案例 原生JAVA操作ES_文档操作 新增&修改文档 Test public void addDocument() throws IOException {// 1.创建客户端对象&#xff0c;连接ESRestHighLevelClient client new RestHighLevelC…

【算法 -- LeetCode】(14) 最长公共前缀

1、题目 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 “”。 示例 1&#xff1a; 输入&#xff1a;strs [“flower”,“flow”,“flight”] 输出&#xff1a;“fl” 示例 2&#xff1a; 输入&#xff1a;strs [“dog”,“…

如何在word的横线中插入大量文字(探索)

发现选中文字&#xff0c;按ctrlu即可把文字都添上下划线&#xff0c;但这样的效果不是我想要的。 这是一行一行的单元格。 暂时没有很好的方法&#xff0c;我的方法源自我的同学&#xff0c;是个笨方法。 先有一个纯文字word。 把它们全放到目标框中&#xff1a; 这样就限…

从粗放到精细,水务大数据运营分析平台助力智慧水务建设升级

随着国家对环保、节水的监管力度加大&#xff0c;水务物联网建设进入了快速发展期。大量的物联感知设备产生了海量的生产和业务数据&#xff0c;但大部分水务企业由于缺乏对数据的整合利用&#xff0c;数据价值没有得到充分挖掘&#xff0c;还不能通过精准的预测和分析&#xf…

Navicat 备份和恢复MongoDB库的数据

1、前期准备 (1) 有数据的MongoDB数据库old_db、空数据库new_db (2) 准备好MongoDB Tools 前往页面&#xff1a;https://www.mongodb.com/try/download/database-tools 选择所需版本下载并解压到自己想要的目录中&#xff1a; 2、将数据库old_db中的数据备份导出 (1) 对old_db…

map、foreach 和 for ,多角度对比

for 1.访问元素和操作方式------通过索引访问数组元素&#xff0c;并可以执行任意操作。 const numbers [1, 2, 3, 4, 5];// for循环示例 for (let i 0; i < numbers.length; i) {console.log("Number (for loop): " numbers[i]); } 2.索引控制--------通过…

直流运算放大电路-----Howland(二)

目录 豪兰德电路形式1 电路图 计算公式 仿真与分析 豪兰德电路形式2 电路图 计算公式 豪兰德电路形式3 电路图 计算公式 改进电路 豪兰德电路形式1 模拟电子技术基础&#xff08;第五版&#xff09;5.7 电路图 计算公式 仿真与分析 如图&#xff0c;红框内为负反馈&…

【数据结构与算法】图课后习题

题目 下面一共有七道有关图的课后习题&#xff0c;全部都是思路画图题并不是算法设计题故在此就一起列举出来了~ 1. 已知如下图所示的有向图&#xff0c;请回答下面几个问题 每个顶点的入/出度&#xff1b;邻接矩阵&#xff1b;邻接表&#xff1b;逆邻接表&#xff1b;强连通…

AcWing 1497:树的遍历

【题目来源】https://pintia.cn/problem-sets/994805342720868352/exam/problems/994805485033603072https://www.acwing.com/problem/content/description/1499/【题目描述】 一个二叉树&#xff0c;树中每个节点的权值互不相同。 现在给出它的后序遍历和中序遍历&#xff0c;…

Python爬虫与数据挖掘在外汇市场分析中的应用

外汇市场是全球最大的金融市场之一&#xff0c;每天的交易量可以达到几万亿美元。深入了解外汇市场的趋势和变化对于投资者来说至关重要&#xff0c;因为即使是微小的价格波动也可能导致巨额利润或损失。从过去的历史数据中抽取经验教训&#xff0c;并使用数据挖掘算法来预测未…

MOS管结构--NMOS、PMOS、CMOS、NAND、NOR、latch up(闩锁效应) 、Channel Length vs Gate Length

文章目录 NMOSPMOSCMOS (Complementary Metal Oxide Semiconductor)NAND&#xff08;与非门&#xff09;NAND layout NOR&#xff08;或非门&#xff09;latch up&#xff08;闩锁效应&#xff09;Channel Length vs Gate Length NMOS 如果硅区域中掺杂了具有五价电子&#xff…

Kotlin~Command模式

概念 把请求转化为独立的对象 角色介绍 Command: 命令接口ConcreteCommand: 具体命令实现类 UML 代码实现 interface Command {fun execute(vararg arg: String):Int } class Print : Command {override fun execute(vararg arg: String): Int {println("Print:${arg…