12-16前端jq-ajax笔记

1.ajax简写

$(function(){
    $.ajax({
        url:"index_data",
        type:"get",
        dataType:"json"
    })
        .done(function(data){
        var str = "";
        for(var i=0;i<data.length;i++){
            str += '<tr><td>'+ dat[i].id +'</td><td>'+ dat[i].code +'</td><td>'+ dat[i].sname +'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd"></td></tr>'
        }
        $("table").html(str)
    })
        .fail(function(){
        alert("error");
    })
})

2.ajax传参---->添加关注

触发传参：事件委托

$("table").delegate("input","click",function(){
    alert(111);
    
})

在新添加的每条数据上添加按钮上加上自己命名的属性 mycode="’+dat[i].code+’"

 '<tr><td>'+ dat[i].id +'</td><td>'+ dat[i].code +'</td><td>'+ dat[i].sname +'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd"></td></tr>'
                str += '<tr><td>'+ dat[i].id +'</td><td>'+ dat[i].code +'</td><td>'+ dat[i].sname +'</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd" mycode="'+dat[i].code+'"></td></tr>'
                // html允许自定义属性以完成自己想要的功能 -- 自定义一个html属性：获取股票代码
                // 双引号：k=“v”的引号
                // 单引号：字符串拼接的引号

按下添加按钮谈一下自己的mycode

$("table").delegate("input","click",function(){
    alert( $(this).attr('mycode') )  // 自定义的html属性用attr();
})
// alert( $(this).prop('mycode') )   //已有的html属性

将获取到的股票代码发送出去，以text方式接受返回数据----->ajax

ajax---->将mycode这份数据发送给 add_data 接口-------->接口再将

数据弹出

 var mycode =  $(this).attr('mycode');
    $.ajax({
        url:"/add_data",
        type:"get",
        data:{
            'code':mycode
        },
        dataType:"text",
        success:function(data){
        	alert(data);
        },
        error:function(){
            alert("error");
        }
        
    })

整个关注涉及到的新知识
1. 对input按钮增加自定义属性
2. 将得到的自定义属性作为参数传输给add_data页面，也就是服务器----->ajax里面的data键值存储传输数据

3.ajax与jsonp

jsonp跨域请求通过script里面的scr属性请求的jsonpcallback

跨域请求：

1.将数据发送到360
$(function(){
    $.ajax({
        url:"https://www.baidu.com",------->跨域http
        type:"get",
        dataType:"jsonp",--------->跨域一定是jsonp
        data:{"word":"b"},------>发送的参数
        success:function(data){
        console.log(data)
    	}
    })
})

案例：从360拿数据

$(function(){
    $("input").keyup(function(){
        var vals = $(this).val();
        var str = "";
        $.ajax({
            url:"http://www.360.com",----->链接域名
            type:"get",
            dataType:"jsonp"----->接收数据类型
            data:{"word":vals,
                 "encodeout":"utf-8"},------>发送参数
            success:function(dat){
                console.log(dat);
                for(var i=0;i<dat.s.length;i++){
                    str += '<li>'+dat.s[i]+'</li>';
                }
                $("ul").html(str);---->收到加入列表
            }
        })
    })
})

4.vue的定义

jq----->获取对象----->绑定事件----->操作方法------>ajax获取数据
Vue数据驱动视图
el,data,methods三个参数定义

<script src="js/vue.min.js"></script>
<div id="box">{{str}}</div>------->4
<script>
    var bianliang =  new Vue({
     ----控制的标签-----说明控制范围
        el:"#box",
     ----存储的数据-----用到的数据都在里面
        data:{
            mystr:"jin"
        },
        methods:{
		   fnAdd:function(){alert(this.mystr)}
        }
    })
</script>

5.Vue的使用

Vue使用从建立对象开始---------Vue可以控制所选标签内的所有东西包括子级标签
通过js，入口函数window.onload -----不使用------通常写在控制标签后面

调用Vue内部data里面属性 {{Vue里面data的键名}}

可以对data里面的属性进行计算表达式
也可以书写条件表达式变量?“成立表达式”:“不成立表达式”
vued定义函数调用时-----this.data里的变量名

<div id="box">{{my_num+1}}  {{my_str+2}}{{my_bool?"jin":"yi"}} </div>
<script>
    var my_vue = new Vue({
        el:"#box",
        data:{
        my_num:11,
        my_bool:true,
        my_str:"jin"
    }
    }) 
</script>

对标签属性的操作：v-bind:属性=" “------>控制html属性 -----> :属性=” "

a标签跳转地址传入data里的属性 v-bind:href=“变量名” 或者:href=“变量名”

<a :href="url" id="mylink"></a>
<script>
    var my_vue = new Vue({
        el:"#mylink",
        data:{
            ulr:"http://www.baidu.com"
        }
    })
</script>

绑定事件调用Vue对象里的methods内函数：v-on:click=“函数名” 或者 @click=“函数名()”

<button id="my_btn" @click="fnSay()">点点点{{num}}</button>
<script>
var my_vue = new Vue({
    el:"#my_btn",
    data:{
        my_str:"my name is lao wang",
        num:0
    },
    methods:{
        fnSay:function(){
            alert(this.my_str);
            this.num += 1;
        }
    }
})
</script>

6.Vue控制css------->控制class和style

Vue里面的data数据改变，整个页面就会发生改变
控制class属性，字典，列表，对象
控制class手法通用于控制style

<style>
    .my_class_a{
        width:100px;
        height:100px;
        background: blue;
    }
	.my_class_b{
    	width:100px;
        height:100px;
        background: green ;
	}
</style>
<div id="box">
--------以字典形式控制class--格式  :class="{存在的类:Vue对象data里的bool变量}"---------
<div id="box1" :class={'my_class_a':bool1,'my_class_b':bool2}>我 是 盒 子1</div>
<button id="btn1" @click="funC()">我 是 按 钮1</button>


-------以对象形式控制class--格式   在data里面增加一个包含类名的对象，将对象在给class    :class="cls_obj"-----
<div id="box2" :class="cls_obj">我 是 盒 子2</div>
<button id="btn2" @click="funC2()">我 是 按 钮2</button>


-----以列表形式控制class，在data里面定义两个变量，关联已存在的类，将两个变量放在列表中给class----格式   :class="[变量1,变量2]"   或者  :class="[布尔表达式?变量1:变量2]"----------
<div id="box3" :class="[bool1?cls_a:cls_b]">我 是 盒 子3</div>
<button id="btn3" @click="funC()">我 是 按 钮3</button>
</div>
<script>
    var my_vue = new Vue({
        el:"#box",
        data:{
            bool1:true,
            bool2:false,
            cls_obj:{
                my_class_a:false,
                my_class_b:true,
            }，
            cls_a:"my_class_a",
            cls_b:"my_class_b"
        },
        methods:{
            funC:function(){
                this.bool1 = !this.bool1;
                this.bool2 = !this.bool2;
            },
            funC2:function(){
                this.cls_obj.my_class_a =!this.cls_obj.my_class_a;
                this.cls_obj.my_class_b =!this.cls_obj.my_class_b;
            }
        }
        
    })
</script>