H5页面基于接口实现数据交互

站长手记作者： 2024-08-28 12:15:01

对于现在APP开发来说，目前流行的两个方式是原生和H5。就如同之前业界程序猿争论的BS和CS之争一样，业界对于H5和原生也有不小的争论。对于前者的争论在于PC端，后者在于移动端上体现。

//请求接口
function ajaxForJson(url, op, jsonData, array_params_list) {

    $.post(myConfigHost + url, { "op": op, "jsonData": encodeURIComponent(JSON.stringify(jsonData)) }, function (data)
    {
        if (typeof (array_params_list) == 'undefined' || array_params_list == "" || array_params_list==null)
        {
            ajaxForJsonCommon(data,"#div_temp_items", "#divMain", "");
        }
        else
        {
            if (array_params_list.length > 0)
            {
                for (var p = 0; p < array_params_list.length; p++)
                {
                    ajaxForJsonCommon(data,array_params_list[p]["template_id"], array_params_list[p]["show_id"], array_params_list[p]["data_name"]);
                }
            }
        }
    });
}


//数据解析、模板填充
function ajaxForJsonCommon(data,template_id,show_id,data_name)
{
    var temp_items = $(template_id).html();//获取模板内容

    var finalHTML = ""; //最终html填充好的字符串

    var list = eval('(' + data + ')'); //这句固定这么写，兼容所有浏览器，将字符串，转成js的json对象，可以通过.的方式得到数组或者类对象
    if (data_name != "") {
        list = list[data_name];
    }
    for (var i = 0; i < list.length; i++) { //这句几乎也是固定，后面自行封装
        var temp_item = temp_items; //每次都是用新模版，避免模版只能使用一次，用到replace函数
        for (var itemKey in list[i]) { //js是有in语法的，用于提出json里的key-value
            if (typeof (wangjifengHandler_key) != 'undefined') {
                wangjifengHandler_key(itemKey, list[i], template_id);
            }
            for (var m = 0; m < 4; m++) {
                temp_item = temp_item.replace("{" + itemKey + "}", list[i][itemKey]);
            }
        }
        finalHTML += temp_item;//拼接内容
    }
    $(show_id).html(finalHTML);//将内容填充到html模板内
    if (typeof (wangjifengHandler) != 'undefined') {
        wangjifengHandler(template_id);
    }
}

<body>

        <!--
            作者：Wangjifeng
            时间：2018-03-19
            描述：html模版，默认隐藏，只为了读取出里面的模版html
        -->
        <div id="div_temp_items" style="display: none;">
            <div class="content">
                <div id="left"><img src="{CourseImage}" width="118.5px" height="67px"></div>
                <div id="right">{CourseName}</div>
            </div>
        </div>

        <div id="divMain" class="main">
            <!--<div>
                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>
                <div id="right">阿里前端P6架构师培养计划</div>
            </div>
            <div>
                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>
                <div id="right">阿里前端P6架构师培养计划</div>
            </div>
            <div>
                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>
                <div id="right">阿里前端P6架构师培养计划</div>
            </div>
            <div>
                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>
                <div id="right">阿里前端P6架构师培养计划</div>
            </div>
            <div>
                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>
                <div id="right">阿里前端P6架构师培养计划</div>
            </div>
            <div>
                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>
                <div id="right">阿里前端P6架构师培养计划王继峰开发创建的页面H5开发的页面</div>
            </div>-->
        </div>
    </body>

<script type="text/javascript">
            var UserId = GetQueryString("UserId");

            ajaxForJson("/user/userInfo.aspx", "myInfo", {
                "UserId": UserId
            });

            var EnableCourse = 1; //课程展示状态
            var EnableInfo = 1; //资料展示状态

            //获取课程展示、资料展示状态
            function wangjifengHandler_key(key, item) {
                if(key == "EnableCourse") {
                    EnableCourse = item[key];
                } else if(key == "EnableInfo") {
                    EnableInfo = item[key];
                }
            }
</script>

wangjifengHandler_key为通用方法已经编写好的取值方法，所以直接调用,key-value的格式，这样就可以轻易利用通用方法取你想要的值并进行存储了，方便各种操作。

我们再回过头看看通用方法中有一个名为wangjifengHandler（）的方法，他在数据取到并填充至html模板之后进行调用绑定。这个时候我们就可以在html里用它执行各种增删改操作了，每次提交请求之后，这个方法都会执行

//回调函数，在模版填充完毕，自动调用
            function wangjifengHandler() {

                //进行开关图片的绑定
                if(EnableCourse == 0) {
                    $(".img_course").attr("src", "img/switch_close.png");
                }
                if(EnableCourse == 1) {
                    $(".img_course").attr("src", "img/switch_open.png");
                }
                if(EnableInfo == 0) {
                    $(".img_Info").attr("src", "img/switch_close.png");
                }
                if(EnableInfo == 1) {
                    $(".img_Info").attr("src", "img/switch_open.png");
                }

                //绑定反复单击事件
                $(".img_course,.img_Info").click(function() {
                    var value_scr = $(this).attr("src");
                    var value_src_open = $(this).attr("src_open");
                    var value_src_close = $(this).attr("src_close");
                    var value_src_type = $(this).attr("value_src_type");

                    var type = "";
                    var type_state = "";
                    if(value_src_type == "kczs") {
                        //课程展示
                        type = "setEnableCourse";
                        type_state = EnableCourse;
                    } else {
                        //资料展示
                        type = "setEnableInfo";
                        type_state = EnableInfo;
                    }

                    //课程展示、资料展示状态设置
                    $.post(myConfigHost + "/user/userInfo.aspx", {
                        "op": type,
                        "jsonData": encodeURIComponent(JSON.stringify({
                            "UserId": UserId,
                            "EnableState": type_state
                        }))
                    }, function(data) {
                        var dataObj = eval("(" + data + ")"); //转换为json对象
                        if(type == "setEnableCourse") {
                            EnableCourse = dataObj.State;
                        } else {
                            EnableInfo = dataObj.State;
                        }
                    });

                    if(value_scr == value_src_open) {
                        $(this).attr("src", value_src_close);
                    } else {
                        $(this).attr("src", value_src_open);
                    }
                });
            }