利用请求回来的数据

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

发送请求,会返回相应的数据,通常我们希望服务返回来的数据都是 json 格式的,使用 jQuery 的 ajax 方法发送的请求,会自动把返回来的 json 格式的数据转换成 JavaScript 的对象的形式 ... 这样我们就可以直接去使用这些数据,把想要的东西显示到应用的界面上。

这个视频我们一起来看一下,把服务返回来的当前登录的用户的一些信息显示在一个应用的页面上。

index.html(#折叠好)

先去看一下这个页面需要的 html 结构... 这里我们用的是 jQuery Mobile 的页面的结构,先是一个大的 div 容器 ... 上面有一个 data-role 属性,属性的值是 page ,表示这是一个页面,在这个页面上,我自己定义了一个 id ,是 user-profile ,这个 id 就是这个页面的名字。

在它的里面分成了三个部分,页头,主体内容,还有页脚。他们上面都有对应的 data-role 属性,页头是 header,主体内容是 main ,页脚是 footer

这里我们先看一下主体内容,因为一会儿,要把返回来的用户信息输出到这个容器里面,我在这个容器上事先定义了一个 id ,user-profile-body ..

等会儿,可以用到这个 id 来定位这个容器,再把想要的内容输出到这里。(#打开 main)现在, 它只是一组空白的 div 标签。

index.js

下面,我们再去处理一下要用到的代码。打开 index.js ...

还是基于前面的视频里的代码 ... 在请求查看当前登录用户信息成功以后,在这个 success 属性后面的函数里,可以去输入一些代码。返回来的用户信息会在这个 data 对象里。下面,我们再到浏览器的控制台上,去看一下这个对象里面的东西。

回到浏览器 ... 刷新 ... 打开这个对象 ... 在它的 user 属性里,这个 user 属性的值也是一个对象 ... 在这里可以找到我们想要用到的东西,比如用户名,是在 user 这个对象的 name 这个属性里面 ...

另外,可以再用一个 created 属性... 这的值是用户注册的时间 ... 这个时间是从 1970年1月1号,到用户注册的那个时间的秒数 ... 在代码里,可以处理一下它,把它转换成一般人都能看得懂的日期。

回到 index.js ,先定位一下想要显示这些内容的那个容器 .. 然后使用 jQuery 的 html 方法,去设置一下这个容器里面的东西。先去定义两个变量 ...

var userName = data.user.name,
userCreated = new Date(data.user.created * 1000);

userName 里面的值就是用户的名字,用户的名字就是返回来的对象的 user 这个属性里面的 name 这个属性的值 ... userCreated 里的值是用户注册的日期,因为 JavaScript 里的时间是从 1970年1月1号 到某个时间的毫秒数 ... user 对象里的 created 属性里的值是秒数,所以,需要让它乘以 1000 ,转换成毫秒 ...

success: function (data) {
console.log(data);
var userCreated = new Date(data.user.created * 1000);
$('#user-profile-body').html(
'<h3>' + userName + '</h3>' + '<p><strong>注册时间:</strong>' +
userCreated.toLocaleDateString() + '</p>'
);
}

下面我们要做的就是,把用户名,用一组 h3 标签包装一下,用一组 p 标签包装一下用户注册的日期,这里使用一个 toLocaleDateString ,可以转换一下日期的显示格式 ... 然后再把它们一起放在 user-profile-body 这个 id 的容器里面。

预览

保存,回到浏览器 ... 刷新一下 ...

现在, 在这个页面上,会显示出,当前登录的用户的名称 ... 还有他的注册的日期。

利用请求回来的数据《 Drupal Services 整合外部应用 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点