layui ajax到php,使用layui框架封装ajax模块的具体步骤,layui ajax

使用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知识的相关文章！