AJAX实例之发送POST请求、服务端响应JSON数据、请求超时与网络异常问题、取消请求问题、以及jQuery发送AJAX请求

已于 2022-04-03 09:39:39 修改
阅读量2k 收藏
点赞数 1
分类专栏： AJAX 文章标签： ajax
于 2022-04-03 09:35:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63374484/article/details/123932413
版权

一、AJAX发送POST请求：

<!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>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: 1px solid #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        // 绑定元素对象
        var result = document.getElementById('result');
        // 绑定事件
        result.addEventListener('mouseover', function() {
            // console.log('test');
            // 1.创建对象
            const xhr = new XMLHttpRequest();
            // 2.初始化 设置类型与url
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('name', 'zzz');
            // 3.发送
            xhr.send('a=100&b=200%c=300');

            // 4.事件绑定
            xhr.onreadystatechange = function() {
                // 判断
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

</html>

在server.js中写接口：

const { response } = require('express');
const express = require('express');
const app = express();

app.all('/server', (require, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    response.send('HELLO AJAX');
});

app.listen(8000, () => {
    console.log('服务器已启动');
})

二、服务端响应JSON数据：

<!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>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: 1px solid #903;
        }
    </style>
</head>


<body>
    <div id="result"></div>
    <script>
        var result = document.getElementById('result');
        // 绑定键盘按下事件
        window.onkeydown = function() {
            const xhr = new XMLHttpRequest();
            // 自动数据转换
            xhr.responseType = 'json';
            xhr.open('GET', 'http://127.0.0.1:8000/json-server');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        // 1.手动对数据转化
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML = data.name;
                        // 2.自动对数据进行转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>

</html>

在server.js中写接口：

const { response } = require('express');
const express = require('express');
const app = express();

app.all('/json-server', (require, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {
        name: 'zzz'
    };
    let str = JSON.stringify(data);
    response.send(str);
});

app.listen(8000, () => {
    console.log('服务器已启动');
})

三、请求超时与网络异常问题

<!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>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: 1px solid #903;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');
        btn.addEventListener('click', function() {
            const xhr = new XMLHttpRequest();
            // 超时2s设置
            xhr.timeout = 2000;
            // 超时回调
            xhr.ontimeout = function() {
                    alert('网络异常，请稍后再试');
                }
                // 网络异常回调
            xhr.onerror = function() {
                alert('无网络');
            }
            xhr.open('GET', 'http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

</html>

取消请求：
如果该请求已被发出，XMLHttpRequest.abort() 方法将终止该请求。

   <button>点击发送</button>
    <button>点击取消</button>
    <script>
        const btns = document.querySelectorAll('button');
        let xhr = null;
        btns[0].onclick = function() {
            xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://127.0.0.1:8000/delay');
            xhr.send();
        }

        btns[1].onclick = function() {
            xhr.abort();
        }
    </script>

在server.js中写接口：

const { response } = require('express');
const express = require('express');
const app = express();

app.get('/delay', (require, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    setTimeout(() => {
        response.send('延时响应');
    }, 3000);
});

app.listen(8000, () => {
    console.log('服务器已启动');
})

四、jQuery发送AJAX请求：

<!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">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
    <title>Document</title>
</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);
            }, 'json');
        })

        $('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(data) {
                    console.log('出错啦');
                },
                // 头信息
                headers: {
                    c: 300,
                    d: 400
                },
            })
        })
    </script>
</body>

</html>

在server.js中写接口：

const { response } = require('express');
const express = require('express');
const app = express();

app.all('/jquery-server', (require, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = { name: 'aaa' };
    // response.send('HELLO jQuery AJAX');
    response.send(JSON.stringify(data));
});

