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. WAS 查看服务状态

    进入目录下/opt/IBM/WebSphere/AppServer/profiles/AppSrv01/bin 查看服务状态命令# ./serverStatus.sh 服务名 例如: [root@lo ...

  2. Hibernate笔记6-JPA-注解

    一.JPA简介--Java Persistence API. 是SUN公司推出的一套基于ORM的规范.hibernate框架中提供了JPA的实现.JPA通过JDK5.0注解或XML描述对象-关系表的映 ...

  3. Retrofit2与RxJava用法大全

    Retrofit2是square公司出品的一个网络请求库,网上有很多相关的介绍.我很久以前都想去研究了,但一直都有各种事情耽搁,现在就让我们一起去捋一捋,这篇主要讲解Retrofit2与RxJava的 ...

  4. System Center Configuration Manager 2016 域准备篇（Part3）

    步骤2.将CM16加入域 注意:在ConfigMgr服务器(CM16 )上以本地管理员身份执行以下操作 手动加入域,请登录CM16.启动Windows文件资源管理器 右键单击This-PC,然后选择 ...

  5. Redis单机数据库

    单机数据库 ·Redis服务器的所有数据库都保存在redisServer.db数组中,而数据库的数量则由redisServer.dbnum属性保存. ·客户端通过修改目标数据库指针,让它指向redis ...

  6. 轻松搞定Struts 2：三步走上手小入门

    零.Struts 2是啥? SSH.SSM.SSI如雷贯耳,Struts 2 —— 是的,就这样了... 一.Hello Struts2 1.核心包 2.struts.xml核心控制器配置 <f ...

  7. Windows Phone Emulator 模拟器常用快捷键

    在使用Windows Phone 的开发的时候,在目前大家还很难买到真实的Windows Phone 设备的情况下,我们用来调试自己的程序经常用到的可能就是Emulator了.经常会有人问我说,用鼠标 ...

  8. codeforce 599B Spongebob and Joke

    一道水题WA那么多发,也是醉了.f看成函数的话,其实就是判断一下反函数存不存在. 坑点,只能在定义域内判断,也就是只判断b[i].没扫一遍前不能确定Impossible. #include<bi ...

  9. 2018.2.7 css 的一些方法盒子模型

    css 的一些方法 1.盒模型代码简写 盒模型的外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin ...

  10. python_14_sys_mod

    import sys #1 print(sys.path)#打印环境变量 #2 print(sys.argv)#打印相对路径 print(sys.argv[2])#在cmd命令窗口运行本文件