Wex5中读取json文件

前言:在Wex5中如何读取本地json文件的内容并将它存储到data组件,并通过绑定事件将内容显示在页面上。

第一:1、在ui下面建立.json文件,编辑json格式数据。


2、在.w文件中添加data组件。在列中添加.json文件对应的数据。


3、在.w文件下content中添加三个labelOutput组件,绑定data。对应的绑定data组件的列


4、页面组件绑定完成,这时候我们添加三个button按钮,分别是去加载数据,下一天数据,和上一条数据。


在加载本地json数据的按钮的点击事件中,实现加载本地json文件的数据。使用ajax异步请求:里面包含五个参数;

第一个参数:dataType:数据的类型,这里是json,第二个参数:url:本应用下的.json文件,第三个参数:async:(尚未具体了解)false,第四个参数:data:参数,这里不需要,给一个空{}。第五个参数success:这是请求成功后做的操作,加载数据就是要在这里操作;下面是index.w页面代码:

define(function(require){
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");

var Model = function(){
this.callParent();
};


Model.prototype.button1Click = function(event){
var x=this.comp("data1");
$.ajax({
DataType:"json",
url:"http://localhost:8070/x5/UI2/v_/index/a.json",//本应用下的json文件
async:false,
data:{},
success:function(data){
data={defaultValues:data};//这里用defaultValues:data 会生成一个参数userData,否则直接加载会加载不出
x.newData(data);
alert("加载成功!");
x.first();
}
});

};


Model.prototype.button2Click = function(event){
var x=this.comp("data1").pre();//上一条数据
};


Model.prototype.button3Click = function(event){
var x=this.comp("data1").next();//下一条数据
};


return Model;
});



猜你喜欢

转载自blog.csdn.net/xmj_0422/article/details/78981945