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

qq_25520077 2015-09-24 03:31:15

html页面怎么实现动态加载页面（做成动态页面，怎么向后台请求数据）求给案例或解决方法

...全文

35256 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

wasd2322 2015-12-24

打赏
举报

求大家帮忙看看那 <%Usr p = (Usr)session.getAttribute("productuser");%> <%=p.getUsername() %> 你好，我想在JAVASCRIPT里面获取username的值，请问这两句代码应该在javascript里怎么写？

醚爱龙 2015-12-24

打赏
举报

动态加载网页实际上就是后台的应用，你可以去试着用开源后台去实现你要的效果，当你成为大神的时候就可以自己开发后台。

晓柒哥哥 2015-12-23

打赏
举报

怎么动态加载div、页面这个页面不定数的

蝶恋花雨 2015-09-27

打赏
举报

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

liusaint1992 2015-09-27

打赏
举报

写的一个小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

forwardNow 2015-09-27

打赏
举报

楼主说的动态页面，也就是类似瀑布流滚动到页面底部加载更多、点击按钮加载更多； “加载更多”其实也是分页的一种. 传统的分页会刷新页面；点击第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();
    }

sevenea 2015-09-24