1

2

3

4

https://swapi.co/

    <h1>Hello Reqwest!</h1>

    <script>

        var a = {}

        reqwest({

          url:"https://swapi.co/api/people/1/",

          type:"json",

          method:"get",

          data:{tag:"life"},

          success:function (resp){

              a = resp

            }

        })

    </script>
    

a.name

"Luke Skywalker"

5

https://swapi.co/api/people/

https://swapi.co/api/people/?format=json

6

<!DOCTYPE html>

{% load staticfiles%}

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script type="text/javascript" src="js/vue1.js"></script>

        <script type="text/javascript" src="js/reqwest.js"></script>

        <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">

        <link rel="stylesheet" href="css/animate.css" media="screen" title="no title" charset="utf-8">

        <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">

    </head>

    <body id="app">

      <style type="text/css">

          .ui.segment.container {

              width:700px;

          }

          p {

              font-family: 'Raleway', sans-serif;

              font-size:{{ article.fontSize }}px;

          }

          body {

              background:url(images/star_banner.jpg);

              background-size:cover;

              background-repeat:no-repeat;

              background-attachment:fixed

          }

      </style>

      <div class="ui dimmer fadeIn active" v-if="!modal.show" v-on:click="modal.show = !modal.show">

          <div class="ui modal active">

            <h3 class="ui header">This is a HEader</h3>

          </div>

      </div>

        <div class="ui  segment padded container" >

          <button v-on:click="article.fontSize+=5" class="ui top left attached label" type="button" name="button">+</button>

            <h1 class="ui header" style="font-family:'Oswald', sans-serif;font-size:40px">

                {{ article.title }}

                {{ article.fontSize }}

            </h1>

            <p>

               {{ article.content }}

            </p>

            <button v-on:click="modalSwitch" class="ui inverted blue button" type="button" name="button">

              出现弹窗</button>

        </div>

        <!-- Comments&Form's here -->

        <div class="ui segment  container" style="width:700px;">

            <h3 class="ui header" style="font-family:'Oswald', sans-serif;">Comments</h3>

            <div v-for="comment in comments" class="ui comments">

                <div  class="comment" >

                    <div class="avatar">

                        <img src="http://semantic-ui.com/images/avatar/small/matt.jpg" alt="" />

                    </div>

                    <div class="content">

                        <a href="#" class="author">{{ comment.name}}</a>

                        <div class="metadata">

                            <div class="date">2 days ago</div>

                        </div>

                        <p class="text" style="font-family: 'Raleway', sans-serif;">

                            我的身高是：{{ comment.height   }}cm

                        </p>

                    </div>

                </div>

            </div>

            <div class="ui divider"></div>

            <h3 class="ui header"> 你还可以输入{{ 200 - message.length }}字</h3>

            <form class="ui form" action="" method="post">

                <input  v-model="message" type="text" >

            </form>

        </div>

        <script>

          var vm = new Vue({

              el:"#app",

              //context

              data:{

                modal:{

                  show:true,

                },

                //context["articlke"] = article

                article:{

                  title:"THis is a title",

                  content:"Hi there",

                  fontSize:18,

                },

                comments:[

                  // {name:"alex",said:"Great!",show:true},

                  // {name:"alex",said:"Great!",show:true},

                  // {name:"alex",said:"Great!",show:true},

                  // {name:"alex",said:"Great!",show:true},

                ]

              },

              methods:{

                modalSwitch:function (){

                  this.modal.show = !this.modal.show

                },

                getData:function (){

                  var self = this;

                  reqwest({

                    url:"https://swapi.co/api/people/?format=json",

                    type:"json",

                    method:"get",

                    data:{tag:"life"},

                    success:function (resp){

                        self.comments = resp.results

                      }

                  })

                }

              },

              computed:{

                loadingOrNot:function (){

                  if (this.comments.length == 0){

                    return " loading"

                  } else {

                    return ""

                  }

                }

              },

              ready:function (){

                this.getData()

              }

          })

        </script>

    </body>

</html>

7

