javascript+ajax實現產品頁面載入資訊_javascript技巧

js

//載入頁面//載入產品列表function GetProductList() {  function PostParam(param) {    param.key = "lm324";    return param;  }  var PostExecParam = {    ClassName: "AnxinE.BLL.Product.ProductInfoBLL",    MethodName: "Search",    ParamModelName: "AnxinE.Model.Product.ProductInfoParam",    onRequest: PostParam,    onResponse: function (result) {      if (result != null) {        var html = "";        //匯率判斷        //<td>" + (result.SupplierProductList[i].ProductList[j].PriceUSD.toString() == '0' ? 1 : result.SupplierProductList[i].ProductList[j].USDPriceList[0].MinQuantity) + ":" + result.SupplierProductList[i].ProductList[j].PriceUSD + "</td>        //展示搜尋-產品資訊列表        for (var i = 0; i < result.SupplierProductList.length; i++) {          for (var j = 0; j < result.SupplierProductList[i].ProductList.length; j++) {            //if (result.SupplierProductList[i].ProductList[j].PriceUSD!=null) {            //}            html += "<tr><td>" + result.SupplierProductList[i].ProductList[j].Model + "</td><td>" + result.SupplierProductList[i].ProductList[j].Manufacturer + "</td><td>" + (result.SupplierProductList[i].ProductList[j].Quantity) + "</td><td>" + result.SupplierProductList[i].ProductList[j].ShipDays + "</td><td>" + result.SupplierProductList[i].ProductList[j].MinOrderQuantity + "+</td><td>" + result.SupplierProductList[i].ProductList[i].DeliveryPoint + "</td><td>" + result.SupplierProductList[i].ProductList[j].PriceUSD + "</td><td>" + result.SupplierProductList[i].ProductList[j].PriceCNY + "</td><td><a href=''>加入購物車</td></tr><br/>";          }        }        //展示搜尋--品牌列表        var html2 = "<h2 class='cur1'>全部</h2>";        if (result.ManufacturerList.length > 0) {          for (var i = 0; i < result.ManufacturerList.length ; i++) {            if (result.ManufacturerList[i].KeyName != null) {              if (i < 5) {                html2 += "<h2 href='javascript:void(0);' id='" + result.ManufacturerList[i].KeyName + "' onclick='Trademark(this)' >" + result.ManufacturerList[i].KeyName + "</h2>";              }            }          }          //<a href="javascript:void(0);" id="regain_r2">收回</a>          html2 += "<a href='javascript:void(0);' id='more_r2' onclick='More_r2()'>更多+</a>";        }        //不刪除第一個內容，將產品資訊表追加        $("#r2_text2").not($(".cur1")).empty();        $("#r2_text2").append(html2);        //改寫品牌行        $(".tr3").empty();        $(".tr3").append(html);      }    }  };  $.ajaxRequest(PostExecParam);};

.cshtml

<div class="secect_r">    <div class="top_right">      <ul>        <li class="list1"><img src="~/MvcImages/ycysqd/sx_03.gif" /><p>篩選</p></li>        <li class="list2"><a href="">整合電路</a>>></li>        @*<li class="list3"><a>INFINEON</a><span>×</span></li>        <li class="list3"><a>100-1000件</a><span>×</span></li>        <li class="list3"><a>國內</a><span>×</span></li>*@      </ul>      <div class="r1"><h1>型號：</h1><div class="text1"><input id="typeofproduct" type="text" value="輸入型號" /></div></div>      <div class="r2"><h1>品牌：</h1><div class="text2" id="r2_text2"><h2 class="cur1">全部</h2><h2>FTDI</h2><h2>WIINET</h2><h2>3M-STATIC CONTROL SOLUTIONS</h2><h2>AAVID THERMALLOY</h2><h2>ALLIANCE</h2><a href="javascript:void(0);" id="more_r2" onclick="More_r2()">更多+</a></div><div class="text2" id="r2_text2_2" style="display:none"></div></div>      <div class="r3"><h1>庫存數量：</h1><div class="text1"><input type="text" class="ChangeInventoryquantity" id="startnumber" value="1000" /></div><a>-</a><div class="text2"><input class="ChangeInventoryquantity" id="endnumber" type="text" value="1000000" /></div><a>件</a></div>      <div class="r4"><h1>交貨地：</h1><div class="text2"><h2 class="cur1">全部</h2><h2 onclick="Trademark(this)">國內</h2><h2 onclick="Trademark(this)">香港</h2></div></div>    </div>  </div>  <table class="bottom_right">    <tr class="tr1">      <td class="td1"><p>型號</p></td>      <td class="td2"><p>品牌</p></td>      <td class="td3"><p>庫存數量</p></td>      <td class="td4"><p>貨期</p></td>      <td class="td5"><p>起訂量</p></td>      <td class="td6"><p>交貨地</p></td>      <td class="td7"><p>香港交貨</p></td>      <td class="td8"><p>國內交貨</p></td>      <td class="td9"><p>操作</p></td>    </tr>    <tr class="tr2">      <td></td>      <td></td>      <td></td>      <td><p>（工作日）</p></td>      <td></td>      <td></td>      <td></td>      <td><p>（含17%稅）</p></td>      <td></td>    </tr>    <tbody class="tr3"></tbody>  </table>

以上所述就是本文的全部內容了，希望大家能夠喜歡。