python就业班day27----ajax补充和vue

ajax格式：
url：获取资源的地址

• 1、/index_data 127.0.0.1:7890/index_data，自己服务器的内部资源
• 2、http://www.baidu.com 外部资源，有个同源策略的限制，不能访问其它网页。但有些网页允许跨域访问，使用jsonp访问。

---

弹出提示框，获取用户输入的内容：var content = promat("提示信息");
校验是否为空：

if(content==""||content==null){		//content="" ：什么都没写，但点了确认;content=null：点了取消
	...
}

重新加载当前页面（刷新）：window.location.reload()

ajax写法1：

$.ajax({
	url:"请求地址",
	type:"请求类型",
	data:{"变量1":"值1","变量2":"值2",...},		// 给服务器发送的信息
	dataType:"服务器发送的数据的数据类型（指的是ajax转换前的）",
	success:function(服务器发送的数据（指的是ajax转换后的）){
		...
	},
	error:function(){
		...
	}
});

url：向服务器请求的地址，和直接在地址栏打一样
type：发送http请求的类型，常用post和get
data：给服务器发送的数据，通常是个键值对
dataType：客户端接收到的信息的数据类型（ajax转换之前的）
success:function(data){}：固定格式，形参data是客户端接收到的数据（ajax转化之后的）

ajax写法2：简写方式（用的也不是很多）

$.ajax({
	...
}).done(function(resp){
	...
}).fail(function(){
	...
})

例：

<script>
	$(function(){
		// 发送请求到服务器获取首页数据
		$.ajax({
			url:"/index_data",		// 请求资源地址
			type:"get",	// 请求方式
			dataType:"json",		// 服务器返回的数据类型，	服务器给ajax的是json，ajax给我们的是js对象
			success:function(dat){		// dat：ajax转化后的内容，是js对象(由json转化成了js对象)
				// 遍历数组对象，进行字符串拼接，也可以遍历获取全部数据，然后遍历完成后添加一次
				 for (var i = 0; i < dat.length; i++) {
                        var content = '<tr>' +
                            '<th>' + dat[i].id + '</th>' +
                            '<th>' + dat[i].code + '</th>' +
                            '<th>' + dat[i].sname + '</th>' +
                            '<th>' + dat[i].rate01 + '</th>' +
                            '<th>' + dat[i].rate02 + '</th>' +
                            '<th>' + dat[i].new_prize + '(元)</th>' +
                            '<th>' + dat[i].high + '</th>' +
                            '<th>' + dat[i].date + '</th>' +
                            '<th><input type="button" value="添加自选" code="' + dat[i].code +
                            '"></th>' + // 给按钮设置
                            // 自定义属性code，这个属性不显示，隐藏属性（独一无二用于区分），在按钮被点击的时候使用
                            '</tr>';
                        // 添加至前端显示
                        $(".stock_list").append(content);
                    }
                },
			error: function () {
			   	alert("获取首页信息失败");
			}
		})
		$(".stock_list").delegate("input","click",function(){       // 代理，delegate，父类代理子类，选择器1选中父类，选择器2选中子类
                $.ajax({    // 向后端发送数据
                    url: "/add_data",
                    type: "get",
                    data: {"code":$(this).attr("code")},   // 请求的格式找后端要，固定死的
                    dataType: "text",   // 返回数据是个字符串，写text，直接输出就好了     
                    success: function (resp) {
                        alert(resp);    
                    },
                    error: function () {
                        alert("请求超时");
                    }
                })
            })
               
        })	
</script>

    <script>
        $(function(){
            $.ajax({
                url:"./center_data",
                type:"get",
                dataType:"json",
                success:function(dat){
                    for(var i=0;i<dat.length;i++){
                        var content = '<tr><td>'+dat[i].code+'</td>'+ 
                                    '<td>'+dat[i].sname+'</td>'+ 
                                    '<td>'+dat[i].rate01+'</td>'+  
                                    '<td>'+dat[i].rate02+'</td>'+  
                                    '<td>'+dat[i].new_prize+'</td>'+  
                                    '<td>'+dat[i].high+'</td>'+    
                                    '<td>'+dat[i].bak+'</td>'+
                                    '<td><a href="#" class="modify_btn" code="'+dat[i].code+'"><img src="images/star.jpg">修改</a></td>'+
                                    '<td><input type="button" value="删除" code="'+dat[i].code+'"></td></tr>';

                        $(".stock_list").append(content); 
                    }
                },
                error:function(){
                    alert("请求失败");
                }
            })
            // 父类代理子类事件，为什么前面选择器用td不行? 因为在window.onload加载完成前，td不存在，点了没反应，是后来添加进去的。
            $(".stock_list").delegate("a","click",function(){   
                // 校验非空
                re_content = prompt("请输入要修改的信息");
                if(re_content=="" || re_content==null){  // 双校验，1.点确认但没输入数据   2.点了取消
                    alert("输入信息不能为空");
                    return false;
                }
                $.ajax({
                    url:"./change_data",
                    type:"get",
                    data:{"code":$(this).attr("code"),"info":re_content},
                    dataType:"text",
                    success:function(dat){
                        alert(dat);
                        // 刷新当前页面
                        window.location.reload();
                    },
                    error:function(){
                        alert("请求超时");
                    }
                })
            })

            $(".stock_list").delegate("input","click",function(){ 
                $.ajax({
                    url:"./del_data",
                    type:"get",
                    data:{"code":$(this).attr("code")},
                    dataType:"text",
                    success:function(resp){
                        alert(resp);
                        window.location.reload();
                    },
                    error:function(){
                        alert("请求数据超时");
                    }
                })
            })
        })
    </script>

