How to implement data interaction on H5 pages

This time I will show you how to implement data interaction on the H5 page. What are the precautions for implementing data interaction on the H5 page? The following is a practical case, let's take a look.

For current APP development, the two currently popular methods are native and H5. Just like the debate between BS and CS among programmers in the industry, there is also a lot of controversy in the industry about H5 and native. The debate about the former lies on the PC side, while the latter lies on the mobile side.

Which technology is suitable for development of an APP can be judged mainly through the following points: 1. Whether the APP has text requirements (bold format, font diversity) High, H5 can be implemented very well, but native will be weaker than H5; <br>2. Does the APP have high requirements for interaction (page switching, partial section changes), H5 usually has difficulty in interaction, and there is a need for interaction It is basically loading a web page, while natively it is a very simple process, just loading the changed parts; <br>3. The APP is sensitive to network requirements (poor network, whether to operate offline), natively can Although H5 can do it, it is more difficult; <br>4. APP has hard requirements for hardware (microphone, camera, gravity sensor). The native implementation is perfect, and new functions will be available in the future. Expansion, but H5 is far behind; <br>5. APP has a certain frequency of replacement for some activities. H5 has come back. H5 is very convenient to replace and maintain; <br>6. Of course, it is budget and time management. If the user experience requirements are not high, you can use H5. <br>

#So to sum up, for those with strong interactivity, it is recommended to develop the original ecology, and for those displaying a large amount of data, H5 should be nested into the native framework. This way the APP will have a good experience. Also in this case, hybrid development shortens the construction period for full-original development, but compared with H5, future scalability and user experience are guaranteed.

Based on the previous http interface development blog, this article will give you a detailed explanation of how the H5 page calls the interface to interact with data and embed it with the original ecology.

First show two

request interfaces written by myself, and common methods (json format) for filling data into H5 pages after obtaining data parsing, which can be copied and used directly. Already writtenComments

//请求接口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,"#p_temp_items", "#pMain", "");
        }        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(&#39;(&#39; + data + &#39;)&#39;); //这句固定这么写，兼容所有浏览器，将字符串，转成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) != &#39;undefined&#39;) {
                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) != &#39;undefined&#39;) {
        wangjifengHandler(template_id);
    }
}

1. Query function

Request a common method to obtain the filled html

The GetQueryString() method is used to receive the parameters of the http request to facilitate nesting with the original ecology. For example, the request address: http://127.0.0.1:8002/h5app/MyStudy.html?UserId=123456 Then the value of UserId will be obtained.

ajaxForJson() This method is the general method of the request interface we just wrote. The first value is the interface address, the second value is the interface name, and the third value is the request data in the format specified by the interface (this All articles are in json format)

Let’s F12 first to look at the data returned after requesting the interface

The data in the json format array. Including CourseId, CourseImage, CourseName, the two general methods I just wrote came in handy. Through them, we can implement the

request interface, obtain the data and parse it and fill it into the H5 page, which means that we don’t have to do anything at this time, we only need to go to the H5 page to display the data and that’s it. .

<body>
        <!--
            作者：Wangjifeng
            时间：2018-03-19
            描述：html模版，默认隐藏，只为了读取出里面的模版html        -->
        <p id="p_temp_items" style="display: none;">
            <p class="content">
                <p id="left"><img src="{CourseImage}" width="118.5px" height="67px"></p>
                <p id="right">{CourseName}</p>
            </p>
        </p>
        <p id="pMain" class="main">
            <!--<p class="content">
                <p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
                <p id="right">阿里前端P6架构师培养计划</p>
            </p>
            <p class="content">
                <p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
                <p id="right">阿里前端P6架构师培养计划</p>
            </p>
            <p class="content">
                <p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
                <p id="right">阿里前端P6架构师培养计划</p>
            </p>
            <p class="content">
                <p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
                <p id="right">阿里前端P6架构师培养计划</p>
            </p>
            <p class="content">
                <p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
                <p id="right">阿里前端P6架构师培养计划</p>
            </p>
            <p class="content">
                <p id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></p>
                <p id="right">阿里前端P6架构师培养计划王继峰开发创建的页面H5开发的页面</p>
            </p>-->
        </p>
    </body>

There are a few things to pay attention to

1. You need to add id="pMain" to the previous p, and comment the content in p

2. Add a new p id ="p_temp_items" display="none"

3. Copy the comment content into p (one object is enough), and then fill in the data with {attribute name}. This kind of operation is mainly to cooperate with two common methods to fill html template.

Let’s take a look at the effect. A simple query is completed~

2.编辑功能

首先来看看页面，两个开关，实现对状态的更改操作

我们要对这两个状态进行更改操作，那么首先进入页面时，就要获取到这两个状态的值进行开关的绑定。并且用js进行取值。先看看请求后获得的json

EnableCourse为课程展示的值，EnableInfo为资料展示的值。ajax请求获取到了，那么怎么利用js进行取值呢？

<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>

<span style="color: #ff0000">wangjifengHandler_key为通用方法已经编写好的取值方法，所以直接调用,key-value的格式，这样就可以轻易利用通用方法取你想要的值并进行存储了，方便各种操作。<br><span style="color: #000000"><br>我们再回过头看看通用方法中有一个名为</span>wangjifengHandler（）<span style="color: #000000">的方法，他在数据取到并填充至html模板之后进行调用绑定。这个时候我们就可以在html里用它执行各种增删改操作了，</span></span><strong><span style="color: #ff0000">每次提交请求之后，这个方法都会执行</span></strong>

            //回调函数，在模版填充完毕，自动调用
            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);
                    }
                });
            }

<br>

前面杂七杂八的代码可以忽略~主要是利用前面wangjifengHandler_key（）方法取到两个我们想要的值后，然后在wangjifengHandler()中post提交给接口执行修改操作，根据接口响应状态，再进行页面绑定。

删除也和这一模一样，利用wangjifengHandler_key（）取到你所需的值，于wangjifengHandler()中post提交，执行之后制动重新加载页面。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

max-width和min-width的使用技巧<br>

text-align如何实现两端对齐<br>

The above is the detailed content of How to implement data interaction on H5 pages. For more information, please follow other related articles on the PHP Chinese website!