jQuery中的$.ajax方法

1.$.get()请求数据
2.$.post()请求数据
3.$.ajax():JSONP:跨域请求数据

演示

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
</head>
<body style="display: grid;gap:1em;place-items:start">
<button class="get">1.$.get()请求数据</button>
<button class="post">2.$.post()请求数据</button>
<button class="jsonp">3.$.ajax():JSONP:跨域请求数据</button>
<script type="text/javascript">
//$.get() get()请求数据
//语法:$.get(url,data,callback)
$(".get").click(()=>{
    $.ajax({
        type:"get",
        url:"后端创建的php的地址",
        data:{id:2},
        dataType:"text",
        success:(data)=>console.log(data),
    });
});
// $.ajax():JSONP:跨域请求数据
$(".jsonp").click((ev)=>{
    $.ajax({
        type:"get",
        url:"后端创建的php的地址",
        dataType:"jsonp",
        jsonpCallback:"show",
    });
});
function show(data){
    console.log(data);
    let user=`${data.name}:(${data.email})`;
    $("button:last-of-type").after("<div></div>").next().html(user);
}
//$.post()请求数据
$(".post").click(()=>{
    $.ajax({
        type:"post",
        url:"后端创建的php的地址",
        data:{id:2},
        dataType:"text",
        success:(data)=>console.log(data),
    });
});
</script>
    </body>
</html>

vue指令

1.v-text
2.v-once

v-html

v-on
5.v-bind

演示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <!-- 导入vue -->
 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-bind:style="style1,style2">{{site}}</p>
<p v-html="messgae"></p>
<p v-text="text1"></p>
<!-- 不会改变因为页面已经加载了一次显示了1所以无论在改变也不会改变其值 -->
<p v-once>{{one}}</p>
<!-- 会改变 -->
<p>{{one}}</p>
<!-- @click是v-on:click的简称代表点击事件 -->
<button v-on:click="btn">按钮</button>
<input type="text" v-model="one" name=""/>
</div>
<script type="text/javascript">
new Vue({
 el:"#app",
 data(){
     return{
         site:"我是vue",
         style1:"color:red",
         style2:"background:green",
         messgae:"<h2>我是message</h2>",
         text1:"我是text1",
         one:"1",
     }
 },
 methods:{
     btn:function(){
         alert(this.site);
     }
 }
})
</script>
</body>
</html>

jQuery中的$.ajax方法,以及基本的vue指令操作

jQuery中的$.ajax方法

演示

vue指令

演示

相关文章