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

js

1. //加載頁面 
2.  
3. //加載產品列表 
4. function GetProductList() { 
5. function PostParam(param) { 
6. param.key = "lm324"; 
7. return param; 
8. } 
9. var PostExecParam = { 
10. ClassName: "AnxinE.BLL.Product.ProductInfoBLL", 
11. MethodName: "Search", 
12. ParamModelName: "AnxinE.Model.Product.ProductInfoParam", 
13. onRequest: PostParam, 
14. onResponse: function (result) { 
15. if (result != null) { 
16. var html = ""; 
17. //匯率判斷 
18. //<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> 
19. //展示搜索-產品信息列表 
20. for (var i = 0; i < result.SupplierProductList.length; i++) { 
21. for (var j = 0; j < result.SupplierProductList[i].ProductList.length; j++) { 
22. //if (result.SupplierProductList[i].ProductList[j].PriceUSD!=null) { 
23. //} 
24. 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/>"; 
25. } 
26. } 
27. //展示搜索--品牌列表 
28. var html2 = "<h2 class='cur1'>全部</h2>"; 
29. if (result.ManufacturerList.length > 0) { 
30. for (var i = 0; i < result.ManufacturerList.length ; i++) { 
31. if (result.ManufacturerList[i].KeyName != null) { 
32. if (i < 5) { 
33. html2 += "<h2 href='javascript:void(0);' id='" + result.ManufacturerList[i].KeyName + "' onclick='Trademark(this)' >" + result.ManufacturerList[i].KeyName + "</h2>"; 
34. } 
35. } 
36. } 
37. //<a href="javascript:void(0);" id="regain_r2">收回</a> 
38. html2 += "<a href='javascript:void(0);' id='more_r2' onclick='More_r2()'>更多+</a>"; 
39. } 
40. //不刪除第一個內容，將產品信息表追加 
41. $("#r2_text2").not($(".cur1")).empty(); 
42. $("#r2_text2").append(html2); 
43. //改寫品牌行 
44. $(".tr3").empty(); 
45. $(".tr3").append(html); 
46. } 
47. } 
48. }; 
49. $.ajaxRequest(PostExecParam); 
50. }; 

.cshtml

1. <div class="secect_r"> 
2. <div class="top_right"> 
3. <ul> 
4. <li class="list1"><img src="~/MvcImages/ycysqd/sx_03.gif" /><p>篩選</p></li> 
5. <li class="list2"><a href="">集成電路</a>>></li> 
6. @*<li class="list3"><a>INFINEON</a><span>×</span></li> 
7. <li class="list3"><a>100-1000件</a><span>×</span></li> 
8. <li class="list3"><a>國內</a><span>×</span></li>*@ 
9. </ul> 
10. <div class="r1"><h1>型號：</h1><div class="text1"><input id="typeofproduct" type="text" value="輸入型號" /></div></div> 
11. <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> 
12. <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> 
13. <div class="r4"><h1>交貨地：</h1><div class="text2"><h2 class="cur1">全部</h2><h2 onclick="Trademark(this)">國內</h2><h2 onclick="Trademark(this)">香港</h2></div></div> 
14. </div> 
15.  
16. </div> 
17. <table class="bottom_right"> 
18. <tr class="tr1"> 
19. <td class="td1"><p>型號</p></td> 
20. <td class="td2"><p>品牌</p></td> 
21. <td class="td3"><p>庫存數量</p></td> 
22. <td class="td4"><p>貨期</p></td> 
23. <td class="td5"><p>起訂量</p></td> 
24. <td class="td6"><p>交貨地</p></td> 
25. <td class="td7"><p>香港交貨</p></td> 
26. <td class="td8"><p>國內交貨</p></td> 
27. <td class="td9"><p>操作</p></td> 
28. </tr> 
29. <tr class="tr2"> 
30. <td></td> 
31. <td></td> 
32. <td></td> 
33. <td><p>（工作日）</p></td> 
34. <td></td> 
35. <td></td> 
36. <td></td> 
37. <td><p>（含17%稅）</p></td> 
38. <td></td> 
39. </tr> 
40.  
41. <tbody class="tr3"></tbody> 
42.  
43. </table> 

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