jQuery发送ajax请求

已于 2022-07-21 09:30:25 修改
阅读量1k 收藏 6
点赞数 1
分类专栏： Ajax 文章标签： ajax jquery javascript
于 2022-05-13 22:20:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124759127
版权

文章目录

jQuery的post、get请求发送格式

请求发送格式

  • get请求： $.get(给谁发请求，发送的参数（是一个对象），回调函数)
  • post请求： $.post(给谁发请求，发送的参数（是一个对象），回调函数)

回调函数有一个参数data，里面装的是响应体的内容。

eg:

jQuey发送Ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/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(给谁发请求，发送的参数（是一个对象），回调函数)
        $.get('http://127.0.0.1:8000/jquery-server',{a:100,b:100},function (data){
            // data是响应体
            console.log(data)   
            })
        })

        $('button').eq(1).click(function (){
        //    发送请求 $.get(给谁发请求，发送的参数（是一个对象），回调函数)
        $.post('http://127.0.0.1:8000/jquery-server',{a:100,b:100},function (data){
            // data是响应体
            console.log(data)   
            })
        })
    </script>
    
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// 如果请求行的路径是/server的GET请求就会执行回调函数里面的内容
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX GET')
})
// 如果请求行的路径是/server的POST请求就会执行回调函数里面的内容
app.all('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers','*')
    // 设置响应体
    response.send('HELLO AJAX POST')
})

app.all('/json-server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 响应数据
    const data = {
        name: 'yang',
        // age:18
    }
    // 数据类型转化
    let str = JSON.stringify(data);
    // 设置响应体
    response.send(str)
})
// IE缓存
app.get('/IE', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers','*')
    // 设置响应体
    response.send('HELLO IE -- 3')
})
// 延时
app.get('/delay', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    setTimeout(()=>{
       response.send('延时响应')
    },3000)
})

// jQuery服务
app.all('/jquery-server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send('Hello jQuery Ajax');
})

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

在这里插入图片描述
post的请求参数放在负载中：
在这里插入图片描述

请求发送的第四个参数

第四个参数表示返回的响应体类型，然后根据响应体的类型解析响应体数据。
$.get(给谁发请求，发送的参数（是一个对象），回调函数，响应体类型)
$.post(给谁发请求，发送的参数（是一个对象），回调函数，响应体类型)
eg：
如果请求返回的是json数据（以get请求为例）
server.js

// jQuery服务
app.all('/jquery-server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    const data = {name:'yang'}
    response.send(JSON.stringify(data));
})

jQuey发送Ajax.html

<script>
    $('button').eq(0).click(function (){
    //    发送请求 $.get(给谁发请求，发送的参数（是一个对象），回调函数)
    $.get('http://127.0.0.1:8000/jquery-server',{a:100,b:100},function (data){
        // data是响应体
        console.log(data)   
        },'json')
    })

    $('button').eq(1).click(function (){
    //    发送请求 $.get(给谁发请求，发送的参数（是一个对象），回调函数)
    $.post('http://127.0.0.1:8000/jquery-server',{a:100,b:100},function (data){
        // data是响应体
        console.log(data)   
        })
    })
</script>

在这里插入图片描述

jQuery通用方法发送请求

格式：

$.ajax({
	url: ,
	data:{},
	type:,
	success:funcation(data){}
})

ajax的参数是一个对象，对象有4个属性：
url：请求地址
data：请求参数
type：请求类型
success：响应成功的回调函数

eg:
通用形式发送get请求

$('button').eq(2).click(function (){
//    发送请求 $.get(给谁发请求，发送的参数（是一个对象），回调函数)
$.ajax({
    // 请求地址
    url:'http://127.0.0.1:8000/jquery-server',
    // 请求参数
    data:{a:100,b:200},
    // 请求类型
    type:'GET',
    // 成功的回调
    success:function(data){
        console.log(data) 
    }
})
})

也可以设置响应的数据格式、超时时间、失败的回调

$.ajax({
            // 请求地址
            url:'http://127.0.0.1:8000/jquery-server',
            // 请求参数
            data:{a:100,b:200},
            // 请求类型
            type:'GET',
            // 响应的数据格式
            dataType:'json',
            // 超时时间
            timeout:2000,
            // 成功的回调
            success:function(data){
                console.log(data) 
            },
            // 失败的回调
            error:function(){
                console.log('出错了！！！')   
            },
            // 头信息
            headers:{
                c:300,
                d:400
            }
        })

