循环发送ajax请求的问题

在系统开发中(前台页面使用jquery)遇到了以下需求,要根据多个主机名称去得到每一个主机的设备id,
一开始我用的是在 for 循环里面发送多个ajax的请求方式,但这种方式有很多缺点,首先因为是异步,
可能造成请求结果丢失,其次如果将请求方式改为同步,则会造成浏览器假死现象。

后来经过百度+google,得到了一种比较好的解决方法,就是使用递归。代码如下:


递归的好处就是可以知道什么时候继续循环,什么时候执行完毕,并回调后面的流程

var currentIndex=0;//退出递归的条件变量
var data = {};
    function newRequest(){
        if(currentIndex>=data.length){
            return; //callback
        }
        var name = data[currentIndex].name;
            $.ajax({
                url: url  
                type: 'get',
                timeout: 500,
                async: true,
                dataType: 'json',
                complete:function(XMLHttpRequest,textStatus){
                    if (textStatus === "success") {
			var res = $.parseJSON(XMLHttpRequest.responseText);
   			// callback
	            }
                    newRequest();
                }
            });
    }
    newRequest();


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明
Thymeleaf是一种Java模板引擎,而Bootstrap是一种前端框架,可以使Web开发更加高效。要使用Thymeleaf和Bootstrap5发送Ajax请求,我们可以使用jQuery的Ajax函数来实现。 首先,我们需要在HTML文件中引入jQuery库和Bootstrap样式库。然后,在需要发送Ajax请求的按钮或链接上添加一个ID或特定的类,并使用JavaScript代码将其与Ajax事件绑定。在Ajax事件中,我们可以指定请求类型、URL、数据等,还可以定义成功或失败时要执行的代码。 对于Thymeleaf,我们可以使用其内置的表达式语言将数据绑定到HTML元素中,例如将表格中的数据使用循环结构进行填充,或将表单的数据传递到控制器中。 具体而言,我们可以使用如下代码来实现Thymeleaf Bootstrap5发送Ajax请求: HTML代码: ```html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Thymeleaf Bootstrap5 Ajax Request Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Thymeleaf Bootstrap5 Ajax Request Demo</h2> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr th:each="user: ${users}"> <td th:text="${user.id}"></td> <td th:text="${user.name}"></td> <td th:text="${user.age}"></td> <td> <a href="javascript:void(0)" class="btn btn-info btn-xs edit-btn" th:data-id="${user.id}">Edit</a> <a href="javascript:void(0)" class="btn btn-danger btn-xs delete-btn" th:data-id="${user.id}">Delete</a> </td> </tr> </tbody> </table> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> <script> $(document).ready(function () { // Edit button click event $('.edit-btn').click(function () { var id = $(this).data('id'); $.ajax({ type: "GET", url: "/user/" + id, success: function (data) { $('#id').val(data.id); $('#name').val(data.name); $('#age').val(data.age); $('#editModal').modal('show'); }, error: function (jqXHR, textStatus, errorThrown) { alert('Error getting user by ID'); } }); }); // Delete button click event $('.delete-btn').click(function () { var id = $(this).data('id'); if (confirm('Are you sure you want to delete this user?')) { $.ajax({ type: "DELETE", url: "/user/" + id, success: function (data) { window.location.reload(); }, error: function (jqXHR, textStatus, errorThrown) { alert('Error deleting user'); } }); } }); }); </script> </body> </html> ``` 这里我们为Edit按钮和Delete按钮分别添加了edit-btn和delete-btn类,并为其设置了数据属性th:data-id,用于记录需要编辑或删除的用户ID。在JavaScript代码中,我们使用jQuery的Ajax函数分别为这两个按钮绑定了点击事件,并在事件中分别发送了GET和DELETE类型的Ajax请求,获取或删除对应的用户数据。 需要注意的是,我们使用了Thymeleaf的内置表达式语言将数据渲染到了HTML中,并在用户单击Edit按钮时使用了Bootstrap的Modal组件来显示编辑面板。此外,我们还为删除按钮添加了一个确认框,以防止误操作。 总的来说,使用Thymeleaf Bootstrap5发送Ajax请求非常方便,能够大大提高Web开发效率和用户体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值