PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > jQuery中的$.ajax方法,以及基本的vue指令操作

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

冰雪琉璃
冰雪琉璃 原创
2021年04月29日 10:36:31 595浏览

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",
    33. }
    34. },
    35. methods:{
    36. btn:function(){
    37. alert(this.site);
    38. }
    39. }
    40. })
    41. </script>
    42. </body>
    43. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议