html页面怎么实现动态加载页面-CSDN论坛

html页面怎么实现动态加载页面

Web 开发 > HTML(CSS)

收藏回复

[问题点数：70分]

⋅html页面怎么实现动态加载页面 更多帖子 关注私信空间博客 qq_25520077 等级 本版专家分：0 结帖率 0%: html页面怎么实现动态加载页面（做成动态页面，怎么向后台请求数据）求给案例或解决方法

2015-09-24 15:31:15

点赞只看楼主引用举报楼主收起

展开阅读全文

⋅面试问题，合格的面试官？ ⋅关于前端的版本控制和管理 ⋅中英文网站是做语言包？还是做好复制一份再翻译？ 更多帖子 关注私信空间博客 zpjshiwo77 等级 本版专家分：4696: 案例网上一大堆，淘宝啊什么都是~~解决方案是ajax技术。（PS：我不会这个技术，感觉也不是一两天就学会的吧，多去网上看看）

2015-09-24 17:11:05

点赞只看TA 引用举报 #1得分 0

⋅此用户还没有发表过任何帖子 关注私信空间博客 sevenea 等级 本版专家分：6: 这几天才接触前端静态页面动态加载数据，用的是ajax。感觉就是ajax通过url向后台请求，后台的接口处理向数据库请求，再返回来数据，渲染到页面中，我也不太懂，大概理解就这样。

2015-09-24 17:35:41

点赞 1 只看TA 引用举报 #2得分 0

⋅zend studio用xdebug调试怎么关闭？

更多帖子

关注私信空间博客

liusaint1992

等级

本版专家分：1641

勋章

GitHub 绑定GitHub第三方账户获取

写的一个小demo
后端代码：1.php



<?php

header("Content-type: text/json; charset=utf-8");

$json['name'] ='功夫熊猫';

$json['content'] ='这是一个好故事';

$json['imageUrl'] = "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=fa7c10c2ab345982c5dfb6d26ac9059f/0b7b02087bf40ad10f784355512c11dfa8ecceec.jpg";

$json = json_encode($json);

echo $json;

return;

?>

前端代码：1.html



<!DOCTYPE html>

<html>

<head>

	<meta charset='utf-8'>

	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

</head>

<style type="text/css">

	.wrap{

		width: 300px;

		height: 100px;

		border: 1px solid #ccc;

	}

	img{

		float: left;

	}

</style>

<body>

	<script type="text/javascript">

		$(document).ready(function(){

			$("#getValue").mouseover(function(){

				$.ajax({

					type: "GET",

					url:"1.php",

					dataType: "json",

					jsonp: "callback",

					success: function(json){

						var item = '<div class="wrap"><img width="100" height="100" src="'+json.imageUrl+'">'+json.name+'<br>'+json.content+'</div>';//根据后台传递过来的数据生成html内容。

						$("body").append(item);//内容添加到页面上。

					},

					error: function(){

						alert("fail");

					}

				});

			}).mouseout(function(){

				$(".wrap").remove();//鼠标移开的时候清除掉这个内容。

			});

		})

	</script>

	<input type="button" value="获取值" id="getValue" >

</body>

</html>

使用ajax获取值。添加到页面。

效果图：

演示：
http://s7324298.ay44.zuji-258.com/1.html

2015-09-27 09:36:43

点赞 3 只看TA 引用举报 #3得分 0

⋅蝶恋花雨的留言板

⋅“Hack for Cloud beginners” Microsoft Hackathon - 微软黑客松大赛开始报名啦！

⋅诚挚邀请大家3.12号参加在广州的微软 MVP 开源社区巡讲(分布式大数据,NET)

更多帖子

关注私信空间博客

版主

蝶恋花雨

等级

本版专家分：10059

勋章

微软MVP 2014年4月荣获微软MVP称号
2013年4月荣获微软MVP称号
2012年4月荣获微软MVP称号: 利用JS或者juqery 利用post get 把参数传递后台，然后进行查询数据库，得到相应的信息返回到前台。例如返货json 或者html等
http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html

2015-09-27 12:25:55

点赞 1 只看TA 引用举报 #4得分 0

⋅（如图）网站左侧菜单栏，从一级菜单移动到二级菜单的过程中，鼠标移入其他一级菜单仍不消失的问题 ⋅5555,博客被封了,求解封 ⋅关于tomcat6，有启动信息显示，但servlet一旦有异常，在IE显示而在console不显示 更多帖子 关注私信空间博客 版主 forwardnow 等级 本版专家分：3358

楼主说的动态页面，也就是类似瀑布流滚动到页面底部加载更多、点击按钮加载更多；

“加载更多”其实也是分页的一种.

传统的分页

  会刷新页面；
  点击第2页，服务器会把第2页的10条数据从数据库取出来,
  然后将数据装填到模板上面，生成HTML页面返回给浏览器，最终呈现到用户面前。