6 json和ajax传递api数据的更多相关文章

  1. Python Django Ajax 传递列表数据

    function getTableContent(node) { event.preventDefault(); var tr = node.parentNode.parentNode; var id ...

  2. 静态页面之间的转发与json与ajax做到动态数据

    我们见过很多使用jsp ,php,asp的动态网页技术的网站了,我们知道如果一个网站内容更新频率极低,而内容量不是十分庞大时,这样的网站(一次开发完成后不会需要较多的维护成本)的完全可以使用全部使用静 ...

  3. Vue2.X 通过 ajax 获取 API 数据（非 axios）

    不多废话,笔记如下 1. javascript: let vm = new Vue({ el: '#card-text', data: { info: '' }, beforeCreate: func ...

  4. APICloud ajax请求api数据问题

    云编译开启全局加密的情况下,请务必使用api.ajax,避免使用JQ等框架的ajax,否则将引起请求失败.官网API说明链接 还要就是要注意用$.ajax请求数据时会出现的同源策略问题.

  5. Django 仿ajax传递数据（Django十）

    之前用form表单传递数据,没有遇到任何问题 具体见:https://blog.csdn.net/qq_38175040/article/details/104867747 然后现在我想用ajax传递 ...

  6. JS AJAX传递List数组到后台（对象）

    今天在写代码的时候,碰到的问题,百度了一下,发现原来AJAX传递List数据是可以的,之前还一直用JSON序列化(new Array()数组设置)进行传值的. var _list = {}; //等价 ...

  7. MVC WebApi跨域ajax接受post数据笔记

    后端api代码示例: [HttpPost] public string callbackUrl([FromBody]SZRCallBackModel cbm) { try { if (cbm == n ...

  8. mvc控制器接收ajax传送的数据

    视图层中ajax传数据 $.ajax({ type: "post",//提交方式 data: { complay_arry: complay_arry, site_arry: si ...

  9. Ajax传递json数据简介和一个需要注意的小问题

    Ajax传递json数据 Ajax操作与json数据格式在实际中的运用十分广泛,本文为大家介绍一个两者相结合的小案例: 项目结构 我们新建一个Django项目,在里面创建一个名为app01的应用: p ...

随机推荐

  1. parameter与attribute的使用场合（转载自草原和大树）

    Attribute 和 Parameter 的区别 (1)HttpServletRequest类有setAttribute()方法,而没有setParameter()方法 (2)当两个Web组件之间为 ...

  2. 使用纯css实现波浪效果

    有时候我们需要实现水晃动的效果,其实我们可以通过css旋转动画和圆角来实现. 首先来2个div,外层div相对定位,内层div绝对定位,内层div大致位于外层div上半部分.外层div设置一个颜色较深 ...

  3. 高德地图 获取sha1

    开发版本sha1 控制台输入 cd .android  回车 再输入   keytool -list -v -keystore debug.keystore 回车 输入密钥库口令:  andorid ...

  4. python 之 BeautifulSoup 常用提取

    一.bs4信息提取后返回的数据类型 soup.find('tbody') ---> 返回结构是一个bs4.element.Tag soup.find('tbody').children ---& ...

  5. 配置Maven镜像与本地缓存

    IntelliJ IDEA 安装后自带Maven,也可以使用自己安装的Maven. 配置阿里镜像与本地仓库文件夹 找到Maven的安装目录 打开settings.xml配置文件   修改mirrors ...

  6. scrum敏捷开发☞

    scrum是什么?说白了就是自带一些规则的工具,团队成员按照scrum的规则计划项目,执行项目,完成项目..可以让团队提高工作效率 当前除了scrum还有其他很多类似的像Kanban,XP,RUP(规 ...

  7. POJ 3469 Dual Core CPU（最小割模型的建立）

    分析: 这类问题的一遍描述,把一些对象分成两组,划分有一些代价,问最小代价.一般性的思路是, 把这两组看成是S点和T点,把划分的代价和割边的容量对应起来求最小割. 把S和可模版tem之间到达关系看作是 ...

  8. ARM体系结构与编程-3

    ARM存储系统:ARM中用于存储管理的系统控制协处理器CP15:包括16个32位寄存器,其编号为0到15.实际上对于某些编号的寄存器可能相应有多个物理寄存器. 訪问CP15寄存器的指令:MRC.MCR ...

  9. PHP 的那些错误总结

    问题1: [root@web01 data]# lsof  -i :9000 [root@web01 data]# /application/php/sbin/php-fpm /application ...

  10. 深入理解计算机系统_3e 第十章家庭作业 CS:APP3e chapter 10 homework

    10.6 1.若成功打开"foo.txt": -->1.1若成功打开"baz.txt": 输出"4\n" -->1.2若未能成功 ...