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>
效果图：
时间： 2024-10-09 18:34:18
ajax+json数据传输

ajax+json数据传输的相关文章

JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表

STRUS2+MYBATIS+SPRING ajax+json 返回list 给select 实现级联

Jsp&JavaScript &jQuery &Ajax&Json

032.Ajax+Json+Jquery

struts2 + ajax + json的结合使用，实例讲解

echarts3+ajax+json+SpringMVC+mybatis

5.QT中关于HTTPClient相关的操作，Json数据传输

Spring 接收转换 jquery ajax json数组字符串

Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo
