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,一经查实,立即删除!

相关文章

arcgis镜像图形工具,ArcGis图形编辑

一、编辑工具条介绍二、草图工具介绍Sketch Tool&#xff1a;使用草图工具来创建点要素或是线或面要素的节点。双击或是F2键结束草图状态&#xff0c;转化为要素。Intersection Tool&#xff1a;使用相交工具在两个线要素相交(或延长相交)的地方创建一个节点。如图&#xff1a;…

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…

128.Two Sum

题目&#xff1a; Given an array of integers, return indices of the two numbers such that they add up to a specific target. 给定一个整数数组&#xff0c;返回两个数字的索引&#xff0c;使它们相加到特定目标。 You may assume that each input would have exactly on…

php获取错误信息函数,关于php:如何获取mail()函数的错误消息?

我一直在使用PHP mail()函数。如果邮件由于任何原因未发送&#xff0c;我想回显错误消息。 我该怎么做&#xff1f;就像是$this_mail mail(exampleexample.com, My Subject, $message);if($this_mail) echo sent!;else echo error_message;谢谢&#xff01;当mail()返回false时…

关于夏季及雷雨天气的MODEM、路由器使用注意事项

每年夏季是雷雨多发季节&#xff0c;容易出现家用电脑因而雷击造成电脑硬件的损坏和通讯故障&#xff0c;为了避免这种情况的的发生&#xff0c;保护您的财产不受损失&#xff08;一般雷击照成损坏的设备是没得保修的&#xff09;&#xff0c;建议您继续阅读下面内容&#xff1…

创建Console应用程序,粘贴一下代码,创建E://MyWebServerRoot//目录,作为虚拟目录,亲自测试通过,

创建Console应用程序&#xff0c;粘贴一下代码&#xff0c;创建E://MyWebServerRoot//目录&#xff0c;作为虚拟目录&#xff0c;亲自测试通过&#xff0c; 有一个想法&#xff0c;调用ASP.DLL解析ASP&#xff0c;可是始终没有找到资料&#xff0c;有待于研究&#xff0c;还有…

c#对文件的读写

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

php表格tr,jQuery+ajax实现动态添加表格tr td功能示例

本文实例讲述了jQueryajax实现动态添加表格tr td功能。分享给大家供大家参考&#xff0c;具体如下&#xff1a;功能&#xff1a;ajax获取后台返回数据给table动态添加tr/tdhtml部分&#xff1a;ajax部分&#xff1a;var year $(#year).val();//下拉框数据var province $(#prov…

maya的简单使用

1、导出obj类型文件window - settings preferences - plug- in Manager objExport.mllfile - export selection就有OBJ选项了窗口-设置/首选项- 插件管理 objExport.mll文件-导出当前选择2、合并元素在文件下面的下拉框&#xff0c;选择多边形。按住shift键&…

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;阿兰图灵开发的图灵测试作为一台机器的显示类似人类…

查看修改swap空间大小

查看swap 空间大小(总计)&#xff1a; # free -m 默认单位为k, -m 单位为M   total used free shared buffers cached  Mem: 377 180 197 0 19 110  -/ buffers/ca…

关于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;为每个进…

多米诺骨牌v.1MEL语言

// // //Script Name:多米诺骨牌v.1 //Author:疯狂小猪 //Last Updated: 2011.10.5 //Email:wzybwj163.com // //---------------------------------------------------------------------------- //-----------------------------------------------------------------…

THINKPHP3.2视频教程

http://edu.51cto.com/lesson/id-24504.html lunix视频教程 http://bbs.lampbrother.net/read-htm-tid-161465.html TP资料http://pan.baidu.com/s/1dDCLFRr#path%252Fthink 微信开发&#xff0c;任务吧&#xff0c;留着记号了

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 …

897. 递增顺序查找树-未解决

897. 递增顺序查找树 https://leetcode-cn.com/contest/weekly-contest-100/problems/increasing-order-search-tree/ package com.test;import java.util.ArrayList; import java.util.Collections; import java.util.List;/*** author stono* date 2018/9/2* 897. 递增顺序查…

Azure PowerShell (16) 并行开关机Azure ARM VM

《Windows Azure Platform 系列文章目录》 并行开机脚本&#xff1a; https://github.com/leizhang1984/AzureChinaPowerShell/blob/master/ARM/2StartAzureARMVM/StartAzureRMVM.txt 并行关机脚本&#xff1a; https://github.com/leizhang1984/AzureChinaPowerShell/blob/mas…