首頁  >  文章  >  web前端  >  在H5頁面上如何實現資料交互

在H5頁面上如何實現資料交互

php中世界最好的语言
php中世界最好的语言原創
2018-05-15 11:02:4411678瀏覽

這次帶給大家怎樣在H5頁面實現數據交互,在H5頁面實現數據交互的注意事項有哪些,下面就是實戰案例,一起來看一下。

對現在APP開發來說,目前流行的兩個方式是原生和H5。就如同先前業界程序猿所爭論的BS和CS之爭一樣,業界對於H5和原生也有不小的爭論。對於前者的爭論在於PC端,後者在於行動端上體現。

那一個APP適合用什麼技術來開發,主要透過下面幾點來判斷:<br>1、APP對於文字的要求(格式加粗,字體多樣性)是否高,H5可以很好的實現,而原生則會弱於H5;<br>2、APP對於互動(頁面切換,部分版塊變化)的要求是否高,H5通常在互動上比較吃力,有互動的需求是基本上是在載入一個網頁,而原生來說是很簡單的一個過程,只是載入變化部分;<br>3、APP對於網路的要求(網路較差、是否離線操作)的敏感度,原生可以做到,H5雖然能做,但難度較大;<br>4、APP對於硬體(麥克風、攝影機、重力感應器)時候有硬性要求,原生完美實現,未來有新的功能也能有很好的擴展,而H5望塵莫及;<br>5、APP對於某些活動的更換頻繁程度,對此H5扳回一局,H5對此更換十分方便,維護方便;<br>6、當然就是預算和對時間的要求,使用者體驗度要求不高的話,那可以用H5來做。

所以綜上所述,對於互動性較強建議原生態開發,而那些大量資料展示的,做H5嵌套進原生框架中,這樣APP會有良好的體驗。同樣在這種情況下,混合開發對於全原生態開發下來說是縮短工期,而對比H5來說,將來的可擴展性和用戶體驗得到保證。

基於上篇http介面開發的博客,這篇文章給大家詳解,H5頁面如何調用介面對資料進行交互以及與原生態鑲嵌。

首先展示兩個我自己寫的請求介面、取得資料解析之後填入H5頁面的通用方法(json格式),可以複製直接使用,已寫好註解

//请求接口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.查詢功能

#請求通用方法取得已填入好的html

GetQueryString()方法用來接收http請求所帶的參數,以便與原生態進行嵌套。 例如請求位址:http://127.0.0.1:8002/h5app/MyStudy.html?UserId=123456   那麼就會獲得UserId的值。

ajaxForJson()這個方法就是我們剛剛寫的請求介面通用方法,第一個值為介面位址,第二個值為介面名稱,第三個值為介面指定格式的請求資料(本文章都是json格式)

我們先F12看下請求介面之後回傳的資料

json格式陣列的資料。包含CourseId,CourseImage,CourseName,剛剛我寫的兩個通用方法派上用場了。透過他們,可以實現請求介面、獲得資料解析之後填入H5頁面,意味著我們這個時候什麼都不用做,只需要到H5頁面做資料展示就OK了。

<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.需要將先前的p 加到id="pMain",p裡內容註解

2.新增一個p id ="p_temp_items" display=「none」

3.將註解內容複製到p裡(一個物件就夠了),再以{屬性名稱}進行資料填入就可以了。這樣的操作主要是為了配合兩個通用方法進行html模板填滿。

我們來看看效果,一個簡單的查詢就完成了~

#

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>

以上是在H5頁面上如何實現資料交互的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn