动态加载网页的途径

1.网页向服务器发出请求得到数据后利用JS完成动态加载

例:
ps:整段代码可能在大家的机器上运行起来会报错

(原因是代码中一些class的设置和路径)

但是,代码我是亲自测试过 ok 的 大家可以借鉴,我也加了一些注释

网页端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
	function get_info(){
		$.ajax({ //利用ajax对象发送请求
        type: "GET",
        url:"http://localhost:8080/first/Doit",
        dataType: "json",
        jsonp: "callback",
        success: function(json){ //接收到数据后运行这个函数,json对象是返回的数据
        	var i=0;
        	while(json[i]){ //这里我服务器返回的是jsonarray的数据所以用下标的方式访问,只要json[i]不为空就循环下去
        		var item ="<tr><td style='text-align:center; line-height:30px'><div class='dropdown'><a href='#' class='dropdown-toggle' data-toggle='dropdown'>"+json[i].name+"</a><ul class='dropdown-menu'><img src='1.png'></ul></div></td><td style='text-align:right'><a href='#'>车价:"+json[i].price+"</a><button type='button' class='btn btn-primary'><a href='login.html' style='color: white'>查看</a></button></td></tr>";
                $("#biao").append(item);//内容添加到当前页面上,#biao表示id是biao的标签
                i++;
        	}
            
        },
        error: function(){
            alert("fail");
        }
    });
	}
</script>
</head>
<body>
<center>
	<h2>二手车市场</h2>
</center>

<table class="table table-bordered" id="biao"></table>
<table ></table>
<script>get_info()</script>
</body>
</html>
服务器端:(Javaee)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("utf-8");
	    response.setContentType("application/json; charset=utf-8");//返回json
		int i=1;
		JSONObject json=new JSONObject(); //这里是服务器封装jsonarray数据的方式
		JSONArray J=new JSONArray();
		json.put("name","劳斯莱斯" );//把单个jsonobject装进jsonarray就可以了
		json.put("price","100" );
		J.add(json);
		json.clear();
		json.put("name","奔驰" );
		json.put("price","80" );
		J.add(json);
		System.out.println(J);
		PrintWriter out = response.getWriter();  
        out.append(J.toString()); //给网页发送json数据
	}

2.网页向服务器发出请求后,服务器直接返回带有数据的网页

ps:下面这段代码同上,只供大家借鉴

服务器端
void send_market(HttpServletRequest request, HttpServletResponse response) throws SQLException, IOException{
		Connection connection=cpds.getConnection();
		request.setCharacterEncoding("utf-8");
	    response.setContentType("text/html; charset=utf-8");//返回HTML网页
		String sql = "SELECT car_id,name,addr,price,distance,out_put,degree FROM first.market where car_id=?";
		String id=request.getParameter("id");
		Object[] objs = {id};
		Market M=doit.fetchMarket(connection, sql, objs);//从数据库取数据并封装到Market对象里
		PrintWriter out = new PrintWriter(response.getWriter());  
		//这里就是服务器用out对象返回一个HTML网页
		out.write("<!DOCTYPE html><html><head><meta charset=\'UTF-8\'><title>Insert title here</title><link href='css/bootstrap.min.css' rel='stylesheet'><script src='js/jquery-2.1.4.min.js'></script><script src='js/bootstrap.min.js'></script></head><body><center><h2>汽车详情</h2><img src='");
		out.write(M.getCar_id().concat(".png'"));
		out.write("></center><br><br><center><div style='width:500px;'><table class='table table-bordered'><tr><td>车名:</td><td>");
		out.write(M.getName());
		out.write("</td></tr><tr><td>车价:</td><td>");
		out.write(String.valueOf(M.getPrice()) );
		out.write("</td></tr><tr><td>城市:</td><td>");
		out.write(M.getAddr());
		out.write("</td></tr><tr><td>里程:</td><td>");
		out.write(String.valueOf(M.getDistance()));
		out.write("</td></tr><tr><td>档数:</td><td>");
		out.write(String.valueOf(M.getDegree()));
		out.write("</td></tr><tr><td>排量:</td><td>");
		out.write(String.valueOf(M.getOut_put()));
		out.write("</td></tr></table></div></center></body></html>");
	}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值