加载更多

  通常是通过Ajax来完成；

  1）发送Ajax请求

    滚动到底部，发送一个Ajax请求到服务器，
    此Ajax请求通常包含分页所需要的参数（比如请求第几页）。

  2）处理返回的数据

    服务器返回的数据通常为JSON类型，如

    {data:[

      {id: "20", username: "zhangsan"},

      {id: "21", username: "lisi"},

    ]}

将其变为HTML追加到<div class="list" role="list">里即可，如

    <div class="list" role="list">

    

      <div class="item">....</div>



      <div class="item">zhangsan</div>

      <div class="item">lisi</div>



    </div>

示例



function pageMore(){

        

        function scrollListen(){

            $(document).scroll(function(){

                var bottomPadding = $(document).height() - $(document).scrollTop() - $(window).height();

                

                if( bottomPadding < 50 ){

                    pageShow();

                    page++;

                }

            });

        }

        function pageShow() {

            var _url = "?action=pageMore&page="+page;

            $.ajax({

                url: _url, type: 'GET', dataType: 'text', timeout: 200, 

                error: function(){ 



                },

                success: function( feedback ) {

                    // feedback => HTML

                    $('#list').append(feedback);

                }

            });

        }



        scrollListen();

    }

2015-09-27 13:09:56

点赞只看TA 引用举报 #5得分 0

⋅程序员要不要找个程序员做老婆？ ⋅怎么取消Extjs grid的表头点击事件？就是让它点击没有任何反应 更多帖子 关注私信空间博客 晓柒哥哥 等级 本版专家分：0: 怎么动态加载div、页面这个页面不定数的

2015-12-23 13:03:35

点赞只看TA 引用举报 #6得分 0

⋅页面重定向 ⋅HTML的框架 ⋅网站开发 更多帖子 关注私信空间博客 醚爱龙 等级 本版专家分：85: 动态加载网页实际上就是后台的应用，你可以去试着用开源后台去实现你要的效果，当你成为大神的时候就可以自己开发后台。

2015-12-24 22:01:38

点赞只看TA 引用举报 #7得分 0

⋅安卓问题，通过http访问servlet ⋅大神帮忙看看，如何自动触发一个FUNCTION事件？ ⋅求大神帮忙看看这个jsp问题 更多帖子 关注私信空间博客 wasd2322 等级 本版专家分：0: 求大家帮忙看看那
<%Usr p = (Usr)session.getAttribute("productuser");%> <%=p.getUsername() %>
你好，我想在JAVASCRIPT里面获取username的值，请问这两句代码应该在javascript里怎么写？

2015-12-24 22:19:13

点赞只看TA 引用举报 #8得分 0

收起

收藏回复

qq_25520077

等级：

关注私信 TA的帖子

个人小结---动态加载JS与Html（前端页面）的2种方式: 1.Js和页面只加载一次，放在同一个容器中 1.1 请求的控制 Jquery的ajax方法中，属性async用于控制请求是同步还是异步，默认是true,即ajax请求默认是异步请求。但有时需要在数据请求完成时才进行下一步操作，这时...

静态页面html传参数实现动态加载: 静态页面实现参数传递，然后js加载对应的数据，这样就能实现前端加载动态的数据了，这样说可能不明不白！举个栗子：用户1和用户2同时访问一个静态页面，但是页面内容...

