ajax模拟获取json
现在工作中我用到获取数据的方式,基本都是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的更多相关文章
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
- ajax 动态获取json的例子
1.前台脚本: //用于切换图片列表的ajax function changePhoto(title,hotelId){ $.ajax({ contentType: "application ...
- 发送Ajax请求获取JSON格式数据
Aspx前端页面: <script type="text/javascript"> $(function () { $.getJSON("Ajax/TestA ...
- jQuery AJAX获取JSON数据解析多种方式示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ajax获取json数据为undefined--原因解析
解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...
- jQuery异步获取json数据的2种方式
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...
- asp.net mvc AjaxHelper 获取 JSON 的方法
默认的 AjaxHelper 没有提供获取 JSON 的方法,只提供获取 html 然后更新指定元素的方法,不过,经测试发现还是有办法的,由于 AjaxOptions 对象的 OnSuccess 属性 ...
- qt qml ajax 获取 json 天气数据示例
依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...
随机推荐
- Android 屏幕手势滑动中onFling()函数的技巧分析
关于如何处理手势操作以及那四个基本固定的顺序我就不讲解了,这里直接跳到我们获得瞬间滑动后回调onFling()这个抽象函数时,应该如何根据参数比较准确的判断滑动方向.如果你没有前面的基础知识,你可以去 ...
- 【洛谷P3792】由乃与大母神原型和偶像崇拜
题目大意:维护一个序列,支持单点修改和查询一段区间能不能组成连续的一段数. 题解:查询区间能不能组成一段连续的数这个操作较为复杂,很难在较小时间复杂度内直接维护.这里采用线段树维护区间哈希的策略,即: ...
- (转)sublime text3简体中文版汉化教程
preferens——package controller——输入 install package——等待安装完成后输入 localizationChinese 请使用主菜单的 帮助/Language ...
- react与umi
我们知道umi 是一个编译工具,但它同时也是一个前端框架.它对社区的 webpack,react-router 等进行的封装, 使得我们可以基于它快速搭建一个 React 项目. 第一步:安装umi ...
- Sublime Text3—系统设置
摘要 软件的设置分为系统设置和快捷键设置两项,这次分享系统设置,Sublime Text3-自带快捷键介绍前面已分享过. 正文 菜单依次选择Preferences | Settings,我们修改设置不 ...
- 选择监听事件ItemListener(是否被选择)
[界面说明] 下拉列表框,选谁谁显示.复选框与单选按钮,输出被选与否的状态.知识点主要代码为: int state = e.getStateChange(); ItemEvent.SELECTED I ...
- [持续更新] 文章列表 Last Update: 8/21/2017
1.前端 HTML5快速学习二 Canvas@20141125 HTML5快速学习一@20141122 2.ASP.NET(MVC) MVC5+EF6 完整教程17--升级到EFCore2.0@201 ...
- Linux命令之rmdir
rmdir命令 用处:删除文件夹 用法:在终端中输入rmdir加上要删除的文件夹的名字 示例: (我要删除shuyunquan这个文件夹)
- js jquery获取当前元素的兄弟级 上一个 下一个元素
原博地址:http://www.jb51.net/article/71782.htm var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNod ...
- java compareTo() 用法注意点
转自:http://www.2cto.com/kf/201305/210466.html compareTo就是比较两个值,如果前者大于后者,返回1,等于返回0,小于返回-1,我下面给出了例子,由于比 ...