NEJ & Spring MVC 前后端数据交互

下面分别介绍了NEJ使用GET方式下的请求和POST传对象、对象组、数组、单个参数传的方法。

---

GET方式：

假设后台接口是这样接受参数的

@RequestMapping(value = "/searchinnercat", method = RequestMethod.GET)
    @ResponseBody
    public JsonResponse innerCat(
        @RequestParam(value="page", required=false, defaultValue="1")int page,
        @RequestParam(value="name", required=false, defaultValue="")String name,
        @RequestParam(value="partner_id")long partnerId) {

        JsonResponse jsonResponse = new JsonResponse();
        Map<String, Object> data = new HashMap<String, Object>();

        return jsonResponse.setSuccessful().setData(data);
    }

通用写法的请求:

 _pro.__listContent = function(data){
        var _data = {};
        _data.partner_id = 1;

        _j._$request('/brand/searchinnercat.json',{
            method:'GET',
            type:'json',
            query:_ut._$object2query(_data),
            timeout:1000,
            onload:function(_cdata){
                if(_cdata.code === 0){
                    this.__content.innerHTML = JSON.stringify(_cdata.data);
                }else{   //
                    alert(' 出错！')
                    return;
                }
            }._$bind(this)
        })
    };

另一种简便的写法如下:

    _pro.__initClassifies = function(_index){
        var _wrap = this.__list;
        _j._$request('/getcategory?categoryType=1&page='+_index,{
             method:'GET',
             type:'json',
             onload:function(_cdata){
                _wrap.innerHTML = _jt._$get('jst-template-1',{data:_cdata});
                this.__onPage();
                this.__rewriteClassify();
             }._$bind(this)
        });
    };

---

POST方式：

• 传对象

  假设后台接口如下：

@RequestMapping(value = "/addinnercat", method = RequestMethod.POST) //method可有可无
@ResponseBody
public JsonResponse addInnerCat(@RequestBody PartnerInnerCat pic) { //不加@RequestBody接受的会是一个空对象
        JsonResponse jsonResponse = new JsonResponse();

        System.out.println("finally~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~" + pic.toString());

        return jsonResponse.setSuccessful().setData(1);             
    }

那么前端nej对应的传值如下：

 _pro.__onAdd = function(_event){
        _v._$stop(_event);

        var _data = {};
        _data.name = "test";
        _data.description = "test";
        _data.weight = 2;
        _data.partnerId = 2;
        _data.type = 2;

        console.log(_data);
        _j._$request('/brand/addinnercat.json',{
            method:'POST',
            type:'json',
            data:JSON.stringify(_data),
            headers:{'Content-Type':'application/json'}, //少了这个报 415 错误"Request Method Not Support Method 'GET' "
            onload:function(_cdata){
                if(_cdata.code === 0){
                    this.__listContent();
                }else{   //填写出错，弹出出错信息
                    alert('出错！')
                    return;
                }
            }._$bind(this)
        })
    };

• 传Json字符串化的对象组

  假设后台接口接手如下：

@RequestMapping(value = "/savepartnercatsmanage", method = RequestMethod.POST)
@ResponseBody
public JsonResponse savePartnerCatsManage(@RequestBody String partnerCatsJson) { //不加注解 传过来为null
        JsonResponse jsonResponse = new JsonResponse();

        return jsonResponse;
    }

相应nej写法：

_pro.__onUpdate = function(_event){
        _v._$stop(_event);

        var _data = [];
        var _item = {};
        for(var i = 0; i < 2; i++) {
            _item.id = i;
            _item.productId = i;
            _item.skuId = i;
            _item.buyCount = i;
            _data.push(JSON.stringify(_item));
        }

        _j._$request('/brand/savepartnercatsmanage',{
            method:'POST',
            type:'json',
            data: "[" + _data + "]",  //[{"id":0,"productId":0,"skuId":0,"buyCount":0},{"id":1,"productId":1,"skuId":1,"buyCount":1}]
            timeout:1000,
            headers:{'Content-Type':'text/plain'},
            onload:function(_cdata){
                if(_cdata.code === 0){
                    this.__listContent();
                }else{  
                    return;
                }
            }._$bind(this)
        })
    };

• 传对应单个参数

@RequestMapping(value = "/updatepartnercategory", method = RequestMethod.POST)
@ResponseBody
public JsonResponse updatePartnerCategory(@RequestParam(value="category_id")Long categoryId, @RequestParam(value="partner_id")Long partnerId) {

        JsonResponse jsonResponse = new JsonResponse();

        ResultCode code = partnerCategoryServiceImpl.updatePartnerCategory(categoryId, partnerId);
        return jsonResponse.setSuccessful().setData(code); 
    }

_pro.__onAddParam = function(_event){
        _v._$stopDefault(_event);
        var _data = {};
        _data.category_id = 1;
        _data.partner_id = 1;

        _j._$request('/brand/updatepartnercategory.json',{   //有时候会报404错误，这并不是ajax传输错误，而是后台报错了
            method:'POST',
            type:'json',
            data:_ut._$object2query(_data),
            timeout:1000,
            onload:function(_cdata) {
                if(_cdata.code == 0) {
                }
                else {
                }
            }._$bind(this)
        })
    };

• 传数组

@RequestMapping(value="/rmpartnercats", method=RequestMethod.POST)
@ResponseBody
public JsonResponse removePartnerCats(@RequestParam(value="ids")Long[] ids) {
        JsonResponse jsonResponse = new JsonResponse();

        ResultCode code = pACategoryServiceImpl.removePartnerCats(ids);

        return jsonResponse.setSuccessful().setData(code.getIntValue());
    }

_pro.__onDelArray = function(_event){
        var productIds = [];
        productIds.push(1);
        productIds.push(2);

        _j._$request('/brand/rmpartnercats.json',{
            method:'POST',
            type:'json',
            data:"ids="+productIds,
            onload:function(_cdata){
                this.__content.innerHTML = JSON.stringify(_cdata);
            }._$bind(this)
        })
    };