javascript+ajax实现产品页面加载信息


Posted in Javascript onJuly 09, 2015

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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
浅谈JavaScript中null和undefined
Jul 09 #Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 #Javascript
JavaScript包装对象使用详解
Jul 09 #Javascript
jquery实现表单验证并阻止非法提交
Jul 09 #Javascript
jQuery实现tab选项卡效果的方法
Jul 08 #Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 #Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 #Javascript
You might like
php curl模拟post请求小实例
2013/11/13 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
python选择排序算法的实现代码
2013/11/21 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python3爬虫学习入门教程
2018/12/11 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python中Selenium库使用教程详解
2020/07/23 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
python空元组在all中返回结果详解
2020/12/15 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
保护环境标语
2014/06/09 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
教师个人培训总结
2015/02/11 职场文书
出生证明范本
2015/06/15 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
Python中基础数据类型 set集合知识点总结
2021/08/02 Python