小程序请求后端接口实例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

小程序wxml页面button 按钮
<view>
    <button bindtap="change">点击</button> //change 为js函数名
</view>

小程序js页面函数
Page({

  change: function(event){
    wx.request({
      url: 'http://localhost:80/services/login/username',  //如果不设置method 则默认get请求地址
　　　 method: 'post',
      data: {
  　　　　　　//可携带参数   
　　　　　　　　},

      header: {
        'content-type': 'application/json' // 默认值
      },
  
      success: function(res) {
        console.log(res.data)  //res.data  为接口返回值
      },
    })
  }

    
})


springboot后端接口：
    
@RestController
@RequestMapping("/login")
public class loginController {

    @RequestMapping(value = "/username",method = RequestMethod.POST)
    public String login(HttpServletRequest request){
        System.out.println(request.getParameter("userName"));
        return "请求成功";
    }
}

//spring后端接口以及接收参数的方式
@Component
@Scope("prototype")
@Path("/medical")
public class MedicalRecordAction {

    @POST
    @Path("/login")
    @Produces(value = MediaType.TEXT_PLAIN)
    public String login(@FormParam(value = "requestJson") String   requestJson){  
        return medicalInsertService.login(requestJson);

}    


　　　　
　　　　//小程序前端请求方式以及请求参数
　　　　　　wx.request({
              url: app.globalData.webServiceUrl+'/medical/login',
              method: 'post',
              data: {
                requestJson:"{'accountid':\""+app.globalData.accountid+"\",}",
              },
              header: {'content-type': 'application/x-www-form-urlencoded' },
              success:function(res){
                
                if(res.data.code == 0){
                  for (let index in res.data.responseData) {
                    //获取userid并配置全局userid
                    app.globalData.userid = res.data.responseData[index].userid
                  }               
                
                }else{
                  wx.showToast({
                    title: res.data.responseData,
                    icon: "none",
                  })
                }

              }
            })