现在工作中我用到获取数据的方式,基本都是ajax。前台获取后端的数据后,需要进行处理,然后把他们放进页面中的相应标签里。下面举一个简单的例子,来模拟数据的获取和摆放。

这里用ng框架获取数据然后处理,和用原生js的方式将数据放进页面中。项目结构:

(这里请求数据的时候J就是一个跨域的问题,我们需要将这段代码,房子服务器里去跑,我这里用的是 xampp 搭建的服务,内含Apache和MySQL,etc)

项目结构如上所示,请求的是同一个php数据,PHP里面是有一个json。

{
"sites": [
{
"Name": "阿逗博客",
"Url": "http://www.cnblogs.com/adouwt/",
"Country": "CN"
},
{
"Name": "Google",
"Url": "www.google.com",
"Country": "USA"
},
{
"Name": "Facebook",
"Url": "www.facebook.com",
"Country": "USA"
},
{
"Name": "微博",
"Url": "www.weibo.com",
"Country": "CN"
}
]
}

现在来获取这个数据:

ng框架:

原生js:

俩个都可以完成数据摆放操作,显示如下:

注意:在用ajax获得的result是一个字符串,像这样,

所以 JSON.parse(result)--->object。

补充:

jq 跨域get 到线上的数据

$.getJSON( "https://easy-mock.com/mock/5a2b8513158e7b7003281adb/online/online", function( data ) {
  console.log(data)
});

每日一句:Victory isn't defined by wins or losses. It is defined by effort. If you can truthfully say,"I did the best I could, I gave everything I had"; then you're a winner.--Wolfgang Schadler

翻译:胜利不是用赢输定义的,而是用努力定义的。如果你能如实地说,“我尽了我所能,我付出了所有”,那么你就是一个胜利者。——沃尔夫冈·谢德勒

ajax模拟获取json的更多相关文章

  1. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  2. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

  3. ajax 动态获取json的例子

    1.前台脚本: //用于切换图片列表的ajax function changePhoto(title,hotelId){ $.ajax({ contentType: "application ...

  4. 发送Ajax请求获取JSON格式数据

    Aspx前端页面: <script type="text/javascript"> $(function () { $.getJSON("Ajax/TestA ...

  5. jQuery AJAX获取JSON数据解析多种方式示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. ajax获取json数据为undefined--原因解析

    解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...

  7. jQuery异步获取json数据的2种方式

    jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...

  8. asp.net mvc AjaxHelper 获取 JSON 的方法

    默认的 AjaxHelper 没有提供获取 JSON 的方法,只提供获取 html 然后更新指定元素的方法,不过,经测试发现还是有办法的,由于 AjaxOptions 对象的 OnSuccess 属性 ...

  9. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

随机推荐

  1. SURF算法

    一.原理: Sift算法的优点是特征稳定,对旋转.尺度变换.亮度保持不变性,对视角变换.噪声也有一定程度的稳定性:缺点是实时性不高,并且对于边缘光滑目标的特征点提取能力较弱. Surf(Speeded ...

  2. 中南大学2018年ACM暑期集训前期训练题集(入门题) J : A Simple Problem

    毒瘤哇!为什么要用long long 啊!!!这个题没有加法操作啊,为什么会爆int啊!!!! 思路: http://www.cnblogs.com/buerdepepeqi/p/9048130.ht ...

  3. Shell中while循环的done 后接一个重定向<

    读文件的方法: 第一步: 将文件的内容通过管道(|)或重定向(<)的方式传给while 第二步: while中调用read将文件内容一行一行的读出来,并付值给read后跟随的变量.变量中就保存了 ...

  4. 超详细从零记录Hadoop2.7.3完全分布式集群部署过程

    超详细从零记录Ubuntu16.04.1 3台服务器上Hadoop2.7.3完全分布式集群部署过程.包含,Ubuntu服务器创建.远程工具连接配置.Ubuntu服务器配置.Hadoop文件配置.Had ...

  5. 国内互联网公司UED博客

      1,淘宝UED http://ued.taobao.com/blog淘宝网用户体验团队博客,有关用户体验设计和研究的经验分享.UED的本意是用户体验设计,是英文User Experience De ...

  6. https和server-status配置案例

    https和server-status配置案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.https协议 我们知道http协议是明文的,所以,你的数据发送不管是请求报文(r ...

  7. 网络地址转换-NAT

    网络地址转换-NAT 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.NAT组网和常用术语 私网:局域网内IP 公网:因特网的公网ip地址 NAT设备:就是讲私网地址转换为公网的 ...

  8. CentOS下安装zookeeper并设置开机自启动

    转自: 一.安装zookeeper # cd /opt/ # mkdir zookeeper # cd zookeeper/ # tar -zxvf zookeeper-3.4.6.tar.gz # ...

  9. Mabatis三剑客分别是:mybatis-generator、mybatis-plugin、mybatis-pagehelper

    本文用的是maven,idea15 Mabatis三剑客分别是:mybatis-generator.mybatis-plugin.mybatis-pagehelper 一.mybatis-genera ...

  10. Centos下新建用户及修改用户目录

    Centos下新建用户及修改用户目录 Hillgo 关注 2015.09.22 01:32* 字数 154 阅读 3492评论 0喜欢 3 添加及删除用户 添加用户 test: adduser tes ...