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
    评论
专栏目录
ajax post传不过去,Ajax POST方式发送请求服务器接收不到数据问题解决办法
weixin_39963744的博客
08-05 1167
直接看源码代码如下function setViewPoint() {var msg =""; //用于接收返回数据//实例化Ajaxvar leeAjax = leeInitAjax();var webRoot = window.location;webRoot = webRoot.toString();var domain = webRoot.substring(7);var endD = do...
jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
12-29
JSON(JavaScript Object ...本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。阅读本文的读者应该具备jQuery、Ajax、PHP相关知识，并能熟练运用。 XHTML <li><a>张三</a></li> <li
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：ajax发送Post请求、ajax案例
最新发布
dengfengling999的博客
07-21 1万+
上面项目，目前存在的缺点在后端的java代码中又开始拼接HTML代码了。显然这是在后端java中写前端的HTML代码。一般后端不会这样写拼html串返回，只会在后端查数据，把数据返回交给前端。能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就行，然后页面展示的功能交给WEB前端来处理。我们后端的java代码能不能只返回数据？（返回数据可以采用JSON的格式，也可以采用XML的格式）一般采用JSON，因为json体积小，xml体积大，解析起来有一定难度。......
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请求示例
weixin_46482875的博客
05-11 3813
Ajax请求步骤与代码 前端 文章标签： ajax jquery ...
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异步请求接收返回json数据实例
12-03
以下是一个简单的jQuery的Ajax请求示例，它向服务器发送一个GET请求，并接收JSON格式的响应数据： ```javascript $(document).ready(function() { $('#send').click(function() { $.ajax({ type: "GET", url: ...
ajax--发送请求与取消请求
欣欣酱博客
12-29 1287
基本操作思路1：可以点击多次发送请求按钮，即快速发送多次请求，但请求会在最后一次实现成功，之前所点击的请求都无效取消。 基本操作思路2：设置延迟响应。当在几秒后才能成功发送请求时，我们可以在这几秒种内，还没有成功发送请求之前点击取消请求，即取消成功。 在界面中设置两个按钮，分别控制发送请求与取消请求。 用js语法先获取到两个按钮元素，方便对他们进行后续操作。 点击按钮后判断是否有正在发送的请求，如果有，则中断所有正在发送的请求以保证最后一次点击的请求成功实现。如果没有，则直接发送请求成功。 &l
为jquery的ajax请求添加超时timeout时间的操作方法
10-18
主要介绍了为jquery的ajax请求添加超时timeout时间的操作方法，文中通过一段简单的代码给大家介绍jquery ajax超时设置方法，感兴趣的朋友跟随脚本之家小编一起看看吧
关于ajax请求超时和异常处理
X1nZz的博客
08-20 3832
原因 在日常网站处理中，经常会遇到发送请求后一定时间内没有获得响应，前端显示未响应结果 后端controller @RequestMapping(value = "/delay",method = RequestMethod.GET) @ResponseBody public String test05(HttpServletRequest req, HttpServletResponse resp) throws InterruptedException { //设
ajax异步请求 关闭 php,jQuery取消$.POST的异步提交的方法
weixin_39635314的博客
03-10 636
$.POST方法并没有异步方式的设置，有两种解决方法。1.改成$.ajax方法$.ajax({type : 'POST',async : false,url : '/point/changeNum',data: {cart_id:cart_id,goods_num:goods_num},success : function(str){alert(str);}});2.使用$.ajaxSetup({...
ajax Post方式并返回json字符串提示
weixin_30751947的博客
12-15 126
前端ajax var d={'name':'春哥','age':'34'} $.ajax({ 'type':'post', 'url':'http://127.0.0.1:8000/docker_api/post_getdata/', data:d, success:function(data){ var data=JSON.parse(dat...
AJAx例子(post请求方式)
白开水的世界
06-01 349
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName(...
jQuery Ajax： $.post请求实例
乐杨俊浅谈LAMP
06-22 2454
jQuery Ajax： $.post请求实例
表单和ajax中的post请求&&后台获取数据方法（深度好文）
热门推荐
xcymorningsun的专栏
11-03 8万+
最近要做后台数据接收，因为前台传来的数据太过于混乱，所以总结了一下前台数据post请求方法，顺便写了下相对应的后台接收方法。 前台主要的contenttype为下面三种： multipart/form-data类型主要是上传文件时用到； application/x-www-form-urlencoded类型主要是提交k-v时用到，当然这种方法也可以将json 设置在v中提交
Ajax网络请求超时处理-timeout
只如初见0706的博客
02-27 3万+
1、相关链接：http://blog.csdn.net/zrcj0706/article/details/786399802、实现效果当网络请求时间超过2秒，则弹出提示框：提示网络不稳定具体效果如下图所示3、代码如下：代码截图具体代码let ajaxTimeOut = $.ajax({ //将网络请求事件赋值给变量ajaxTimeOut url: "/api_v1.1/apiP...
Ajax与XML：在请求响应中的应用与考量
在Ajax请求中，XML可以用于向服务器发送结构化的数据，服务器也可以返回XML格式的响应，客户端通过DOM解析这些数据，然后更新页面。 然而，随着技术的发展，JSON（JavaScript Object Notation）因其简洁、轻量级和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值