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

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

那一个APP适合用什么技术来开发，主要通过下面几点来判断：

1、APP对于文字的要求（格式加粗，字体多样性）是否高，H5可以很好的实现，而原生则会弱于H5；

2、APP对于交互（页面切换，部分版块变化）的要求是否高，H5通常在交互上比较吃力，有交互的需求是基本上是在加载一个网页，而原生来说是很简单的一个过程，只是加载变化部分；

3、APP对于网络的要求（网络较差、是否离线操作）的敏感度，原生可以做到，H5虽然能做，但难度较大；

4、APP对于硬件（麦克风、摄像头、重力感应器）时候有硬性要求，原生完美实现，未来有新的功能也能有很好的扩展，而H5望尘莫及；

5、APP对于一些活动的更换频繁程度，对此H5扳回一局，H5对此更换十分方便，维护方便；

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,"#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);

    }

}

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

        -->

        <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 class="content">

                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>

                <div id="right">阿里前端P6架构师培养计划</div>

            </div>

            <div class="content">

                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>

                <div id="right">阿里前端P6架构师培养计划</div>

            </div>

            <div class="content">

                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>

                <div id="right">阿里前端P6架构师培养计划</div>

            </div>

            <div class="content">

                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>

                <div id="right">阿里前端P6架构师培养计划</div>

            </div>

            <div class="content">

                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>

                <div id="right">阿里前端P6架构师培养计划</div>

            </div>

            <div class="content">

                <div id="left"><img src="img/kc_bg01.png" width="118.5px" height="67px"></div>

                <div id="right">阿里前端P6架构师培养计划王继峰开发创建的页面H5开发的页面</div>

            </div>-->

        </div>

    </body>

有几个注意的地方

1.需要将以前的div 添加id="divMain",div里内容注释

2.新增一个div id="div_temp_items" display=“none”

3.将注释内容复制到div里（一个对象就够了），再以{属性名称}进行数据填写就可以了。这样的操作主要是为了配合两个通用方法进行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>

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

                    }

                });

            }

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

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

由于时间不多，文章写得有些凌乱~谅解。主要是理解两个通用方法，后面调用起来就很极其方便。

原创文章，转载请注明出处。

H5页面基于接口实现数据交互的更多相关文章

H5页面基于iScroll.js插件实现下拉刷新，上拉加载更多
前言在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...
SpringMVC4+thymeleaf3的一个简单实例（篇五：页面和MySql的数据交互-展示以及存储）
这一篇将介绍怎样把页面数据保存的MySQL数据库,并将数据库内容展示到页面上.首先做一个基础工作,添加以下jar到lib:1: mysql-connector-Java-5.1.40-bin.jar ...
两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术一.创建数据库这里以 ...
vuejs开发H5页面总结
最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开发中总结的经验. 关于布局方案当拿到设 ...
Flex数据交互之Remoting
一前言 Flex数据交互常用的有三种方式:WebService.HttpService以及Remoting. WebService方式已在这篇文章中给出,这篇文章主要讲解以Remoting方式进行数 ...
Flex数据交互之Remoting[转]
Flex数据交互之Remoting 一前言 Flex数据交互常用的有三种方式:WebService.HttpService以及Remoting. WebService方式已在这篇文章中给出,这篇文章 ...
基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式
在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...
混合app开发，h5页面调用ios原生APP的接口
混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...
Hybrid APP基础篇(三)->Hybrid APP之Native和H5页面交互原理
本文已经不维护,新地址: http://www.cnblogs.com/dailc/p/8097598.html 说明 Hybrid模式原生和H5交互原理目录前言参考来源前置技术要求楔子 A ...

随机推荐

windows转mac-开发环境搭建（一）：mac上搭建maven环境
1.下载地址:https://maven.apache.org/download.cgi 将下载的maven压缩包进行解压,放入到一个方便管理的文件当中,解压命令:tar zxvf apache-ma ...
Java文件及文件夹的创建与删除
功能这个实例实现了在D盘创建一个文件和文件夹,并删除它们. 函数介绍 createNewFile():当文件不存在时,根据绝对路径创建该文件. delete():删除文件或者文件夹. ...
nyoj 1129 Salvation 模拟
思路:每个坐标有四种状态,每个点对应的每种状态只能走一个方向,如果走到一个重复的状态说明根本不能走到终点,否则继续走即可. 坑点:有可能初始坐标四周都是墙壁,如果不判断下可能会陷入是死循环. 贴上测试 ...
POJ - 3087 模拟 [kuangbin带你飞]专题一
模拟洗牌的过程,合并两堆拍的方式:使先取s2,再取s1:分离成两堆的方式:下面C张放到s1,上面C张到s2.当前牌型与第一次相同时,说明不能搜索到答案. AC代码 #include<cstdio ...
day3(while、流程控制)
一.while 语法 white 条件: 执行代码... 小练习: #打印0-100的偶数 count = 0 while count <= 100: if count %2 == 0 : pr ...
如何解决使用Gradle时出现的jar包冲突
前言在我之前使用Gradle的博文中已经提到,Gradle对依赖的管理是比较智能的,如果有两个包依赖于相同的包,而版本不同的时候,Gradle会进行自动的选择,从而避免jar包的冲突. 也就是说,在 ...
SpringBoot整合Mybatis,多数据源,事务,支持java -jar 启动.
用了一段时间SpringBoot,之前配置MYBATIS ,在打包WAR 放到tomcat下正常,但是WAR已经过时了,现在流行直接打包JAR 丢到DOCKER 里,无奈JAR 启动的时候MAPPER ...
初探Java多线程
多线程是由Java提出的概念,那么什么是线程呢?这里会涉及到几个名字听着很类似的东西:程序.线程.进程. 程序:存储在磁盘上的一系列的文件,包括可执行文件和不可执行文件. 进程:在内存中,每一个程序都 ...
使用static与const关键字时需要掌握的知识
static:1.不考虑类,static的作用: 1)第一个作用:隐藏.使得全局变量和函数对其它文件不可见,同时避免了不同文件的命名冲突. 2)第二个作用:默认初始化为0.未初始化的全局静 ...
浅谈this关键字
在我学习this关键字的时候,通过查找资料总结出一些this的特殊用法, 供大家参考,代码里面有我总结的分析过程! 箭头函数里的this: var username = "全局"; ...

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

H5页面基于接口实现数据交互的更多相关文章

随机推荐

热门专题