HTML中容器（div）动态加载HTML页面的方法: 在学习前端相关知识的时候，遇到了div中如何动态切换页面的问题，经过网络上的搜索，发现了一个不错的方法。使用JavaScript代码替换div内容 <script> function load_home() { document....

在html页面动态加载js文件: 在页面加载完成后再加载js文件 window.onload = function(){ var head = document.getElementsByTagName('head')[0]; var script= document.createElement("script"); script.type = "text/javascript"; ...

通过js和模板动态加载html页面: 通过js和模板动态加载html页面

如何在一个页面内动态加载页面？: ## 实现的功能如下点击页面中的按钮，有页面填充满主页面或者部分页面，填充过程为动画

thymeleaf 页面引用实现动态布局加载: thymeleaf 页面引用实现动态布局加载最近在学习使用 springboot+thymeleaf，在把基本的框架布局功能实现了之后，发现了一些新的问题，就是所有页面都是全加载，也就是说每个页面都要实现布局，真是费时又费力。...

网页中常用加载页面的实现原理: 根据网页上各种加载页面，大概总结了下面几种比较常用的实现方法： 1.利用定时器实现加载页面； 2.利用readyState判断实现加载页面； 3.利用滚动条+readyState判断实现加载页面； 4.利用滚动条+onload实现加载...

BootStrap实现动态加载菜单栏并实现点击完成局部页面加载: 一：创建index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...

java实现动态页面转化html实现之java 类方法: HttpTest.java HttpTest.java package com.ys; import java.io.BufferedReader; import java.io.FileOutputStream; import java.io.InputStreamReader; import java.io.OutputStreamWriter; import java.net....

JS实现刷新_重新加载页面: //实现页面重新加载1 之前遇到的问题：浏览器清缓存 http://blog.csdn.net/icecoola_/article/details/76945194 参考：有的是错误的 JS实现重新加载当前页面或者父页面的几种方法在开发过程中想要在某个时机...

jQuery+ajax实现点击左侧菜单，右侧动态加载不同页面的两种方法: 一、完成整体布局（以下只有左侧菜单以及右侧网页） <div class="content"> <div class="s-side"> <ul> <!--这部分是导航栏信息。--&...

JavaScript滚轮实现动态加载页面: 关键技术滑轮滚动事件获取元素距离浏览器顶部的距离元素的添加滑轮滚动事件Firefoxif(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }IE/Opera/Chrome/...

实现在html页面加载之后执行js方法: 浏览器对html页面内容的加载是顺序加载，也就是在html页面中前面先加载，因此当加载到JS脚本时，JS是一种解释性的脚本，也是从上而下顺序执行，由于这段JS代码是立即执行的。第一种方式是把方法写在head中(推荐)让它...

jquery动态加载页面到div中: 使用场景：我经常看到一些系统，点击菜单，容器会动态加载页面，那么这个过程是如何实现实现方式一：绑定点击事件，使用ajax动态加载页面到div中 $.ajax({//异步请求 url:"/table.do", type:'post', dataType:...

VUE页面实现加载外部HTML方法: 本文主要和大家介绍VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。不同以往的IFRAME标签，那种方式比较Low，另外有...

html动态加载页面，页面出现左右闪动的原因: 问题：在使用 load 或者 ajax 动态加载html的到页面时，会左右闪动一下分析：经过测试，这种情况出现在html的页面高度变化出现纵向滚动条时。例如，原始div高度为900px，动态加载页面（1000px）过来，到加载完成。...

html静态页面通过vue实现数据动态化: 看完觉得有用记得给个赞奥，你的赞就是我的动力 1.引入vue，引入jQuery（因为等下用Ajax请求数据用到jQuery）如： <script src="https://cdn.jsdelivr.net/npm/vue"&...

nginx渲染动态页面实现前后端分离: 之前偶然听人提起使用nginx渲染页面而不是使用freemarker渲染，有些不理解nginx是如何渲染的，于是做了一个简单的尝试。以下是本次尝试的demo。服务端服务端就是一个正常的spring接口 @Controller @...

html frame实现页面内容动态切换: 要实现如下效果(只是根据左侧链接，动态改变右侧的网页内容，其余部分都不变)。只需要在整体部分的html文本中对动态切换的frame添加name属性，并且在超链接中设置属性target 指向要改变的frame ...

javascript实现页面的重新加载和页面的刷新: 1、reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload([bForceGet]) 参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, ...

通过template模板引擎加载动态html页面问题: 用template引擎可以解决在js中繁琐的拼接html的字符串问题

Ionic动态加载页面: <!DOCTYPE html> <html lang="en"> <title>Title <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></sc

angular9组件动态加载实现: angular9动态组件前言指令的创建动态组件的核心代码动态组件加载的html动态组件的tsad-item.tsad.component.ts组件统一注册组件的映射效果图参考资料前言按条件加载组件,实现组件的灵活切换,减少大量ngIf的使用,在...

js实现加载公共html页面: $(document).ready(function(){ $(function() { $('nav').load('/UI/web/System/_Public/nav.html'); }); })

html和jsp的区别--静态页面和动态页面的区别: 一、静态web页面，一般指html： 1、在静态Web程序中，客户端使用Web浏览器（IE、FireFox等）经过网络(Network)连接到服务器上，使用HTTP协议发起一个请求（Request），告诉服务器我现在需要得到哪个页面，所有的...

网页页面预加载动画的实现，加载后隐藏: 我们做web app的时候，可以做一个页面加载广告，在你网页加载的时候，先出现一段gif动图或者是海报。下面是实现页面加载动画的代码首先js代码的实现 (function($){ $(window).load(function(){ $('#begin')....

Web前端_实现html页面加载进度条(转载): 原文地址:... html实例代码如下: <div class="out" style="background-image: url(../img/bg.png); z-index: 999; position: fixed; width: 100%; height: 100...

页面加载进度条或加载动态图实现: https://www.cnblogs.com/qtdwn/p/8576491.html ... 插件实现：https://www.cnblogs.com/zichi/archive/2018/10/20/9823043.html 转载于:https://www.cnbl...

轻松学Linux系列课程: 从0开始，Linux云计算系列课程，包含Linux初级运维、运维、初级架构师、云计算运维及开发..... a:0:{}

相关热词 c# mssql操作 c#免费的人脸识别sdk c# image c#書籍推薦 c#打印pdf中的图片 c# 抽象函数的作用 mono打包c# c#网关技术选型 c#比java简单 c#线程和锁