WeChat applet request details

This chapter describes the data interaction of small programs, wx. request method. The request initiates an https request. if your server is an http site, you need to configure it. Refer to the article: http to https tutorial. if you do not have a server and want to learn about applets, you can call my interfaces. The article will detail how to use them. Talk about the data interaction of applets --- wx. request

The official documentation clearly states that wx. request initiates an https request. if your server is an http site, you need to configure it. Refer to the article: http to https tutorial

However, if you do not have a server or do not want to write background code, you can call the interface I provide here. this article will introduce how to use it.

First, we should start preparing from the server. I use java. The framework is spring + springMVC + spring data.

Controller layer for interface https://www.itit123.cn/itdragon/findAll

Source code:

@RequestMapping(value="findAll")@ResponseBodypublic Object listWxDatas(@RequestParam(value = "page", defaultValue = "1") int pageNumber,@RequestParam(value = "pageSize", defaultValue = PAGE_SIZE) int pageSize,@RequestParam(value = "sortType", defaultValue = "auto") String sortType, ServletRequest request){pageSize = pageSize > 10? 10 : pageSize;        try {Map
 
   searchParams = Servlets.getParametersStartingWith(request, "search_");Page
  
    WxDatas = wxDataService.getWxData(searchParams, pageNumber, pageSize, sortType);List
   
    > resultList = new ArrayList
    
     >();for (WxData WxData : WxDatas) {Map
     
       resultMap = new HashMap
      
       ();resultMap.put("id", WxData.getId());resultMap.put("title", WxData.getTitle());resultMap.put("content", WxData.getContent());resultMap.put("src", WxData.getImageUrl());resultMap.put("time", WxData.getCreatedDate());resultList.add(resultMap);}return gson.toJson(resultList); } catch (Exception e) {e.printStackTrace();} return null;}
      
     
    
   
  
 

The general logic of the code is to query up to 10 data records at a time and output the results in descending order of IDs. The code does not place the entire object in a collection. Instead, it places the required content (id, article title, pre-read content, main graph, and creation time) in a map, convert the data into json format in the put collection to return data. (Note: This code is only applicable to the current requirements (data query). The code may be modified after the pull-down refresh, pull-up, and load operations are performed. Paging query: step 5. slide the loading drop-down and refresh ).

After the server interface code is ready, do not rush to launch the test. you can use the google browser postman.

Then, prepare a test page for data interaction on the applet.

Test. wxml:

     
  </view>
  request
 

Test. js:

Page ({data: {textdata: "Test wx. request ",}, RequestData: function () {var that = this; wx. request ({url: 'https: // www.itit123.cn/itdragon/findAll', data: {}, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header :{}, // Set the request header to application/json success: function (res) by default {// operate json data var text = ""; for (var I in res. data) {text + = I + ". "+ res. data [I]. title + "\ r \ n";} that. setData ({textdata: text});}, fail: function () {// fail}, complete: function () {// complete})}, onLoad: function (options) {// parameters brought about by page navigation by page initialization options}, onReady: function () {// page rendering completed}, onShow: function () {// page display}, onHide: function () {// page hidden}, onUnload: function () {// page closed }})

Test page:

If the test is normal, modify the code in list. js.

You can modify it as needed. (I just changed func to ajax)

// Pages/list. jsvar app = getApp (); Page ({data: {msgList: []}, onLoad: function (options) {// The parameter var that = this app brought about by page initialization options for page jump. ajax. req ('/itdragon/findall', {}, function (res) {that. setData ({msgList: res}) ;}, onReady: function () {// page rendering completed}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closing }})

Because the returned data structure is exactly the format I need, the value is assigned directly.

:

This chapter focuses on:

1. wx. request official documentation.

2. how to assign var that = this; that. setData ({variable name: variable value}) to a variable }).

3. development ideas.

The above is a detailed description of the small program request. For more information, see other related articles in the first PHP community!