app.listen(8000, () => {
    console.log('服务器已启动');
})
.小张同学
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
为jquery的ajax请求添加超时timeout时间的操作方法
10-18
主要介绍了为jquery的ajax请求添加超时timeout时间的操作方法，文中通过一段简单的代码给大家介绍jquery ajax超时设置方法，感兴趣的朋友跟随脚本之家小编一起看看吧
ajax用post提交json数据,通过Ajax进行Post提交Json数据的方法
weixin_30789475的博客
08-05 7333
js代码$.ajax({type : "POST",url : js_path + "/maintainAdd/add",data : JSON.stringify(madd_data.editMaintain),contentType : "application/json",dataType : "json",complete:function(msg) {layer.msg("报修成功",{...
ajax使用POST提交json数据
热门推荐
大秦铁骑
03-23 4万+
$(document).ready(function () { var schoolList={   "pageCount": "2",   "pageIndex": "1",   "sign": "1",   "uniPayId": "9dc1308bab2b4b49987a0c12dd7339f5" }  $.ajax({ t
jquery中断（取消/abort）ajax请求
种德养心
03-04 1万+
如果一个ajax请求过长，你可能会有取消之前发起的一次请求的需要。这里介绍jquery中如何实现。其实jquery发起一个ajax请求后会返回一个jqXHR对象，你随后可对该对象进行操作，包括abort中断操作。示例代码： var r = $.ajax( url:'...', success:function(data){}, error:function(data,error){cons
AJAX&JSON基本知识（详解！）
weixin_57800914的博客
08-24 290
AJAX：ASynchronous JavaScript And XML 异步的JavaScript 和 XML*AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。*是客户端给服务器端发送消息以及接收响应的工具。*提升用户的体验。
AJAX (2) — AJAX请求的基本操作、设置请求参数、发送POST请求，POST设置请求体、AJAX设置请求头信息
m0_59897687的博客
12-26 3116
目录 一、AJAX请求的基本操作 1.server.js文件 2.GET.html文件 二、AJAX设置请求参数 三、AJAX发送POST请求 1.POST.html文件 2.server.js文件 四、POST设置请求体 五、AJAX设置请求头信息 1.预定义头信息 2.自定义头信息 一、AJAX请求的基本操作 先设计出一个需求： 如下图，点击按钮，向服务端发送请求，将服务端返回的响应体结果展示在div中，页面不刷新 ...
问题与解决：用 jQuery Ajax 发送请求，后端获取 session 为空
si_ying的博客
05-30 1774
最近在做错题集的 web 开发课程设计，根据以往的经验前端和后端的数据我大部分都在用 session 进行传输。最近刚学习并运用了 Ajax 技术，当我像以前一样在后端更新session时，发现前端没有获取新的session数据，由此我打算认真来学习一下session，顺便将已有的项目整理一下。 希望路过的大佬们可以指点一二，同时也希望给遇到同样困惑的小伙伴提供帮助🙂
jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
12-29
JSON(JavaScript Object ...本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。阅读本文的读者应该具备jQuery、Ajax、PHP相关知识，并能熟练运用。 XHTML <li><a>张三</a></li> <li
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
10-15
主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下
Jquery通过ajax请求NodeJS返回json数据实例
10-21
在本文中，我们将探讨如何使用jQuery的Ajax功能向Node.js发送请求并接收JSON数据。首先，让我们理解这个组合的优势。 1. **Node.js的便利性**：Node.js是一款基于Chrome V8引擎的JavaScript运行环境，它不需要安装...
jQuery取消ajax请求的方法
10-24
主要介绍了jQuery取消ajax请求的方法,可实现在Ajax请求超时的情况下取消请求的功能,需要的朋友可以参考下
jquery的ajax异步请求接收返回json数据实例
12-03
以下是一个简单的jQuery的Ajax请求示例，它向服务器发送一个GET请求，并接收JSON格式的响应数据： ```javascript $(document).ready(function() { $('#send').click(function() { $.ajax({ type: "GET", url: ...
jquery ajax超时设置
weixin_34090643的博客
10-07 465
var ajaxTimeoutTest = $.ajax({ 　　url:'',  //请求的URL 　　timeout : 1000, //超时时间设置，单位毫秒　　type : 'get',  //请求方式，get或post 　　data :{},  //请求所传参数，json格式 　　dataType:'json',//返回的数据格式 　　success:function(data...
AJAX请求（GET、POST、响应JSON）
四问四不知的博客
05-29 1035
序言 作为一个后端Java工程师，不能只关注于自己的一亩三分地，还是多了解一下前端的知识，更加有助于自己的开发，在理解上前后端的对接会更为平滑。 AJAX（Asynchronous JavaScript and XML） AJAX是异步的 JavaScript 和 XML的缩写。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 XML是可扩展标记语言（Extensible Markup Language）的缩写
Ajax：ajax发送Post请求、ajax案例
dengfengling999的博客
07-21 1万+
上面项目，目前存在的缺点在后端的java代码中又开始拼接HTML代码了。显然这是在后端java中写前端的HTML代码。一般后端不会这样写拼html串返回，只会在后端查数据，把数据返回交给前端。能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就行，然后页面展示的功能交给WEB前端来处理。我们后端的java代码能不能只返回数据？（返回数据可以采用JSON的格式，也可以采用XML的格式）一般采用JSON，因为json体积小，xml体积大，解析起来有一定难度。......
使用ajax向服务器发起post请求（提交数据给服务器）
Forever_Hopeful的博客
06-25 5409
前端开发：网络请求后台数据，使用ajax向服务器发起post请求（提交数据给服务器）
ajax前后端数据传输的编码格式，Ajax提交json格式的数据、Ajax提交文件数据、Ajax实现弹窗的二次确认、批量增加数据、分页的原理及推导、分页类的使用
最新发布
m0_69962105的博客
11-21 404
2、默认的编码格式：urlencoded，需要修改contentType类型：json格式的。2、数据传输形式：title=' '&print=' '&publish=' '1、默认情况下，Ajax提交的数据后端还是在request.POST中接受的。注意：对于符合urlencoded格式的数据后端都是在request.POST中接收数据的。文件数据通过request.FILES方式接收数据，不能使用request.POST。1、默认的编码格式是：urlencoded。1、get请求方式没有编码方式。
ajax的post请求数据为json格式相关设置
个人笔记
02-09 2366
平时用request封装axios习惯了突然用ajax传参时一直出问题，原来是配置设置错了。
jquery 中止ajax,如何取消/中止jQuery AJAX请求？
weixin_36006862的博客
08-05 330
The jquery ajax method returns a XMLHttpRequest object. You can use this object to cancel the request.The XMLHttpRequest has a abort method, which cancels the request, but if the request has already b...
Ajax与XML：在请求响应中的应用与考量
在Ajax请求中，XML可以用于向服务器发送结构化的数据，服务器也可以返回XML格式的响应，客户端通过DOM解析这些数据，然后更新页面。 然而，随着技术的发展，JSON（JavaScript Object Notation）因其简洁、轻量级和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值