工作笔记-1

1.ajax实例

<script type="text/javascript">
        $(function(){
            var url = "http://localhost/opencart/index.php?route=product/category&path=28_28";
            var data={};
            $.ajax({
                type : "post",
                url : url,
                data : data,
                success : function(data){//返回数组对象
                    var obj = JSON.parse(data);//转成jsonobj ==eval(data)不建议使用，不安全，会执行表达式
                    var products_str = JSON.stringify(obj['products']);
                    var products = JSON.parse(products_str);
                    var products_html = $("#products");
                    for(var i=0; i<products.length; i++){
                        var thumb = products[i]['thumb'];
                        var product_li = $("<li class="row"></li>");
                        var img_div = $("<div class="col-xs-3"></div>").append("<a href="CaiPinJieShao.html"></a>")
                        .append("<img src='"+products[i]['thumb']+"' width="100%" max-"68px" max-height:"68px"/>");
                        product_li.append(img_div);
                        
                        var desc_div = "<div class="col-xs-9">"+
                            "<div class="row">"+
                                "<div class="col-xs-8 a_block" style="padding: 0; margin: 0;">"+
                                    "<a href="CaiPinJieShao.html">"+products[i]['name']+"</a>"+
                                    "<a href="CaiPinJieShao.html">材料：<span class="a_color">"+products[i]['description']+"</span></a>"+
                                    "<a href="CaiPinJieShao.html">功效：<span class="a_color">润肺止咳，清热化痰</span></a>"+
                                "</div>"+
                                "<div class="col-xs-4 text-center gouwuche_style">"+
                                    "<a href="#">"+
                                        "<span class="glyphicon glyphicon-shopping-cart"></span>"+
                                    "</a>"+
                                "</div>"+
                            "</div>"+
                            "<div class="row">"+
                                "<hr>"+
                            "</div>"+
                        "</div>";
                        product_li.append(desc_div);
                        products_html.prepend(product_li);
                    }
                },
                error: function (msg) {
                    console.log(url);
                    console.log("error"+JSON.stringify(msg));
                }
            });
        });
        </script>

2.订单列表——订单详情页

有两种方法：一种是url传值，另一种是html5的本地存储。

url传值：例子：原始页面链接长这样：

var info_a=$("<a href="order_details.html?id="+id+""></a>");

跳转页面链接这样获取地址：

var url=window.location.search;
    var tmp1=url.split("?")[1];
    var tmp2=tmp1.split("=")[1];
    var id=tmp2;
        url= "http://localhost/opencart/index.php?route=account/order/info&order_id="+id,

其中，split()用于将一个字符串分割成数组;

也可以用window.location.search（返回所有地址栏从?开始的字符串，题中例子即返回id=X）;

本地存储：

window.sessionStorage.setItem("名",值);//先将要存储的数据存起来

//调用
var name=window.sessionStorage.getItem("名");
//清除
window.sessionStorage.removeItem("名");

很方便有木有o(∩_∩)o 哈哈

3.正则：

把所有的<br /> 换成空格;

function repstr(s){
                return s.replace(/<br />/g," ");
            }

4.巧用“+-”转换类型

num-0 数字

num+"" 字符串

5.逻辑判断：

逻辑表达式最终的结果不一定是true或false,而是停止计算前最后一个操作数的值。

不理解时看这句：（js中，逻辑运算返回的是最早能判断表达式结果的那个值。）

即与/或，最早能判断出表达式是true or false的那个值，就是逻辑表达式的结果。哈哈有点绕。

举例：

var a=false;
var b=6;
console.log(a||b);      //6(其中，括号里的是逻辑表达式，执行时会对他做判断，即a或b 是否true? 本例中a不是，b,true.故结果为6)
var c=false;
var d=6;
console.log(d&&e);    //false      括号里要判断d&&e是否true? d=false,那么后面的就不用看了，结果已出，false

6.个人总结

自学了三个多月，每天学习3——4个小时，终于找到第一份工作。目前的状态不可松懈，多多学习。成为一名优秀的前端工程师0.0