So implementieren Sie Dateninteraktion auf H5-Seiten

Dieses Mal zeige ich Ihnen, wie Sie die Dateninteraktion auf H5-Seiten implementieren und welche Vorsichtsmaßnahmen es gibt, um die Dateninteraktion auf H5-Seiten zu implementieren. Schauen wir uns die folgenden praktischen Fälle an.

Für die aktuelle APP-Entwicklung sind die beiden beliebtesten Methoden native und H5. Genau wie die Debatte zwischen BS und CS unter Programmierern in der Branche gibt es auch in der Branche viele Kontroversen über H5 und Native. Die Debatte über Ersteres findet auf der PC-Seite statt, während Letzteres auf der mobilen Seite angesiedelt ist.

Welche Technologie für die Entwicklung einer APP geeignet ist, lässt sich vor allem anhand der folgenden Punkte beurteilen: <br>1 Ob die APP Textanforderungen hat (Fettformat, Schriftartenvielfalt) Hoch, H5 kann sehr gut implementiert werden, aber nativ ist schwächer als H5 <br> 2. Stellt die APP hohe Anforderungen an die Interaktion (Seitenwechsel, teilweise Abschnittsänderungen), hat H5 normalerweise Schwierigkeiten bei der Interaktion und es besteht ein Bedarf dafür Interaktion Es handelt sich im Grunde genommen um das Laden einer Webseite, während es nativ ein sehr einfacher Vorgang ist, bei dem nur der geänderte Teil geladen wird <br> 3. Die APP reagiert empfindlich auf Netzwerkanforderungen (schlechtes Netzwerk, ob offline betrieben werden soll), nativ kann es Obwohl H5 es kann, ist es schwieriger. 4. Die APP stellt strenge Anforderungen an die Hardware (Mikrofon, Kamera, Schwerkraftsensor). Die native Implementierung ist perfekt und es werden in Zukunft neue Funktionen verfügbar sein . Erweiterung, aber H5 ist für den häufigen Austausch einiger Aktivitäten in der APP zurückgekommen <br>6 und Zeitmanagement. Wenn die Anforderungen an die Benutzererfahrung nicht hoch sind, können Sie H5 verwenden. <br><br>

Zusammenfassend lässt sich sagen, dass es für diejenigen mit starker Interaktivität empfohlen wird, das ursprüngliche Ökosystem zu entwickeln, und für diejenigen, die eine große Datenmenge anzeigen, die Verwendung H5, um es in das native Framework zu verschachteln. Auf diese Weise wird die APP ein gutes Erlebnis haben. Auch in diesem Fall verkürzt die Hybridentwicklung die Bauzeit für die vollständige Original--Entwicklung, aber im Vergleich zu H5 sind zukünftige Skalierbarkeit und Benutzererfahrung garantiert.

Basierend auf dem vorherigen Blog zur Entwicklung der http-Schnittstelle wird in diesem Artikel ausführlich erläutert, wie die H5-Seite die Schnittstelle aufruft, um mit Daten zu interagieren und sie in die ursprüngliche Ökologie einzubetten.

Zunächst zeige ich Ihnen zwei gängige Methoden (JSON-Format), die ich für die

-Anfrageschnittstelle geschrieben habe, und fülle sie in die H5-Seite ein, nachdem die Daten analysiert wurden . Sie können kopiert und direkt verwendet werden. 1. Die Abfragefunktion

//请求接口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);
    }
}

fordert eine gemeinsame Methode zum Abrufen des ausgefüllten HTML

Die GetQueryString()-Methode wird verwendet, um die Parameter der http-Anfrage zu empfangen, was die Verschachtelung mit dem ursprünglichen Ökosystem erleichtert. Beispiel: Anforderungsadresse: http://127.0.0.1:8002/h5app/MyStudy.html?UserId=123456 Dann wird der Wert von UserId abgerufen.

ajaxForJson() Diese Methode ist die allgemeine Methode der Anforderungsschnittstelle, die wir gerade geschrieben haben. Der erste Wert ist die Schnittstellenadresse, der zweite Wert ist der Schnittstellenname und der dritte Wert sind die Anforderungsdaten im Format durch die Schnittstelle angegeben (dies Alle Artikel liegen im JSON-Format vor)

Sehen wir uns zunächst mit F12 die Daten an, die nach der Anforderung der Schnittstelle zurückgegeben werden

Die Daten im JSON-Format-Array. Einschließlich CourseId, CourseImage und CourseName waren die beiden allgemeinen Methoden, die ich gerade geschrieben habe, praktisch. Durch sie können wir die

-Anforderungsschnittstelle implementieren, die Daten abrufen, sie analysieren und in die H5-Seite

füllen, was bedeutet, dass wir zu diesem Zeitpunkt nichts tun müssen. Wir müssen nur zur H5-Seite gehen, um die Daten anzuzeigen. Es gibt ein paar Dinge zu beachten

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

1 Sie müssen id="pMain" zum vorherigen p hinzufügen und den Inhalt in p kommentieren

2. Fügen Sie ein neues hinzu: p id="p_temp_items" display="none"

3 Kopieren Sie den Kommentarinhalt in p (ein Objekt reicht aus) und füllen Sie dann die Daten mit {Attributname} aus. Dieser Vorgang dient hauptsächlich der Zusammenarbeit mit zwei gängigen Methoden zum Füllen von HTML-Vorlagen.

Sehen wir uns den Effekt an. Eine einfache Abfrage ist erledigt~

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>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Dateninteraktion auf H5-Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!