完整例子：
html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/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(给谁发请求，发送的参数（是一个对象），回调函数)
        $.get('http://127.0.0.1:8000/jquery-server',{a:100,b:100},function (data){
            // data是响应体
            console.log(data)   
            },'json')
        })

        $('button').eq(1).click(function (){
        //    发送请求 $.get(给谁发请求，发送的参数（是一个对象），回调函数)
        $.post('http://127.0.0.1:8000/jquery-server',{a:100,b:100},function (data){
            // data是响应体
            console.log(data)   
            })
        })

        $('button').eq(2).click(function (){
        //    发送请求 $.get(给谁发请求，发送的参数（是一个对象），回调函数)
        $.ajax({
            // 请求地址
            url:'http://127.0.0.1:8000/jquery-server',
            // 请求参数
            data:{a:100,b:200},
            // 请求类型
            type:'GET',
            // 响应的数据格式
            dataType:'json',
            // 超时时间
            timeout:2000,
            // 成功的回调
            success:function(data){
                console.log(data) 
            },
            // 失败的回调
            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.创建路由规则
// 如果请求行的路径是/server的GET请求就会执行回调函数里面的内容
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX GET')
})
// 如果请求行的路径是/server的POST请求就会执行回调函数里面的内容
app.all('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers','*')
    // 设置响应体
    response.send('HELLO AJAX POST')
})

app.all('/json-server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 响应数据
    const data = {
        name: 'yang',
        // age:18
    }
    // 数据类型转化
    let str = JSON.stringify(data);
    // 设置响应体
    response.send(str)
})
// IE缓存
app.get('/IE', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers','*')
    // 设置响应体
    response.send('HELLO IE -- 3')
})
// 延时
app.all('/delay', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(()=>{
       response.send('延时响应')
    },3000)
})

// jQuery服务
app.all('/jquery-server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers','*')
    const data = {name:'yang'}
    response.send(JSON.stringify(data));
})

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

在这里插入图片描述

