ionic混合APP开发后台交互

(tap) 用手指点 一般作用域不是button的元素的点击事件的绑定，绑定click事件不会生效

【一】ionic与后台交互（ajax）

submitQuestion() {
    $.ajax({
      url: 'http://114.55.94.26:50888/mno/restful/respool_info/vipstatistics',
      type: 'POST',
      data: {"name": "uname", "age": 18},
      dataType: 'json',
      success: function (res) {
        console.log(res)
      }

    })
  }

【二】ionic与后台交互（get）

• 后台交互文件

  login(mobile, password): Observable<string[]> {
    return this.getUrlReturn(this.apiUrlLogin + '?mobile' + mobile + "&password" + password);
  }

  /**
 * 全局获取HTTP请求的方法
 * 
 * @private
 * @param {(Response | any)} error 
 * @returns 
 * @memberof RestProvider
   */
  private getUrlReturn(url: string): Observable<string[]> {
    return this.http.get(url)
      .map(this.extractData)
      .catch(this.handleError)
  }

  /**
 * 处理接口返回数据，处理成json格式
 * 
 * @private
 * @param {Response} res 
 * @returns 
 * @memberof RestProvider
   */
  private extractData(res: Response) {
    let body = res.json();
    return JSON.parse(body) || {};
  }

  /**
 * 处理请求中的错误，考虑了各种情况的错误处理并在console中显示error
 * 
 * @private
 * @param {(Response | any)} error 
 * @returns 
 * @memberof RestProvider
   */
  private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`
    } else {
      errMsg = error.message ? error.message : error.toString()
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
}

• 使用文件

login() {
    let loading = super.showLoading(this.loadingCtrl, '登录中...')
    this.rest.login(this.mobile, this.password)
      .subscribe(
        f => {
          if (f["status"] == "OK") {
            // 处理登录成功的页面跳转
            // 存储接口返回的token
            this.storage.set('UserId', f['userId']);    //存储功能，把f['userId']存到UserId中
            loading.dismiss();    //登录进度隐藏 
            this.dismiss;
          } else {
            loading.dismiss();
            super.showToast(this.toastCtrl, f["StatusContent"]);
          }
        },
        error => this.errorMessage = <any>error);
  }

【三】ionic与后台交互（post）

• 后台交互文件

  login(mobile, password): Observable<string[]> {
    let pramas = JSON.stringify({ 'mobile': mobile, 'password': password })

    // return this.getUrlReturn(this.apiUrlLogin + '?mobile' + mobile + "&password" + password);
    return this.http.post(this.apiUrlLogin, pramas)
    .map(this.extractData)
    .catch(this.handleError)
  }

  /**
   * 处理接口返回数据，处理成json格式
   * 
   * @private
   * @param {Response} res 
   * @returns 
   * @memberof RestProvider
   */
  private extractData(res: Response) {
    let body = res.json();
    return JSON.parse(body) || {};
  }

  /**
   * 处理请求中的错误，考虑了各种情况的错误处理并在console中显示error
   * 
   * @private
   * @param {(Response | any)} error 
   * @returns 
   * @memberof RestProvider
   */
  private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`
    } else {
      errMsg = error.message ? error.message : error.toString()
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

• 使用文件

login() {
    let loading = super.showLoading(this.loadingCtrl, '登录中...')
    let pramas = {mobile:this.mobile, password:this.password}
    this.rest.login(this.mobile, this.password)
      .subscribe(
        f => {
          if (f["status"] == "OK") {
            // 处理登录成功的页面跳转
            // 存储接口返回的token
            this.storage.set('UserId', f['userId']);    //存储功能，把f['userId']存到UserId中
            loading.dismiss();    //登录进度隐藏 
            this.dismiss;
          } else {
            loading.dismiss();
            super.showToast(this.toastCtrl, f["StatusContent"]);
          }
        },
        error => this.errorMessage = <any>error);
  }