最近用到的几种前后端交互方式

       后端用的是Mybatis框架,前端的话由于是基于Ionic框架开发,所以大多都是通过Ionic的组件进行前后端交互 ,另外还涉及到一些地图功能用到ArcGIS JS API ,必然就会用到dojo的一些东西,尤其是向ArcGIS Server请求服务时。

1.dojo

1.1 "dojo/_base/xhr"

XmlHttpRequest,这个就是类似于ajax的东西,其实对这个没啥理解,上代码。

var content = {"layerAlias": 'road'};
var contextPath = "http://localhost:8080/test" 
			xhr.post({
				url :  contextPath+"/getData/showfields",//后台请求地址
				handleAs : 'json',
				content:content,//参数
				load : lang.hitch(this, function(response){
					this.function123(response);//回调函数
				}),
				error : function(response, ioArgs) {
				}
			});

1.2 "dojo/request"

request(this.contextPath + 'getDatas/getFields',{
	handleAs:'json',
}).then(function(response){
	console.log(response);
});

2.Ionic

Ionic向后台请求的话,先从当前Page页面调用Provider里面的Service(要声明为NgModule才可以在Page中引用),然后通过service向后台请求。

Page页面的请求:

getFieldsCol() {
    this.fieldQueryService.getFields(
      this.layerAlias
      ).subscribe(
      pageResult => {
        this.fieldsColumn = [];
        for(let item of pageResult){
          let obj = {name:'' , prop:''};
          obj.name = item.aliasName;
          obj.prop = item.fieldName;
          this.fieldsColumn.push(obj);
        }
      },
      error => {
        this.commonConfig.handleErrorView("错误", error);
      }
    )
  }

Provider向后端发送请求:

getFields(keyWord: string): Observable<Array<FieldName>>{
    let method = "/getFields";
    let params: URLSearchParams = new URLSearchParams();
    let options = { headers: this.headers };
    params.set("layerAlias", keyWord)
    let url = this.baseUrl + method;
    this.headers = this.conf.getDefaultAjaxHeaders();
    options = Object.assign(options, { search: params });
    return this.http.get(url, options)
        .map(res => {
          let result = res.json();//转换为json数据
          if (!!result) {
            return result;
          }
        })
        .catch(this.conf.handleErrorService);
  }
  

猜你喜欢

转载自blog.csdn.net/wml00000/article/details/83107729