JQuery发起ajax请求,并在页面动态的添加元素

页面html代码:
<li><div class="coll-tit"><span class="coll-icon"><iclass="sysfont coll-default"></i>全域旅游目的地</span></div><div class="coll-panel"><div class="title-cont-two" style="    padding-top: 5px;padding-right: 5px;"><p><span>共</span><span>计<span id="globalTravelCount">XX</span>个</span></p><p class="this-title-two title-block mt-10" id="globalTravel"><a class="more" style="cursor: pointer;" id="globalTravelMore">查看更多<i class="sysfont"></i></a></p><div class="title-cont-two"></div></div></div>
</li>
发起ajax的js代码:
function loadMoreGlobalData() {var $parent_region = $("#parent_region").val();var $level = $("#level").val();var globalTravelCount = parseInt($("#globalTravelCount").text());var d = document.getElementById("globalTravel");var p1 = d.getElementsByTagName('span');var num = p1.length;  // 得到目前已经显示的旅游目的地的数量var currentPage = Math.floor(num / 10);  // 得到当前页数if (parseInt(num) >= globalTravelCount){     // 已经显示全部数据$("#globalTravelMore").remove();}else {$.post("/globalTravel/more",{ parent_region:$parent_region,pageNum:currentPage,level:$level},function(backData,textStatus,ajax){if (textStatus == "success") {//遍历//返回json数组对象,对其遍历$.each(backData, function (i, json) {var $span = $("<span></span>");var $a = $("<a></a>")$a.attr('href','/data-check?parent_region='+json['region']+'&level='+json['level']);$a.text(json['name'])$span.append($a);$("#globalTravelMore").before($span);});// $("#globalTravelMore").appendTo("#globalTravel")var spanCount = document.getElementById("globalTravel").getElementsByTagName('span').length;if (parseInt(spanCount) >= globalTravelCount) {$("#globalTravelMore").remove();}}else {alert("ajax读取信息失败了!")}},"json");}}
给html代码中的a标签(查看更多)添加点击事件的js代码:
<script>$("#globalTravelMore").click(function () {loadMoreGlobalData()});
</script>
html页面示意图:

html页面示意图

部分json数据展示:
[
{
region: 510726,
parent_region: 510700,
name: "北川羌族自治县",
level: 3,
exampleStatus: 1
},
{
region: 510727,
parent_region: 510700,
name: "平武县",
level: 3,
exampleStatus: 1
},
{
region: 510800,
parent_region: 510000,
name: "广元市",
level: 2,
exampleStatus: 1
},
{
region: 510822,
parent_region: 510800,
name: "青川县",
level: 3,
exampleStatus: 1
},
{
region: 510823,
parent_region: 510800,
name: "剑阁县",
level: 3,
exampleStatus: 1
},
{
region: 511100,
parent_region: 510000,
name: "乐山市",
level: 2,
exampleStatus: 1
}
]

转载于:https://www.cnblogs.com/daleyzou/p/9562367.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/388663.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MAYA插件入门

我们知道&#xff0c; MAYA 是一个基于结点的插件式软件架构&#xff0c;这种开放式的软件架构是非常优秀的&#xff0c;它可以让用户非常方便地在其基础上开发一些自已想要的插件&#xff0c;从而实现一些特殊的功能或效果。 在MAYA上开发自已的插件&#xff0c;你有3种选择&a…

(原創) 如何使用C++/CLI读/写jpg檔? (.NET) (C++/CLI) (GDI+) (C/C++) (Image Processing)

Abstract因为Computer Vision的作业&#xff0c;之前都是用C# GDI写&#xff0c;但这次的作业要做Grayscale Dilation&#xff0c;想用STL的Generic Algorithm写&#xff0c;但C Standard Library并无法读取jpg档&#xff0c;用其它Library又比较麻烦&#xff0c;所以又回头想…

猫眼电影评论_电影的人群意见和评论家的意见一样好吗?

猫眼电影评论Ryan Bellgardt’s 2018 movie, The Jurassic Games, tells the story of ten death row inmates who must compete for survival in a virtual reality game where they not only fight each other but must also fight dinosaurs which can kill them both in th…

c#对文件的读写

最近需要对一个文件进行数量的分割&#xff0c;因为数据量庞大&#xff0c;所以就想到了通过写程序来处理。将代码贴出来以备以后使用。 //读取文件的内容 放置于StringBuilder 中 StreamReader sr new StreamReader(path, Encoding.Default); String line; StringBuilder sb …

ai前沿公司_美术是AI的下一个前沿吗?

ai前沿公司In 1950, Alan Turing developed the Turing Test as a test of a machine’s ability to display human-like intelligent behavior. In his prolific paper, he posed the following questions:1950年&#xff0c;阿兰图灵开发的图灵测试作为一台机器的显示类似人类…

关于WKWebView高度的问题的解决

关于WKWebView高度的问题的解决 IOS端嵌入网页的方式有两种UIWebView和WKWebView。其中WKWebView的性能要高些;WKWebView的使用也相对简单 WKWebView在加载完成后&#xff0c;在相应的代理里面获取其内容高度&#xff0c;大多数网上的方法在获取高度是会出现一定的问题&#xf…

测试nignx php请求并发数,nginx 优化(突破十万并发)

一般来说nginx 配置文件中对优化比较有作用的为以下几项&#xff1a;worker_processes 8;nginx 进程数&#xff0c;建议按照cpu 数目来指定&#xff0c;一般为它的倍数。worker_cpu_affinity 00000001 00000010 00000100 00001000 00010000 00100000 01000000 10000000;为每个进…

mardown 标题带数字_标题中带有数字的故事更成功吗?

mardown 标题带数字统计 (Statistics) I have read a few stories on Medium about writing advice, and there were some of them which, along with other tips, suggested that putting numbers in your story’s title will increase the number of views, as people tend …

使用Pandas 1.1.0进行稳健的2个DataFrames验证

Pandas is one of the most used Python library for both data scientist and data engineers. Today, I want to share some Python tips to help us do qualification checks between 2 Dataframes.Pandas是数据科学家和数据工程师最常用的Python库之一。 今天&#xff0c;我…

置信区间的置信区间_什么是置信区间,为什么人们使用它们?

置信区间的置信区间I’m going to try something a little different today, in which I combine two (completely unrelated) topics I love talking about, and hopefully create something that is interesting and educational.今天&#xff0c;我将尝试一些与众不同的东西…

php中wlog是什么意思,d-log模式是什么意思

D-Log是一种高动态范围的视频素材记录格式&#xff0c;总而言之这个色彩模式为后期调色提供了更大的空间。在相机和摄影机拍摄时&#xff0c;一颗高性能的传感器通常支持11档以上的动态范围&#xff0c;而在8bit的照片或视频上&#xff0c;以符合人眼感知的Gamma进行机内处理和…

PowerShell入门(三):如何快速地掌握PowerShell?

如何快速地掌握PowerShell呢&#xff1f;总的来说&#xff0c;就是要尽可能多的使用它&#xff0c;就像那句谚语说的&#xff1a;Practice makes perfect。当然这里还有一些原则和方法让我们可以遵循。 有效利用交互式环境 一般来说&#xff0c;PowerShell有两个主要的运行环境…

pca 主成分分析_通过主成分分析(PCA)了解您的数据并发现潜在模式

pca 主成分分析Save time, resources and stay healthy with data exploration that goes beyond means, distributions and correlations: Leverage PCA to see through the surface of variables. It saves time and resources, because it uncovers data issues before an h…

UML-- plantUML安装

plantUML安装 因为基于intellid idea,所以第一步自行安装.setting->plugins 搜索plantUML安装完成后&#xff0c;重启idea 会有如下显示安装Graphviz 下载地址 https://graphviz.gitlab.io/_pages/Download/Download_windows.html配置Graphviz环境变量&#xff1a; dot -ver…

rstudio 关联r_使用关联规则提出建议(R编程)

rstudio 关联r背景 (Background) Retailers typically have a wealth of customer transaction data which consists of the type of items purchased by a customer, their value and the date they were purchased. Unless the retailer has a loyalty rewards system, they …

jquery数据折叠_通过位折叠缩小大数据

jquery数据折叠Sometimes your dataset is just too large, and you need a way to shrink it down to a reasonable size. I am suffering through this right now as I work on different machine learning techniques for checkers. I could work for over 18 years and buy…

新鬼影病毒

今天和明天是最后两天宿舍有空调的日子啦,暑假宿舍没空调啊,悲催T__T 好吧,今天是最精华的部分啦对于鬼影3的分析,剩下的都是浮云啦,alg.exe不准备分析了,能用OD调试的货.分析起来只是时间问题.但是MBR和之后的保护模式的代码就不一样啦同学们,纯静态分析,伤不起啊,各种硬编码,…

Silverlight:Downloader的使用(event篇)

(1)Downloader的使用首先我们看什么是Downloader,就是一个为描述Silverlight plug-in下载功能的集合.Downloader能异步的通过HTTP GET Request下载内容.他是一个能帮助Silverlight下载内容的一个对象,这些下载内容包括(XMAL content,JavaScript content,ZIP packages,Media,ima…

决策树信息熵计算_决策树熵|熵计算

决策树信息熵计算A decision tree is a very important supervised learning technique. It is basically a classification problem. It is a tree-shaped diagram that is used to represent the course of action. It contains the nodes and leaf nodes. it uses these nod…

Free SQLSever 2008的书

Introducing SQL Server 2008 http://csna01.libredigital.com/?urss1q2we6这是一本提供自由使用书&#xff01;我把它翻译&#xff0c;或转送有什么关系&#xff01;这样的书还是有几本吧&#xff0c;Introducing Linq,Introducting Silverlight,都是啊&#xff01;嘿嘿。。。…