H5 페이지에서 데이터 상호작용을 구현하는 방법
- php中世界最好的语言원래의
- 2018-05-15 11:02:4411709검색
이번에는 H5 페이지에서 데이터 인터랙션을 구현하는 방법과 H5 페이지에서 데이터 인터랙션을 구현하는 방법에 대한 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.
현재 APP 개발에서 널리 사용되는 두 가지 방법은 네이티브와 H5입니다. 업계 프로그래머들 사이에서 BS와 CS의 논쟁처럼 H5와 네이티브에 대한 업계 내에서도 많은 논란이 있습니다. 전자에 대한 논쟁은 PC 쪽에서, 후자는 모바일 쪽에서 벌어지고 있다.
어떤 기술이 APP 개발에 적합한지는 주로 다음 사항을 통해 판단할 수 있습니다. <br>1. APP의 텍스트 요구 사항(굵은 글꼴, 글꼴 다양성)이 높은지 여부, H5가 이를 매우 잘 달성할 수 있는지, Native 의지가 있는지 여부 <br>2. 앱의 상호작용(페이지 전환, 부분 섹션 변경)에 대한 요구 사항이 높나요? H5는 기본적으로 웹 페이지를 로드하는 데 어려움이 있다고 합니다. 변경된 부분만 로드하면 되는 매우 간단한 프로세스입니다. <br>3. 앱은 네트워크 요구 사항에 민감합니다(오프라인 작동 여부). H5에서는 가능하지만 더 어렵습니다. APP에는 하드웨어(마이크, 카메라, 중력 센서)에 대한 엄격한 요구 사항이 있으며 기본 구현도 완벽합니다. 향후 새로운 기능으로 확장할 수도 있지만 H5는 도달할 수 없는 부분이 있습니다. <br>5. 활동을 자주 하는 H5는 교체 및 유지 관리가 매우 편리합니다. <br>6. 물론 사용자 경험이 높지 않으면 H5를 사용할 수 있습니다. <br>
요약하자면, 상호작용성이 강한 사람들은 원래 생태계를 개발하는 것이 좋으며, 데이터 표시량이 많은 사람들은 H5를 네이티브 프레임워크에 중첩하여 APP가 좋은 경험을 하게 될 것입니다. 이 경우에도 하이브리드 개발은 완전 오리지널 개발을 위한 구축 기간을 단축하지만, H5에 비해 향후 확장성과 사용자 경험이 보장된다.
이 기사에서는 이전 http 인터페이스 개발 블로그를 기반으로 H5 페이지가 어떻게 인터페이스를 호출하여 데이터와 상호 작용하고 이를 원래 생태계에 포함하는지 자세히 설명합니다.먼저 직접 작성한 두 개의
요청 인터페이스와 데이터를 구문 분석한 후 H5 페이지에 입력할 수 있는 일반 메서드(json 형식)를 보여드리겠습니다. annotations//请求接口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('(' + 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 페이지는 데이터를 표시합니다. <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에 내용에 주석을 달아야 합니다. "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中文网其它相关文章！
推荐阅读：
위 내용은 H5 페이지에서 데이터 상호작용을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!