页面html代码:
<li>
<div class="coll-tit"><span class="coll-icon"><i
class="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页面示意图:

部分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
}
]

JQuery发起ajax请求,并在页面动态的添加元素的更多相关文章

  1. jQuery实现Ajax请求时,页面显示等待的效果,超过指定请求时间后,进行其他操作

    背景:有一个按钮,点击之后向后端程序发起Ajax请求,在请求结果没有返回之前,页面显示等待的效果,此时仍旧是异步请求,等待的效果在接收到结果后撤销. 需求:因为网络延迟或者后端程序的问题,在发起Aja ...

  2. 关于解决JQuery发送Ajax请求后,IE缓存数据不更新的问题

    http://www.cnblogs.com/lys_013/archive/2013/08/07/3243435.html 今天在做ajax页面无刷新请求后台服务器数据的时候,IE下遭遇Ajax缓存 ...

  3. Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)

    1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...

  4. Struts2处理(jQuery)Ajax请求

    1. Ajax     Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...

  5. JQuery发送ajax请求不能用数组作为参数

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

  6. Angular和jQuery的ajax请求的差别

    近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...

  7. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  8. 使用es6的then()方法封装jquery的ajax请求

    使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...

  9. Servlet处理(jQuery)Ajax请求

    1. jQuery     jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...

随机推荐

  1. [转]How to Create Custom Filters in AngularJs

    本文转自:http://www.codeproject.com/Tips/829025/How-to-Create-Custom-Filters-in-AngularJs Introduction F ...

  2. java的wait/notify小结

    wait()是使线程停止运行,而notify使停止的线程继续运行 wait()锁释放与notify()锁不释放 当线程呈wait状态时,调用线程对象的interrupt()方法会出现异常 带一个参数的 ...

  3. Myeclipse修改jdk版本流程

    Myeclipse修改jdk版本流程 很多时候,项目没有用对jdk版本时候,项目报错,在MyEclipse中,要修改JDK版本 有三处地方需要注意:!! 1.第一处 2.第二处 3.第三处

  4. SQL——行转列,列转行

    行转列,列转行是我们在开发过程中经常碰到的问题.行转列一般通过CASE WHEN 语句来实现,也可以通过 SQL SERVER 2005 新增的运算符PIVOT来实现.用传统的方法,比较好理解.层次清 ...

  5. IIS报错试图加载格式不正确的程序集解决办法 64位WinServer系统兼容32位程序集

    问题描述:     将网站/WCF发布到IIS后运行报这个错. 原因:     64位系统和32系统不匹配导致. 解决办法:     方法一.注册32位IIS(必须卸载64位IIS)         ...

  6. List 去重操作

    list集合的去重操作 List<string> listCatalogID = list.Select(a=>a.CatalogID).Distinct().ToList(); 代 ...

  7. C#Winform中ToolTip的简单用法,

    ToolTip它能够为我们的软件提供非常漂亮的提示信息,提高软件的可用性,给用户比较好的体验. 使用,在窗体加载时加载以下代码: var toolTip1 = new ToolTip(); toolT ...

  8. IDEA 生成 JPA实体类

    文章目录1.创建工程2.连接数据源3.生成`JPA`实体类4.生成实体类结果1.创建工程使用Maven来构建工程,为了简化创建步骤 创建一个新工程不包含任何Maven模板,[按需添加] 命名 Grou ...

  9. R语言基础命令与安装

    1. R的安装过程 1.1.首先附上清华线路的下载链接Windows版3.3.1 1.2. 选择安装路径 1.3. 注意根据自己的计算机位数选择,如我的是64位,便选择64位安装. 1.4. 其他默认 ...

  10. 使用COCOStudio中各种资源

    UI Editor: 先把项目导出的json和资源文件放到TestGame项目的Resource目录中 1. 在HelloWorldScene.cpp顶部添加引用#include "coco ...