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

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

摘要生成于 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);
        }
    });
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值