Using Hbuilder to develop mobile App:ajax calling interface data

Since you want to do the app, interact with the interface, unless you just want to do a pure static app. So when the html5+ environment was ready, the first thing I started to look at was how to interact with the interface.

After using Hbuilder to create a new sample tutorial, there will be an example of Ajax (network request), the file directory is examples/ajax.html. Looking at the code of this file, its function is to click the "Submit" button to submit parameters to the interface, and then according to the selected return data format, a string of characters printed out. I'm going to change this code to call the list interface when the page loads and display the list in the app, which should be used often.

1. Add a link to this section of the list in list.html

class="mui-table-view-cell mui-plus-visible"><a class="mui-navigate-right" href="examples/ajaxlist.html">ajax加载接口列表数据</a></li>

2. Create a new file in the examples directory ajaxlist.html

3. In this file, first write the HTML frame of the display list. That's what I wrote.

<div id="records_count">//显示接口列表里的记录总数</div><table id="list" border="1" width="100%" style="padding: 5px 10px;text-align: center;" >//显示列表数据</table>

4. Code section JS code for the AJAX call interface when the page is loaded

var network = true;if(mui.os.plus){mui.plusReady(function () {if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){network = false;} else { //调用接口数据的入口方法getList();}});}

Where GetList is the entry method that invokes the interface data. Here's how to write the GetList method

var ajax =function//using Askh5 Demo interface data var url = //send data, casually fill, anyway the data returned is that kind var data = {Name:  "askh5.com", Author:  "best HTML5 community ..."};respnoseel.innerhtml =  ' in request ... '; $.post ( URL, data, success, //when loading the interface data, loading the list function Span class= "Hljs-title" >getlist () { if (Network) {Ajax ();} else{mui.toast ( "current network does not give force, please try again later")}}     

The interface in this call is seen in Askh5 's angularjs introductory tutorial, a demo of JSON data.

$.post (URL, data, success, ' JSON ');

The success in this code snippet above is the callback method for the Post method, and the following is a success method to process the returned data

var Respnoseel =document.getElementById ("Records_count");var list =document.getElementById ("List");callback function for successful responsevar success =functionResponse) {var str =Json.stringify (response);Console.log (str);str = json.stringify (response); respnoseel.innerhtml ="Total record:" + response.count; list.innerhtml ="<tr class= ' title ' ><td> field 1</td><td> field 2</td></tr>"; Mui.each (response.records ,functionkey, Elem) {console.log ( "Elem.name:" + elem. Name); var li = document.createelement ( "TR"); //li.setattribute ("id", key); var col1 = document.createelement (  "TD") Col1.classname =  "col1" col1.innerhtml = Elem. Name; Li.appendchild (col1); var col2 = document.createelement (  "TD") Col2.classname =  "col2" col2.innerhtml = Elem. Club;li.appendchild (col2); List.appendchild (li);}); console.log ( "list" + list.innerhtml);    

A good lump of code to generate a list, if you use Angularjs will be a lot less code ...
The final result is:

Using Hbuilder to develop mobile App:ajax calling interface data