H5 page implements Data Interaction Based on interfaces, and h5 page interface Interaction

H5 page implements Data Interaction Based on interfaces, and h5 page interface Interaction

Currently, two popular APP development methods are native and H5. Just like the BS and CS competition in the industry, there is a lot of debate in the industry over H5 and native. The debate over the former lies in the PC end, and the latter lies in the embodiment of the Mobile End.

Which of the following technologies can be used to develop an APP:

1. Whether the APP's requirements for text (bold format, font diversity) are high, H5 can be well implemented, while native will be weaker than H5;

2. Whether the APP has high requirements for interaction (page switching, some forum changes). H5 is usually hard to interact with each other. The interaction requirement is that it is basically loading a webpage, native is a very simple process, just loading the changed part;

3. The APP's sensitivity to network requirements (poor network and whether to perform offline operations) can be achieved by native, and H5 can do the same, but it is more difficult;

4. The APP has rigid requirements for hardware (microphones, cameras, and gravity sensors), and the Native is perfect for implementation. New features will be available in the future, but H5 will not be able to achieve this;

5. The APP frequently changes some activities, and H5 is pulled back for one round. H5 is very convenient and easy to maintain;

6. Of course, it is the budget and time requirement. If the user experience requirement is not high, H5 can be used.

To sum up, it is recommended that the original ecological development be highly interactive, and H5 is nested into the native framework for the presentation of a large amount of data, so that the APP will have a good experience. Similarly, in this case, hybrid DevelopmentAfter development, the development period is shortened. Compared with H5, the future scalability and user experience are guaranteed.

Based on the previous blog developed by the http interface, this article explains how to call the interface on the H5 page to interact with data and embed data with the original ecology.

 

First, I will show two self-compiled request interfaces, and the general method (in json format) that is filled into the H5 page after data parsing is obtained, which can be copied and used directly. The annotations have been written.

// Request interface 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"]) ;}}}); // data parsing, template filling function ajaxForJsonCommon (data, template_id, show_id, data_name) {var temp_items = templates (template_id).html (); // obtain the template content var finalHTML = ""; // final html filled string var list = eval ('+ data + ') '); // This sentence is fixed and compatible with all browsers. Json object of js, you can get an array or class object if (data_name! = "") {List = list [data_name];} for (var I = 0; I <list. length; I ++) {// This sentence is almost fixed, and var temp_item = temp_items is encapsulated later. // a new template is used each time to avoid the template being used only once, the replace function for (var itemKey in list [I]) {// js has the in syntax and is used to propose the key-value if (typeof (wangjifengHandler_key) in json )! = '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; // spliced content} else (show_id).html (finalHTML); // fill the content in the html template if (typeof (wangjifengHandler )! = 'Undefined') {wangjifengHandler (template_id );}}

 

1. Query

Request common methods to obtain the filled html

 

The GetQueryString () method is used to receive parameters contained in an http request to facilitate nesting with the original ecology. For example, the request address is http: // 127.0.0.1: 8002/h5app/MyStudy.html? UserId = 123456 then the value of UserId is obtained.

AjaxForJson () is the common method of the Request interface we just wrote. The first value is the interface address, and the second value is the interface name, the third value is the request data in the specified format of the interface (This article uses the json format)

Let's look at the data returned after the request interface in F12.

Json array data. Including CourseId, CourseImage, and CourseName. The two general methods I just wrote come in handy. Through them, we can implement the request interface and get the data to be parsed and then fill it into the H5 page, which means we don't need to do anything at this time. We just need to do the data display on the H5 page and it will be OK.

<Body> <! -- Author: Wangjifeng time: 8-08-03-19 Description: html template, hidden by default, only to read the template html --> <div id = "div_temp_items" style = "display: none; "> <div class =" content "> <div id =" left ">  </ div> <div id = "right"> {CourseName} </div> <div id = "divMain" class = "main"> <! -- <Div class = "content"> <div id = "left">  </div> <div id = "right"> Alibaba frontend P6 architect Training Plan </div> <div class = "content"> <div id = "left">  </div> <div id = "right"> Alibaba frontend P6 architect Training Program </div> </div> <div class = "content"> <div id = "left">  </div> <div id = "right"> Alibaba frontend P6 architect Training Plan </div> <div class = "content"> <div id =" left ">  </div> <div id =" right "> cultivation of Ali frontend P6 architect scheduler </div> <div class = "content"> <div id = "left">  </div> <div id = "right"> Alibaba frontend P6 architect Training Plan </div> <div class = "content"> <div id = "left">  </div> <div id = "right"> Alibaba front-end P6 architect Training Plan Wang jifeng development and creation page H5 Development page </div> --> </div> </body>

A few notes

1. Add id = "divMain" to the previous div, and comment the content in the div.

2. Add a div id = "div_temp_items" display = "none"

3. Copy the comment content to the div (an object is enough), and enter the data with {attribute name. This operation is mainly used to fill the html template with two common methods.

Let's take a look at the results. A simple query is complete ~

 

2. Editing

First, let's take a look at the page. There are two switches to change the status.

 

To change these two statuses, you must first obtain the values of these two statuses when entering the page to bind the switch. And use js for value. First look at the json obtained after the request

EnableCourse is the value displayed for the course, and EnableInfo is the value displayed for the document. After ajax requests are obtained, how can we use js to obtain values?

<Script type = "text/javascript"> var UserId = GetQueryString ("UserId"); ajaxForJson ("/user/userInfo. aspx "," myInfo ", {" UserId ": UserId}); var EnableCourse = 1; // course display status var EnableInfo = 1; // information display status // function wangjifengHandler_key (key, item) {if (key = "EnableCourse") {EnableCourse = item [key];} else if (key = "EnableInfo") {EnableInfo = item [key] ;}</script>

WangjifengHandler_key is a value method that has been compiled for common methods. Therefore, you can directly call the value in the key-value format, so that you can easily use the common method to retrieve and store the value you want, easy to operate.

Let's take a look at a common method named wangjifengHandler (). After the data is retrieved and filled into the html template, the method is called and bound. At this time, we can use it in html to perform various addition, deletion, and modification operations,This method is executed after each request is submitted.

// Callback function. After the template is filled, the function wangjifengHandler () {// is automatically called to bind the switch image 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");} // click events repeatedly by binding $ (". 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") {// course display type = "setEnableCourse "; type_state = EnableCourse;} else {// data display type = "setEnableInfo"; type_state = EnableInfo;} // set the course display and data display Status $. post (myConfigHost + "/user/userInfo. aspx ", {" op ": type," jsonData ": encodeURIComponent (JSON. stringify ({"UserId": UserId, "EnableState": type_state})}, function (data) {var dataObj = eval ("(" + data + ")"); // convert to json object 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 );}});}

The preceding code can be ignored ~ The preceding wangjifengHandler_key () method is used to obtain the expected values, and then post the values in wangjifengHandler () to the interface for modification, and then bind the page according to the interface response status.

The deletion is exactly the same as this. You can use wangjifengHandler_key () to get the value you need, submit it in post in wangjifengHandler (), and reload the page after the operation.

 

Due to not much time, the article is a bit messy ~ Understanding. It is mainly to understand two general methods, which will be very convenient to call later.