h5 上 删除 交互_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格式)，可以复制直接使用，已写好注释

//请求接口

functionajaxForJson(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"]);

}

}

}

});

}//数据解析、模板填充

functionajaxForJsonCommon(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了。