_洋
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery跨域请求示例分享(jquery发送ajax请求)
10-26
主要介绍了jquery跨域请求示例(jquery发送ajax请求),需要的朋友可以参考下
Jquery AJAX 跨域POST 请求
liuhai的博客
06-10 1万+
项目中遇到了要使用跨域的post请求，在IE10以下遇到了坑 跨域使用的是CORS 1、前端脚本 function tests(){ //请求类型 为了满足IE8,IE9通过cors跨域请求 var contentType ="application/x-www-form-urlencoded; charset=utf-8"; //var contentType ="text/p
jquery 拦截 post 等请求实现aop效果
weixin_30266885的博客
03-23 244
$(function(){ jQuery.extend({ put: function( url, data, callback, type ) { // shift arguments if data argument was omited if ( jQuery.isFunction( data ) ) { ...
Ajax学习：jQuery发送ajax请求
weixin_47295886的博客
12-01 283
crossoringin="anonymous" 跨源请求设置 向资源发送请求时，不发送当前域名下的cookie。jQuery接收不同类型的数据 可以设置响应体类型 第四个参数_传递json格式的数据。用$.post发送post请求 接收响应体内容 data是响应体内容。用$.get发送get请求 接收响应体内容 data是响应体内容。主要3个方法：get \ post \ ajax(通用方法)服务器主要：（这样不需要更改请求get post都可以）js部分绑定事件 使。js部分绑定事件 使。
JQuery 中使用 Ajax 发送 GET、POST 请求
热门推荐
assiduous_me的博客
05-11 5万+
What is Ajax ? Ajax = 异步 JavaScript 和 XML 一种用于创建快速动态网页的技术 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新 Why to useAjax ? 可以在不重新加载整个网页的情况下，对网页的某部分进行更新 How to use Ajax in JQuery ? 1. example ????!!! GET ????: ...
使用jQuery发送Ajax请求 | JQERY | JSP
Bi-Hu的博客
05-31 181
javascript原生的ajax操作比较麻烦，新版js中提供了更为便捷的操作方式我们后面再介绍，这 里先看下jQuery操作ajax。jQuery提供了一些函数简化了这些操作，接下来我们看下如何使用jQuery发送ajax请求。先准备一个servlet用来处理ajax发送的请求。 先来一个 servlet： package ajax; import java.io.IOException;...
JQuery发送ajax请求时中文乱码问题解决
10-15
主要介绍了JQuery发送ajax请求时中文乱码问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
jquery的ajax请求全面了解
01-19
比如.ajaxComplete()——请求完成时.ajaxError()——请求失败时.ajaxSend()——在Ajax请求发送时附加一个function去执行.ajaxStart()——请求开始时，.ajaxStop()——请求结束时.ajaxSuccess()——请求成功时.load()...
【Ajax】jQuery发送ajax请求
wlc19981111的博客
05-17 89
//1. 引入express const express = require('express'); //2. 创建应用对象 const app = express(); //3. 创建路由规则： app.all('/server', (request, response) => { //设置响应头: 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); response.setHeader('Access
SpringBoot—CORS跨域问题详解和解决方案
Andya_net的博客
08-31 1758
关注微信公众号：CodingTechWork，一起学习进步。 引言   在前后端开发过程中，遇到过一种错误，类似于报错： Access to XMLHttpRequest at 'http://127.0.0.1:8080/' from origin 'null' has been blocked by CORS policy! No 'Access-Control-Allow-Origin' header is present on the requested resource. 亦或是 XMLHtt.
关于引入jquery.js文件无效
heerey525
06-22 8916
本人闲得无聊写写jquery.js的demo过程如下：1、jquery官网上复制最新的jquery文本，新建js文件保存2、新建html文件&lt;script src="layui/jquery-3.3.1.js"&gt;&lt;/script&gt;3、之后测试的时候jquery文件加载了，但是Console中报错$ is undefined4、引入网络连接完美运行&lt;script src...
借用jQuery发送Http请求的实现（内附源码）
最新发布
locahuang的博客
06-22 861
于是决定自己动手写个简单的http客户端工具，一开始想到使用Qt+curl开发个简单的界面工具，之所以要带界面主要是考虑现场人员操作的便利性。最后，经过考量，使用.... jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery发送Ajax请求
weixin_44383261的博客
05-13 81
GET请求 jQuery发送Ajax请求时，函数有三个参数，第一个是请求的url地址，第二个是请求参数，第三个是一个回调函数，回调函数的参数是服务器端返回的结果。 server.js部分 app.all('/jquery',(req,res)=>{ res.setHeader('Access-Control-Allow-Origin','*'); const data={ name:'zhangsan' } res.send(JSON.stringify
IDEA解决引入jquery.js报错问题
qq_45128278的博客
11-23 3609
以下这种情况我都遇到过： Failed to load resource: the server responded with a status of 404 () ajax $ is not defined GET http://localhost:8080/favicon.ico 404 GET http://localhost:8080/jquery.js net::ERR_ABORTED ...
JQuery库使用报错
OfflLne的博客
03-24 1003
Jquery库引用报错 代码目录结构： 前提：jquery1.11.3.min.js已经在*.jsp引入，并且放置在原生JS方法之前。 IE报错：“$”未定义 FireFox报错：指向“http://localhost:8080/js/jquery1.11.3.min.js”的 正确引用方法一： 注：此方法必须放置在语句之前 正确引用方法二： 注：此方法必须放置在语句之后 两种方法详见下图...
JQuery发送AJAX请求
gcsyzy的博客
04-01 1361
JQuery发送AJAX请求的三种方式：$get()，$post()，$ajax()
jquery发送ajax请求
weixin_50379372的博客
07-07 201
jquery发送ajax请求jquery发送ajax请求jquery发送ajax请求jquery发送ajax请求jquery发送ajax请求jquery发送ajax请求jquery发送ajax请求jquery发送ajax请求
JQuery专题(一)-JQuery基础
学习交流，答疑解惑，可以查看博客主页左侧我的推广哦！
08-18 555
1.JavaScript和JavaScript框架 1.1.JavaScript 在正式介绍jQuery之前，我们有必要再了解一下JavaScript。 JavaScript是Netscape公司开发的一种脚本语言（Script Language）。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页包含了更多活跃的元素和更加精彩的内容。JavaScript自身...
jquery实现Ajax请求
qq_51635297的博客
11-09 7634
jquery实现Ajax请求

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值