Ajax中的循环方案

在开发中,当一个列表页面加载完成后,我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签,怎么实现的呢?下面我给大家介绍下ajax中的循环方案,感兴趣的朋友一起学习吧

Ajax 简介

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。

五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟上最新的技术时尚,那您的目标就是 Ajax。

但是,Ajax 不仅仅 是一种时尚,它是一种构建网站的强大方法,而且不像学习一种全新的语言那样困难。

一、业务需求

在开发中,当一个列表页面加载完成后,我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签。

例如如下表格:

Ajax中的循环方案

我有一系列的商品编号,我需要根据商品编号通过ajax到服务器获取商品对应的名称,然后再用js更新界面(实际中的业务当然不是获取商品名称这么简单)

二、实现方案

2.1 错误方案

一般情况下,我们会直接想到,直接写个for循环,在循环内发起ajax请求获取数据,再把获取的数据更新到对应的id对应的标签上,

如下:

我们以数组模拟一些列id:

var array = [1, 3, 2, 5, 3];

登录后复制登录后复制

循环的ajax请求方法:

function foreach_ajax() {for (var i = 0; i 

调用:

$(function () {foreach_ajax(); });

登录后复制

测试结果如下:

Ajax中的循环方案

我们可以看到,在循环的内部我们根本取不到array[i]的值。

导致这种结果的原因是:ajax是异步执行的,在循环结束的时候第一次ajax还没有将服务器数据返回,而循环结束的时候for中的变量i已经释放了,所以array[i]=undefined

2.2 正确方案

正确的方式是以递归的方式循环ajax。

如下:

我们以数组模拟一些列id:

var array = [1, 3, 2, 5, 3];

登录后复制登录后复制

递归的ajax请求方法:

function Loop_ajax(index, array) {if (index 

调用:

$(function () {Loop_ajax(0, array);});

登录后复制

测试结果如下:

Ajax中的循环方案

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

AJAX用于判定用户是否注册

ajax实现异步文件或图片上传功能

解决微信返回上一页,页面中的AJAX的请求,对Get请求无效的问题

以上就是Ajax中的循环方案的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2758882.html

(0)
上一篇 2025年3月8日 08:19:20
下一篇 2025年3月7日 04:19:57

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 用AJAX实现页面登陆以及注册用户名验证的简单实例

    下面我就为大家带来一篇用ajax实现页面登陆以及注册用户名验证的简单实例。现在就分享给大家,也给大家做个参考。 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交…

    编程技术 2025年3月8日
    200
  • 基于ajax html实现文件上传技巧总结

    这篇文章主要为大家详细总结了基于ajax html实现文件上传技巧,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 引语:大家都知道,html中上传文件就一个input,type=file就搞定了。但是,这个标签的样式,实在不值得提点什么…

    编程技术 2025年3月8日
    200
  • Ajax 上传图片并预览的简单实现

    下面我就为大家带来一篇ajax 上传图片并预览的简单实现。现在就分享给大家,也给大家做个参考。 1. 直接上最简单的 一种 ajax 异步上传图片,并预览 html: nbsp;html>图片上传 | cookie  file:   …

    编程技术 2025年3月8日
    200
  • 基于Ajax表单提交及后台处理简单的应用

    下面我就为大家带来一篇基于ajax表单提交及后台处理简单的应用。现在就分享给大家,也给大家做个参考。 首先先说下表单提交吧,要提交表单那么就得先收集表单数据(至于验证这个我就不说了,要说留下下次吧),有了jquery取个html的值还是简单…

    编程技术 2025年3月8日
    200
  • Ajax实现省市区三级级联

    这篇文章主要为大家详细介绍了ajax实现省市区三级级联,数据来自mysql数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 address.html nbsp;html>Insert title here  /** * 得到X…

    编程技术 2025年3月8日
    200
  • Ajax表单异步上传文件实例代码

    这篇文章主要介绍了ajax表单异步上传文件实例代码(包括文件域),非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧 1.起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到…

    编程技术 2025年3月8日
    200
  • IE下Ajax提交乱码的快速解决方法

    下面我就为大家带来一篇ie下ajax提交乱码的快速解决方法。现在就分享给大家,也给大家做个参考。 哈哈,试了这么多还是encodeURIComponent管用啊!!!! 在汉字的位置加个保护措施:encodeURIComponent(par…

    编程技术 2025年3月8日
    200
  • ajax设置async校验用户名是否存在的实现方法

    下面我就为大家带来一篇ajax设置async校验用户名是否存在的实现方法。现在就分享给大家,也给大家做个参考。 新增一个用户的时候,需要判断这个手机号码是否存在,最开始的想法很简单在textbox上设置一个onmouseout事件,在IE下…

    2025年3月8日
    200
  • Ajax获取数据然后显示在页面的实现方法

    下面我就为大家带来一篇ajax获取数据然后显示在页面的实现方法。现在就分享给大家,也给大家做个参考。 主要功能流程介绍 循环获取列表数据 点击列表数据进入详情页 点击报名参加弹出报名成功提示框 点击提示框中的确定按钮,跳回列表页 代码实现流…

    2025年3月8日
    200
  • ajax同步验证单号是否存在的方法

    这篇文章主要介绍了ajax同步验证单号是否存在的方法,涉及基于ajax的数据交互相关操作技巧,需要的朋友可以参考下 本文实例讲述了ajax同步验证单号是否存在的方法。分享给大家供大家参考,具体如下: //保存前执行的方法,ajax同步调用后…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论