Ajax请求后端接口（GET、POST、轮询请求）

最新推荐文章于 2024-07-07 13:59:05 发布

IamaMartian

最新推荐文章于 2024-07-07 13:59:05 发布

阅读量2.8w

点赞数 11

文章标签： jquery ajax 前端

本文链接：https://blog.csdn.net/qq_41644069/article/details/120835244

版权

本文介绍了Ajax技术的核心及其在jQuery中的使用，包括GET和POST请求的实现，以及Ajax轮询请求的工作原理。通过实例展示了如何使用jQuery.Ajax进行HTTP请求，与后端接口交互，以及处理JSON数据。同时还提到了跨域问题和轮询请求中停止条件的设定。

摘要由CSDN通过智能技术生成

Ajax(Asynchronous Javascript And XML，异步JavaScript和XML)，使用Ajax技术网页应用能够快速地将增量更新呈现在上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。--百度百科

jQuery.Ajax

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery Ajax 方法，我们可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON，同时能够把这些外部数据直接载入网页的被选元素中。

jQuery Ajax本质就是 XMLHttpRequest，对它进行了封装，方便调用。--狂神笔记

Ajax请求的一般格式

$.ajax({
            url: "http://localhost:8081/getUser", //要请求的后端地址
            type: "GET", //数据发送的方式(POST或者GET)
            data: {val1: "1", val2: "2"}, //需要传递的参数
            dataType: "json", //后端返回的数据格式
            success: function (result) {//ajax请求成功后触发的方法
                console.log(result); //result为响应内容
            },
            error: function () {//ajax请求失败后触发的方法
                console.log('Send Request Fail..');
            }
        });

type类型为GET

该实验请求的地址改编自vhr的后端接口，跨域问题可参照博文，后端接口不做过多赘述。

<script type="text/javascript">
        $("#testId").click(function () {
            $.ajax({
                url: "http://localhost:8081/system/basic/department/",
                type: "GET",
                data: {"id": 100},
                dataType: &