使用layui框架封装ajax模块的具体步骤用layui框架封装ajax模块的具体步骤,
Layui是由自己的模块规范编写的前端ui框架,遵循原生HTML/CSS/JS的编写和组织形式,门槛极低,随时可用。
(学习视频分享:编程视频)
ajax可以说是在正常使用中被广泛使用,所以在这里我们添加了一个自己的模块来封装Ajax,方便使用。
注意:模块加载需要服务器环境的支持,所以在观看这个教程之前,请在您的本地建立一个本地服务器环境。这不在这个教程,的范围内,所以请自行前往百度。
1、建立项目目录
首先,从下载,的拉威包网站,把它放进我自己的项目。这里我用一个全新的空项目。添加layui后,目录结构如下:
2.编写模块文件
现在,我在plugin的layui文件夹下创建一个新的modules文件夹来保存我们自己的模块文件,并在这个文件夹中创建一个新的common.js文件来编写我们的第一个模块。该文件的内容如下:
layui.define([ ‘jquery’ ],function (exports){
var $=layui.jquery
var obj={
ajax:函数(url、类型、dataType、数据、回调){
$.ajax({
url: url,
type:类型,
数据类型:数据类型,
数据:数据,
成功:回拨
});
}
};
//输出接口
导出(‘ common ‘,obj);
});layui.define()方法是layui的定义模块方法,它接收两个参数,第一个参数是依赖模块,这里我们看到我们的依赖和jquery;我们定义模块内容的第二个回调方法是提供这些方法。从上面我们可以看到,我们定义了一个obj对象,它有一个ajax方法来调用jquery的ajax来执行我们的操作。如果您正在封装其他jquery插件,只需将插件的js代码放入layui.define()的回调方法中即可。
Exports()是输出接口。这个方法还有两个参数,第一个是输出模块的名称,第二个是输出哪个对象。
至此,我们的模块完成。如果以后需要添加方法,只需向obj对象添加方法即可。现在我们的目录结构如下:
3.设置layui加载组件目录模块
模块完成后,我们需要配置layui,以便layui可以找到我们的模块。通常,这种配置是在我们的全局js中完成的。在这里,我将在assets/js下创建一个新的global.js文件,如下所示:
layui.config({
base : ‘/assets/plugin/layui/modules/’//自定义layui组件目录
}).扩展({ //设置程序集别名
common: ‘common ‘,
});Layui.config()是Layui的配置方式,基参数表示我们模块的保存目录,是从网站的访问根目录计算出来的,从上一步可以看出,我的模块的保存路径在/assets/plugin/layui/modules/folder下;我们实际的模块名是在extend中定义的。在上面的代码中,冒号前的“common”表示模块名称,这是我们以后加载模块时会用到的名称,而冒号后的“common”表示我们模块文件的名称,实际上指的是/assets/plugin/layui/modules/common . js文件。我们可以省略js后缀,并在加载时自动添加后缀。
4.使用模块
模块定义好之后,我们就可以使用模块了。其实使用模块和使用layui自己的模块是一样的。现在我将修改项目的index.html文件,其中我使用模块的ajax方法来访问在线翻译界面。文件代码如下:
脚本src=’ assets/plugin/layui/layui . js ‘/脚本
脚本src=’assets/js/global.js’ /脚本
脚本
layui.use([‘common’],function () {
var common=layui.common
common . Ajax(‘ http://route . show API.com/32-9 ‘,’ post ‘,’ json ‘,{
showapi_appid’: 28043,
show API _ sign ‘ : ‘ FD 5c e 066 f 69441 BFA 078 c 0 ad 16129 b 15 ‘,
q’: ‘hello ‘
},函数(res) {
alert(JSON . stringify(RES));
});
});
/script访问index.html,看到下图返回的结果,证明模块封装成功。
相关推荐:上面的layui教程是使用LaYUI框架封装ajax模块的具体步骤的详细内容。请多关注其他关于雷伊php知识的相关文章!