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. >>我要到处浪系列 之 JS随便投票小脚本

    首先郑重声明:我不是对任何网站或者任何个人或组织有意见,仅仅是觉得 4点几 的评分对某些玩票的片段都太高了,为了落实想法,切实履行公民的投票权,并且 bibibabibobi biubiubiu..所 ...

  2. SpringBoot集成mybatis和mybatis generator

    利用搭建的基本的spring boot框架,集成 mybatis + generator 1.设置 maven 的相关配置: File  - setting - maven 设置 Maven home ...

  3. docker制作共享jdk的tomcat镜像

    FROM centos:7.4.1708 #挂载宿主机jdk到容器,节省空间 MAINTAINER huqiang:2018/10/12 ENV VERSION=8.5.34 ENV CATALINA ...

  4. DDL与DML语句

    1. DDL语句 SQL语句:结构化查询语句,使用SQL与数据库“沟通”,完成相应的数据库操作. l DDL:数据定义语言,用来维护数据库对象 1.1 创建表 Ø CREATE:创建表 演示:创建员工 ...

  5. ffmpeg 资源［转］

    http://blog.csdn.net/leixiaohua1020/article/details/15811977 一. FFmpeg主站 1. FFmpeg的源码发布,资料 网址:   htt ...

  6. 新建snmp模型总结

    1.在DeviceType.xml中添加新的模块 2.在modellidx.json中添加路径关联 3.添加定义模型 4.定义model.xml注意: 5.定义collect.xml注意:

  7. SQL Server Profiler查询跟踪的简单使用

    1.打开SQL Server Management Studio,选择工具->SQL Server Profiler,或者直接从路径:开始/程序/Microsoft SQL Server 200 ...

  8. Python风格规范-FYI

    Python风格规范 分号 Tip 不要在行尾加分号, 也不要用分号将两条命令放在同一行. 行长度 Tip 每行不超过80个字符 例外: 长的导入模块语句 注释里的URL 不要使用反斜杠连接行. Py ...

  9. hive对有null值的列进行avg,sum,count等操作时会不会过滤null值

    在hive中,我们经常会遇到对某列进行count.sum.avg等操作计算记录数.求和.求平均值等,但这列经常会出现有null值的情况,那这些操作会不会过滤掉null能呢? 下面我们简单测试下: wi ...

  10. 使用canvas给图片添加水印

    css部分 .clip { position: absolute; clip: rect(0 0 0 0); } html部分 <input type="file" id=& ...