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 相关文章推荐
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
EsLint入门学习教程
Feb 17 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
浅谈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
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
浅谈Python黑帽子取代netcat
2018/02/10 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python关于反射的实例代码分享
2020/02/20 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Django URL参数Template反向解析
2020/11/24 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
新闻学毕业生自荐信
2013/11/15 职场文书
继电保护工岗位职责
2014/01/05 职场文书
水毁工程实施方案
2014/04/01 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
预备党员考察意见范文
2015/06/01 职场文书
导游词之介休绵山
2019/12/31 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS