Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jQuery中的$.ajax方法,以及基本的vue指令操作
Blogger Information
Blog 33
fans 1
comment 0
visits 21823
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery中的$.ajax方法,以及基本的vue指令操作
冰雪琉璃
Original
634 people have browsed it

jQuery中的$.ajax方法

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

演示

  1.  <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQery</title>
  6.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  7.     </script>
  8. </head>
  9. <body style="display: grid;gap:1em;place-items:start">
  10. <button class="get">1.$.get()请求数据</button>
  11. <button class="post">2.$.post()请求数据</button>
  12. <button class="jsonp">3.$.ajax():JSONP:跨域请求数据</button>
  13. <script type="text/javascript">
  14. //$.get() get()请求数据
  15. //语法:$.get(url,data,callback)
  16. $(".get").click(()=>{
  17.     $.ajax({
  18.         type:"get",
  19.         url:"后端创建的php的地址",
  20.         data:{id:2},
  21.         dataType:"text",
  22.         success:(data)=>console.log(data),
  23.     });
  24. });
  25. // $.ajax():JSONP:跨域请求数据
  26. $(".jsonp").click((ev)=>{
  27.     $.ajax({
  28.         type:"get",
  29.         url:"后端创建的php的地址",
  30.         dataType:"jsonp",
  31.         jsonpCallback:"show",
  32.     });
  33. });
  34. function show(data){
  35.     console.log(data);
  36.     let user=`${data.name}:(${data.email})`;
  37.     $("button:last-of-type").after("<div></div>").next().html(user);
  38. }
  39. //$.post()请求数据
  40. $(".post").click(()=>{
  41.     $.ajax({
  42.         type:"post",
  43.         url:"后端创建的php的地址",
  44.         data:{id:2},
  45.         dataType:"text",
  46.         success:(data)=>console.log(data),
  47.     });
  48. });
  49. </script>
  50.     </body>
  51. </html>

vue指令

1.v-text
2.v-once

  1. v-html

  2. v-on
    5.v-bind

    演示

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>Document</title>
    6.  <!-- 导入vue -->
    7.  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    8. </head>
    9. <body>
    10. <div id="app">
    11. <p v-bind:style="style1,style2">{{site}}</p>
    12. <p v-html="messgae"></p>
    13. <p v-text="text1"></p>
    14. <!-- 不会改变因为页面已经加载了一次显示了1所以无论在改变也不会改变其值 -->
    15. <p v-once>{{one}}</p>
    16. <!-- 会改变 -->
    17. <p>{{one}}</p>
    18. <!-- @click是v-on:click的简称代表点击事件 -->
    19. <button v-on:click="btn">按钮</button>
    20. <input type="text" v-model="one" name=""/>
    21. </div>
    22. <script type="text/javascript">
    23. new Vue({
    24.  el:"#app",
    25.  data(){
    26.      return{
    27.          site:"我是vue",
    28.          style1:"color:red",
    29.          style2:"background:green",
    30.          messgae:"<h2>我是message</h2>",
    31.          text1:"我是text1",
    32.          one:"1",
    34.      }
    35.  },
    36.  methods:{
    37.      btn:function(){
    38.          alert(this.site);
    39.      }
    40.  }
    41. })
    42. </script>
    43. </body>
    44. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post