电商项目中的渲染引擎和ajax调用后台接口

最新推荐文章于 2022-06-16 01:25:12 发布

原创最新推荐文章于 2022-06-16 01:25:12 发布 · 471 阅读

1 ·

CC 4.0 BY-SA版权

博客介绍了渲染引擎和调用后台接口相关内容。渲染引擎可在后台数据改变时更便捷转换数据，在项目搜索模块中，能获取搜索栏信息，通过关键字搜索并将数据渲染到页面；还提及了调用后台接口，但未详细展开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.渲染引擎

作用：当后台改变数据时，能更方便的转换数据，不用传统的那么麻烦

1，导入
2.HTML页面添加模板引擎，将对应的html修改成模板引擎，使之变成渲染数据，即<% %>
    ---<script type="text/template" id="">
3.通过模板引擎渲染数据，将数据传入HTML页面，
    ---$('.uu').html(template('模板引擎id',{list:"数据"}));

项目中的搜索模块
一.获取搜索栏中的信息–地址栏中的？后面的数据，与搜索框中的数据相同，相对应

1.先通过location.search;-----？searchNanme=11&age=12;
     ----获取地址搜索框中输入的数据,searchName || " ";传值或者为空
2.将获取的数据值字符串转换为数组----去掉？，去掉&,去掉=;
3.将转化好的数组值存储在json格式--params={}
4.将其存储的数据传给表单的搜索框，改变value值
5.进行转换编码

二.通过关键字进行搜索，根据关键字将数据渲染到页面

 1.通过ajax获取后台数据，传入data数据
          ---- var getData=function(data,callback){
                            $.ajax({
                        url:'user.json',//请求地址
                        data:'',//发送的数据
                        type:'',//请求的方式
                        dataType:'json',//数据的类型
                        success:function (data) {
                            callback && callback(data);
                        },// 请求成功执行的方法
                    }
 2.将关键字和自定义的回调函数传入，回调函数-----进行模板引擎渲染搜索内容
        ----data中的数据，查看文档，查找接口，
                            后代数据接口
                            proName:...,
                            page:1,
                            pageSize:4
                            type:type;------type值的变化，1,2，表示升序和或者降序
                            当其中的数据中存在变量时，此时并不能直接进行调用，可通过将数据赋值给对象，对对象进行添加属性
                        ----getData(data,进行渲染引擎的函数)-----传入数据的函数

二.调用后台接口


var getData = function (params, callback) {
    $.ajax({
        url: '/product/queryProduct',---------后台接口
        type: 'get',
        data: params,----------------传入的数据---可以是后端已整理好的数据
        dataType: 'json',
        success: function (data) {
            window.page = data.page;
            //业务逻辑
            callback && callback(data);
        }
    });
}