javascript+ajax實現(xiàn)產品頁面加載信息

更新時間：2015年07月09日 09:36:37 投稿：hebedich

本文給大家分享的是使用javascript結合ajax實現(xiàn)產品頁面無刷新加載信息的代碼，非常的簡單實用，有需要的小伙伴可以參考下。

//加載頁面

//加載產品列表
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>&gt;&gt;</li>
        @*<li class="list3"><a>INFINEON</a><span>&times;</span></li>
        <li class="list3"><a>100-1000件</a><span>&times;</span></li>
        <li class="list3"><a>國內</a><span>&times;</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>

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

您可能感興趣的文章:

IE和Mozilla的兼容性匯總event
IE和Mozilla的兼容性匯總event，需要的朋友可以參考下。
2007-08-08
基于JS實現(xiàn)的笛卡爾乘積之商品發(fā)布
本文給大家介紹JS實現(xiàn)的笛卡爾乘積之商品發(fā)布的相關內容，涉及到js笛卡爾積算法的相關知識，本文介紹的非常詳細，具有參考價值，感興趣的朋友一起學習吧
2016-05-05
前端實現(xiàn)跨頁面通信的最全實現(xiàn)方案指南
這篇文章將從同源頁面,不同源頁面,父子框架三個維度,詳細為大家講解前端跨頁面通信的各種實現(xiàn)方案,并提供代碼示例和對比分析,需要的小伙伴可以參考下
2025-04-04
網頁禁用右鍵實現(xiàn)代碼（JavaScript代碼）
網頁禁用右鍵的代碼，我們可以不少網站在使用，讓別人復制什么的麻煩，但破解方法也比較簡單。這里就不說了，如果想知道的可以參考腳本之家以前發(fā)布的文章。
2009-10-10
JavaScript常見事件處理程序實例總結
這篇文章主要介紹了JavaScript常見事件處理程序,結合實例形式總結分析了javascript HTML事件、DOM事件、IE事件等相關處理程序與操作技巧,需要的朋友可以參考下
2019-01-01
一個JS函數搞定網頁標題(title)閃動效果
這篇文章主要介紹了使用JS函數實現(xiàn)網頁標題(title)閃動效果的代碼,需要的朋友可以參考下
2014-05-05
如何解決日期函數new Date()瀏覽器兼容性問題
這篇文章主要介紹了如何解決日期函數new Date()瀏覽器兼容性問題,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-09-09
Moment.js常見用法總結
這篇文章主要介紹了Moment.js常見用法總結,需要的朋友可以參考下
2022-05-05
詳解webpack+ES6+Sass搭建多頁面應用
這篇文章主要介紹了webpack+ES6+Sass搭建多頁面應用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
JavaScript動態(tài)創(chuàng)建form表單并提交的實現(xiàn)方法
這篇文章主要介紹了JavaScript動態(tài)創(chuàng)建form表單并提交的實現(xiàn)方法,涉及JavaScript動態(tài)創(chuàng)建頁面元素及模擬表單提交的技巧,需要的朋友可以參考下
2015-12-12