ajax+json数据传输
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!doctype html> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <link rel="stylesheet" type="text/css" href="./css/mylng_common.css" /> <link rel="stylesheet" type="text/css" href="./css/mylng_index.css" /> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <title>麦安集-myLng</title> <script language="javascript" type="text/javascript"> $(document).ready(function() { var web_url = "<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"%>"; $.ajax( { url: web_url +'do/lngNeed/findLNGNeedList', type:'post', dataType:'json', data:{ type : 0 }, success:function(data) { var lngNeedList = data.lngNeedList; var max = null; if (lngNeedList.length>3){ max = 3; } else { max=lngNeedList.length; } for(var i = 0;i < max; i++){ var lngNeed = lngNeedList[i]; var id = lngNeed.id; var a = "<li>"+ "<div style='padding-left:0px; border:1px solid #999;width:230px;height:350px' >"+ "<div style='width:100%;height:100%'> <div style='width:100%;height:100%' >"+ "<div class='blocktop'> <img src='../mylng/do/file/getLngNeedImg?id="+id+"' width='100%' height='100%' '> </div>"+ "<div class='blockbottom'>"+ "<div style='display:inline;float:left; width:50%; padding-left:5px'>"+ "<ul>"+ "<li><font color='#000000' size='-2'>采购量：</font><font color='#FFCC00' size='-2'>"+lngNeed.amount+"</font></li>"+ "<li><font color='#000000' size='-2'>采购时间：</font><font color='#FFCC00' size='-2'>"+lngNeed.pickTimeToString+"</font></li>"+ "<li><font color='#000000' size='-2'>配送方式：</font><font color='#FFCC00' size='-2'>"+lngNeed.sendWayCN+"</font></li>"+ "<li><font color='#000000' size='-2'>支付定金：</font><font color='#FFCC00' size='-2'>"+lngNeed.depositCN+"</font></li>"+ "<li><font color='#000000' size='-2'>发票类型：</font><font color='#FFCC00' size='-2'>"+lngNeed.invoiceTypeCN+"</font></li>"+ "<li><font color='#000000' size='-2'>"+lngNeed.createTime+"</font></li>"+ "</ul>"+ "</div>"+ "<div style='float:right; display:inline;padding-bottom:10px'>"+ "<div style='padding-top:10px; padding-right:5px'><font color=''#999999'>120人查看</font>"+ "<div style='padding-top:30px; padding-left:20px'>"+ "<button>报价</button></div></div></div></div></div></div></li>"; $("#1").append(a); } } }); $.ajax( { url: web_url +'do/lngQuote/findLngQuoteList', type:'post', dataType:'json', data:{ type : 0 }, success:function(data) { var lngQuoteList = data.lngQuoteList; var max = null; if (lngQuoteList.length>3){ max = 3; } else { max=lngQuoteList.length; } for(var i = 0;i < max; i++){ var lngQuote = lngQuoteList[i]; var id = lngQuote.id; var a = "<li>"+ "<div style='padding-left:0px; border:1px solid #999;width:230px;height:350px' >"+ "<div style='width:100%;height:100%'> <div style='width:100%;height:100%' >"+ "<div class='blocktop'> <img src='../mylng/do/file/getLngQuoteImg?id="+id+"' width='100%' height='100%' '> </div>"+ "<div class='blockbottom'>"+ "<div style='display:inline;float:left; width:50%; padding-left:5px'>"+ "<ul>"+ "<li><font color='#000000' size='-2'>现货类型：</font><font color='#FFCC00' size='-2'>"+lngQuote.lngTypeCN+"</font></li>"+ "<li><font color='#000000' size='-2'>货源类型：</font><font color='#FFCC00' size='-2'>"+lngQuote.lngSourceCN+"</font></li>"+ "<li><font color='#000000' size='-2'>气化率：</font><font color='#FFCC00' size='-2'>"+lngQuote.gasificationRate+"</font></li>"+ "<li><font color='#000000' size='-2'>供货量：</font><font color='#FFCC00' size='-2'>"+lngQuote.amount+"</font></li>"+ "<li><font color='#000000' size='-2'>配送范围：</font><font color='#FFCC00' size='-2'>"+lngQuote.sendAreaCN+"</font></li>"+ "<li><font color='#000000' size='-2'>"+lngQuote.createTime+"</font></li>"+ "</ul>"+ "</div>"+ "<div style='float:right; display:inline;padding-bottom:10px'>"+ "<div style='padding-top:10px; padding-right:5px'><font color=''#999999'>120人查看</font>"+ "<div style='padding-top:30px; padding-left:20px'>"+ "<button>询价</button></div></div></div></div></div></div></li>"; $("#2").append(a); } } }); $('.menu').click(function(){ $('.menu_ul').slideToggle(300); }); }); </script> <style type="text/css"> * { margin: 0; padding: 0; } body, ul, li { margin: 0px; padding: 0px; } .nav-mod { position: relative; z-index: 15; } .categoryhd { border-bottom: 2px solid #0759C4; } .categoryhd { position: relative; height: 40px; line-height: 40px; } .categoryhd { border-bottom: 2px solid #0759c4; } .more-mod { position: absolute; bottom: 6px; right: 0px; padding: 0px 30px 0px 20px; height: 20px; line-height: 20px; display: block; font-family: simsun; color: #333; } .goods_request { height: 350px; border-right: 1px solid #E3E3E3; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color #E3E3E3 #E3E3E3; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; } .goods_request.first { width: 233px; border-left: 0px none; } .goods_request li { float: left; width: 249px; } .divblock { border: 1px solid #FFF00; } .blocktop { position: relative; width: 100%; height: 65%; display: block; } .blockbottom { display: block; width: 100%; height: 35%; } ul, li { list-style-type: none; padding: 0; margin: 0 } </style> <div class="topbar"> <div class="w1000"> <nav class="toplink"> <span style="margin-right:10px;">欢迎来到myLNG</span> <a href="#" style="display:none">退出</a> <a href="#">请登陆</a> <a href="#">免费注册</a> </nav> <nav class="topmenu"> <ul> <li> <a href="#">会员中心</a> </li> <li>|</li> <li> <span id="">交易时间：工作日8:30-17:00</span> </li> </ul> </nav> </div> </div> <div class="mall_head"> <div class="w1000"> <div class="search"> <div class="select"> <select id=""> <option>LNG现货</option> <option>LNG罐车</option> </select> </div> <div class="text"> <input id="" type="text" placeholder="请输入..." value="" autocomplete="off"/> </div> <div class="button"> <input type="button" value="搜索"/> </div> </div> <h1 class="logo"> <a href="http://www.baidu.com"></a> </h1> </div> </div> <div class="mall_nav"> <nav class="w1000"> <ul> <li ><a id="" href="#" >首页</a></li> <li ><a id="" href="#" ><i class="icon_hot"></i>LNG现货</a></li> <li ><a id="" href="#" >LNG罐车</a></li> <li ><a id="" href="#" >统计分析</a></li> <li ><a id="" href="#" >品牌展示</a></li> </ul> </nav> </div> <div class="mall_menu"> <div class="w1000" style="z-index:9;"> <nav class="menu"> <h2><a href="javascript:void(0);">产品分类</a></h2> <ul class="menu_ul"> <li class="item"> <h4 class="my" data-mnemonic=""> <i class="icon_arrow"></i>LNG现货需求</h4> <p>总采购量<b id="">200.5</b>吨</p> </li> <li class="item"> <h4 class="my" data-mnemonic=""> <i class="icon_arrow"></i>LNG现货供应</h4> <p>总供应量<b id="">200.5</b>吨</p> </li> <li class="item"> <h4 class="my" data-mnemonic=""> <i class="icon_arrow"></i>LNG罐车需求</h4> <p>总计<b id="">200</b>条找车信息</p> </li> <li class="item"> <h4 class="my" data-mnemonic=""> <i class="icon_arrow"></i>LNG罐车供应</h4> <p>总计<b id="">200</b>辆空车</p> </li> </ul> </nav> </div> </div> <div class="index_banner"> <div id="top_banner" class="slide"> <div class="bg" style="top: 0px;left: 0px;position: absolute;opacity: 1;background-image:url(img/bg_test02.jpg)"> <a href="#" target="_self"></a> </div> </div> <div id="top_banner_point" class="w1000"> <div class="slide_btn"> <a href="javascript:void(0)"></a> <a href="javascript:void(0)"></a> <a href="javascript:void(0)"></a> </div> </div> </div> <div class="w1000"> <nav class="board"> <h3> <span>发布信息</span> </h3> <ul class="release_ul"> <li class="release_item"> <h4>解决您的需求</h4> <a>发布LNG现货需求</a> <a>发布LNG罐车需求</a> </li> <li class="release_item"> <h4>解决您的供应</h4> <a>发布LNG现货供应</a> <a>发布LNG现货供应</a> </li> </ul> </nav> </div> <div class="w1000"> <div class="nav-mod categoryhd"> <h3>LNG现货需求</h3> <a href="#" target="_blank" class="more-mod">更多></a></div> <ul class="goods_request" id="1"> <li> <div class="divblock"> <div style="float:left;border:1px solid #999;width:235px;height:350px"><img src="img/qiugoulngxianhuo.png" width="100%" height="100%"></div> </div> </li> </ul> </div> <div class="w1000" style="padding-top:20px"> <div class="nav-mod categoryhd"> <h3>LNG现货供应</h3> <a href="#" target="_blank" class="more-mod">更多></a></div> <ul class="goods_request" id="2"> <li> <div class="divblock"> <div style="float:left;border:1px solid #999;width:235px;height:350px"><img src="img/lngyouzhixianhuo.png" width="100%" height="100%"></div> </div> </li> <!-- <li > <div class="divblock" style="padding-left:5px" > <div style="padding-left:0px; border:1px solid #999;width:230px;height:350px"> <div style="width:100%;height:100%"> <div class="blocktop"> <img src="img/lngxianhuogongyin.png" width="100%" height="100%"> </div> <div class="blockbottom"> <div style="display:inline;float:left; width:50%; padding-left:5px"> <ul> <li><font color="#000000" size="-2">采购量：</font><font color="#FFCC00" size="-2">20吨</font></li> <li><font color="#000000" size="-2">采购时间：</font><font color="#FFCC00" size="-2">2015.03.28</font></li> <li><font color="#000000" size="-2">配送方式：</font><font color="#FFCC00" size="-2">自提</font></li> <li><font color="#000000" size="-2">支付定金：</font><font color="#FFCC00" size="-2">不支付</font></li> <li><font color="#000000" size="-2">发票类型：</font><font color="#FFCC00" size="-2">一票制</font></li> <li><font color="#999999" size="-2">2015.03.21</font></li> </ul> </div> <div style="float:right; display:inline;padding-bottom:10px"> <div style="padding-top:10px; padding-right:5px"><font color="#999999">120人查看</font> <div style="padding-top:30px; padding-left:20px"> <button>报价</button> </div> </div> </div> </div> </div> </div> </div> </li> <li > <div class="divblock" style="padding-left:10px"> <div style="padding-right:0px; border:1px solid #999;width:230px;height:350px"> <div style="width:100%;height:100%"> <div class="blocktop"> <img src="img/lngxianhuogongyin.png" width="100%" height="100%"> </div> <div class="blockbottom"> <div style="display:inline;float:left; width:50%; padding-left:5px"> <ul> <li><font color="#000000" size="-2">采购量：</font><font color="#FFCC00" size="-2">20吨</font></li> <li><font color="#000000" size="-2">采购时间：</font><font color="#FFCC00" size="-2">2015.03.28</font></li> <li><font color="#000000" size="-2">配送方式：</font><font color="#FFCC00" size="-2">自提</font></li> <li><font color="#000000" size="-2">支付定金：</font><font color="#FFCC00" size="-2">不支付</font></li> <li><font color="#000000" size="-2">发票类型：</font><font color="#FFCC00" size="-2">一票制</font></li> <li><font color="#999999" size="-2">2015.03.21</font></li> </ul> </div> <div style="float:right; display:inline;padding-bottom:10px"> <div style="padding-top:10px; padding-right:5px"><font color="#999999">120人查看</font> <div style="padding-top:30px; padding-left:20px"> <button>报价</button> </div> </div> </div> </div> </div> </div> </div> </li> <li > <div class="divblock"> <div style="float:right;border:1px solid #999;width:235px;height:350px"> <div style="width:100%;height:100%"> <div class="blocktop"> <img src="img/lngxianhuogongyin.png" width="100%" height="100%"> </div> <div class="blockbottom"> <div style="display:inline;float:left; width:50%; padding-left:5px"> <ul> <li><font color="#000000" size="-2">采购量：</font><font color="#FFCC00" size="-2">20吨</font></li> <li><font color="#000000" size="-2">采购时间：</font><font color="#FFCC00" size="-2">2015.03.28</font></li> <li><font color="#000000" size="-2">配送方式：</font><font color="#FFCC00" size="-2">自提</font></li> <li><font color="#000000" size="-2">支付定金：</font><font color="#FFCC00" size="-2">不支付</font></li> <li><font color="#000000" size="-2">发票类型：</font><font color="#FFCC00" size="-2">一票制</font></li> <li><font color="#999999" size="-2">2015.03.21</font></li> </ul> </div> <div style="float:right; display:inline;padding-bottom:10px"> <div style="padding-top:10px; padding-right:5px"><font color="#999999">120人查看</font> <div style="padding-top:30px; padding-left:20px"> <button>报价</button> </div> </div> </div> </div> </div> </div> </div> </li> --> </ul> </div> <footer class="mall_foot"> <div class="w1000"> <div class="list clearfix"> <ul> <li class="one"> <img src="img/foot_logo.png" width="140" height="40"> <h5>客服热线：0571-123456</h5> <h5>投诉专线：0571-123456</h5> <p>周一到周五 8:30-17:00</p> </li> <li class="two"> <h4>我是买方</h4> <ol> <li><a href="" target="_blank">我是买家，如何找货？</a></li> <li><a href="" target="_blank">在线找车</a></li> <li><a href="" target="_blank">如何发布找车需求</a></li> <li><a href="" target="_blank">现货搜索</a></li> </ol> </li> <li class="three"> <h4>我是卖方</h4> <ol> <li><a href="" target="_blank">我是卖家，如何销售？</a></li> <li><a href="" target="_blank">如何发布空车供应</a></li> <li><a href="" target="_blank">需求搜索</a></li> </ol> </li> <li class="four"> <h4>交易指南</h4> <ol> <li><a href="" target="_blank">交易规则</a></li> <li><a href="" target="_blank">行情资讯</a></li> <li><a href="" target="_blank">怎样保证交易安全</a></li> </ol> </li> <li class="five"> <h4>常见问题</h4> <ol> <li><a href="" target="_blank">注册/登陆流程</a></li> <li><a href="" target="_blank">无法登陆/忘记密码</a></li> <li><a href="" target="_blank">会员中心</a></li> </ol> </li> <li class="six"> <h4>服务号</h4> <img src="img/foot_erweima.png" width="110" height="110"> </li> </ul> </div> <div class="link"> <a href="#" target="_blank">免责条款</a> | <a href="#" target="_blank">隐私保护</a> | <a href="#" target="_blank">公司简介</a> </div> <div class="text">COPYRIGHT © 麦安集 www.mylng.com</div> <div class="img"> <img src="img/foot_img01.png" width="106" height="40"> <img src="img/foot_img02.png" width="113" height="40"> <img src="img/foot_img03.png" width="110" height="40"> </div> </div> </footer>
效果图：