---

断点调试：
加载到的资源：
谷歌浏览器–右键检查–sources里面，在这里面打断点

调试断点的使用：
第一步：前端断点一般打在回调函数有效代码的第一行
第二步：让断点往下走

---

jsonp：
ajax请求的页面只能是同一个域（同一个ip的同一个端口）

跨域访问：使用jsonp，前提：别人服务器允许，比如京东，不允许，360，允许

keyup：键盘抬起自动执行的方法
$("input").keyup(function(){});

例：跨域访问360

<!DOCTYOE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // input输入框，键盘抬起来的时候执行
            $("input").keyup(function(){
                $.ajax({
                    url:"https://sug.so.360.cn/suggest?", // 本地IP跨域访问360
                    type:"get",
                    data:{word:$(this).val()}, // 键名用不用字符串应该都可以
                    dataType:"jsonp", // 只有允许跨域访问的地址才能用jsonp，京东、淘宝都是不允许跨域访问的
                    success:function(dat){  // data里面有数据的
                        var content = "";
                        for(var i=0;i<dat.s.length;i++){ // 分析返回的数据，里面有个s，那个是数组
                            content += '<li>'+dat.s[i]+'</li>';
                        }
                        $("#list").html(content);
                    },
                    error:function(){
                        console.log("接受数据失败")
                    }                    
                })
            })
        })
    </script>
</head>
</head>
<body>
    <h2>跨域访问</h2>
    <input type="text" name="" id="">
    <ul id="list"></ul>
</body>
</html>

jsonp跨域访问时，返回数据格式会自动生成jquery编号，防止别人劫持

---

Vue：view谐音
Vue.js：构建用户界面的渐进式框架

格式：

new Vue({ 		// Vue固定的，V大写
	el:"#app",
	data:{
		message:"hello vue",
	}
})

el表示需要管理哪一个区域，也叫做为vue实例提供挂载元素
el：element，元素的意思
data：用来存储数据的

如果在标签的中间部分取值，通过{{vue的data里面的键名}}
两个大括号括起来

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="js/vue.min.js"></script>
	<script>
		window.onload = function(){
			new Vue({	// Vue，固定死的，三个字母不能变，而且V必须大写
				el:"#app",		// 选择器，需要管理的元素
				data:{		// 都是key:value形式
					message:"hello vue",
				}
			})
		}
	</script>

</head>
<body>
	<div id="#app">
		{{message}}		<!-- 展示vue，用{{ }} -->
	</div>
	
	<!--<script>
		// 页码从上到下加载
		new Vue({
			el:"#app",		// 选择器，需要管理的元素
			data:{	// 都是key:value形式
				message:"hello vue",	
			}
		})
	</script>  -->
</body>
</html>

注意：window.onload = function(){}不要忘写；new Vue({})不要写错

---

Vue管理标签属性：
v-bind绑定属性格式：
v-bind:标签固有属性 = "data里变量"

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <script>
		window.onload = function(){
			// 通过vue管理标签属性，格式：v-bind:属性 = 'data中定义的值'
			new Vue({
				el:"#app",
				data:{
					myherf:"http://x.itunes123.com/uploadfiles/e3f0727ad2fa2ea304db484e53154ebc.jpg",
					mysrc : "#",
					myalt : "此处有图片",
					mytitle:"漂亮",
				}
			})
		}
	</script>
</head>
<body>
	<div id="#app">
		<a v-bind:href="myherf">点我</a>
		<!-- 不可以连在一起写，但有简写方式 -->
		<img v-bind:src="mysrc" v-bind:alt="myalt" v-bind:title="mytitle">
	</div>
</body>
</html>

---

Vue管理样式：
Vue绑定css样式：注意style，千万不能丢
v-bind:style="{'css属性1':'css属性值1', 'css属性2': 'css属性2':data键名 , ... }"
属性值有两种方式，使用字符串要加单引号，使用data键名不用加

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <script>
		window.onload = function(){
			/*
				绑定标签样式，格式：v-bind:style = "{'css属性1':'属性值1','css属性2':myfontSize}"
				简写方式：		:style =   "{'css属性1':'属性值1','css属性2':myfontSize}"		取消掉v-bind就是简写
			*/		
			// 通过vue管理页面
			new Vue({
				el:"#app",
				data:{
					myColor:"green",
					myfont:"30px",
					mystyle:{"color":"blue","font-size":"50px"},
				},
			});
		}
	</script>
</head>
<body>
	<div id="#app">
		<div class="box" v-bind:style="{'color':'red'}">		<!-- 如果
		双引号里的变量没有使用单引号引起来，那么就是字符串；如果使用单引号引起来，就是变量，去data{}里面找，这个很重要 -->
			明月几时有
		</div>
		<div class="box" v-bind:style="{'color':'myColor','fontSize':myfont}">
			把酒问青天
		</div>
		<div class="box" v-bind:style="mystyle">     <!-- 不加引号，就是变量，需要定义 -->
			一二三四五
		</div>
	</div>
</body>
</html>

如果双引号里面的变量没有使用单引号引起来，那么就是字符串；如果使用单引号引起来，就是变量（data字典的键名），变量要去data{}里面找，这个很重要
键名加不加引号都没关系