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。

每日一句: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

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

时间: 2024-11-09 01:01:35

ajax模拟获取json的相关文章

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

问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法:      1)键名称:用双引号括起:    2)字符串:用双引号括起:    3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号!

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

1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法:      1)键名称:用双引号括起:    2)字符串:用双引号括起:    3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号! 2.jQuery中ajax使用json数据类型总是跳过success

ajax 动态获取json的例子

1.前台脚本: //用于切换图片列表的ajax function changePhoto(title,hotelId){ $.ajax({ contentType: "application/x-www-form-urlencoded; charset=UTF-8", type : "post", url : "<@a.webRoot/>/base/bms/hotel/hotelPicture-queryPictureByTitleAjax.a

Ajax加载json与序列化

json其实是JavaScript对象表示法,数据可以使用json来表示.它看起来非常像对象字面量语法,但它并不是对象. 当json在服务和web浏览器之间传输的时候是以字符串形式来传送的,在将json对象转换成json字符串发送给服务器叫做序列化,在接受服务器发送过来的json字符串并且将其转换成json对象叫做反序列化. 在JavaScript中有两种转换成json的方法: 第一 eval()方法 var json = '[ { "name" : "卫庄", &

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

jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: { "one" : "Hello", "two" : "World" } ■ 通过$.getJSON方法获取json数据 <script src="Scripts/jquery-2.1.1.min.js"

jquery的ajax和getJson跨域获取json数据

原文:http://www.cnblogs.com/yqskj/archive/2013/06/12/3133247.html 很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存

Servlet获取ajax传递的json值

Servlet获取ajax传递的json值 其实标题可直接写为“记一件愚蠢的事”.另外声明这是只是一篇水文. 原本都用SpringMVC和ajax进行前后台的交互,今天打算试试用原始的Servlet与其进行交互. 起初是打算实现一个跳转(虽然感觉没什么意义): Action如下: package per.zww.ajax.action; import java.io.IOException; import javax.servlet.ServletException; import javax.

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下: 参考内容:http://justcoding.iteye.com/blog/1366102 由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的

通过Jquery中Ajax获取json文件数据

1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : 名称/值对. 例如: "Student":"Tom" Json值可以是: 数字(整数或浮点数) 字符串(在双引号中) 逻辑值(true或者false) 数组(在方括号中) 对象(在花括号中) null  例如(对象):{"name":"to