1. 程式人生 > >ajax json 前後臺互動 示例

ajax json 前後臺互動 示例

java前後臺引數的接收方式 一般的ajax請求,一般封裝為map或者dto,後臺比較方便接收,下面是封裝為map

function submitEditData(value) {
		var valuemap ={rateRuleDatas:value};
		var rateRuleDatas = JSON.stringify(valuemap);
		
		$.ajax({
			url : 'compilingRule/compilingRuleUpdate.do',//只能是string型別的引數,開頭可以有"/",也可以沒有
			type : 'post', //預設是get,後臺可以用@GegMapping獲取@RequestMapping接,也put、delete,但一些瀏覽器不支援
			async : false,//預設是true,非同步請求,會卡住瀏覽器,使用時視情況而定
			cache : true, //預設是true,下次請求時,從瀏覽器快取中載入請求資訊,dataType為script時,預設為fasle
			dataType : "json",
					//伺服器的返回型別。JQuery將自動根據http包mime資訊返回responseXML或responseText,並作為回撥函式引數傳遞。可用的型別如下:
					xml:返回XML文件,可用JQuery處理。html:返回純文字HTML資訊;包含的script標籤會在插入DOM時執行。
					script:返回純文字JavaScript程式碼。不會自動快取結果。
					json:返回JSON資料。
					jsonp:JSONP格式。使用SONP形式呼叫函式時,例如myurl?callback=?,JQuery將自動替換後一個“?”為正確的函式名,以執行回撥函式。
					text:返回純文字字串。
			contentType : "application/json", //傳送到伺服器的資料格式,編碼型別預設為"application/x-www-form-urlencoded",適用於大多數情況。
			data : rateRuleDatas, //Object或string,若是contentType : "application/json",那資料就要JSON.stringify(datas)轉為json
			success : function(data) {
				if (data.code == 200) {
					$.messager.alert('提示', data.message, 'info');
					datas = [];
					columns = [];
					initTable();
				} else {
					$.messager.alert('提示', data.message, 'info');
				}
			}
			beforeSend : function() {
				$.messager.progress({
					title : '提示',
					msg : '資料儲存中,請稍候……',
					text : ''
				});
			},
			complete : function() {
				$.messager.progress('close');
			},
			error : function(e) {
				$.messager.alert('提示', "網路錯誤,請重試!!", "info");
			}
		});

	@PostMapping("/compilingRuleUpdate.do")
    @ApiOperation(value = "修改滿編率規則資料", notes = "修改滿編率規則資料")
    @ResponseBody
    public ResultInfo updateCompilingRateRule(@RequestBody Map<String,Object> rateRuleDatas) {
        List<Map<String, String>> objlist = (List<Map<String, String>>) rateRuleDatas.get("rateRuleDatas");
        String loginUM = getLoginUM();
        return compilingRuleService.updateCompilingRule(rateRuleDatas,loginUM);
    }
	
	當把js改為var rateRuleDatas = JSON.stringify(value)時,也可以用下面的方式接收,JSON來說net.sf.json.*;
	@PostMapping("/compilingRuleUpdate.do")
    @ApiOperation(value = "修改滿編率規則資料", notes = "修改滿編率規則資料")
    @ResponseBody
    public ResultInfo updateCompilingRateRule(@RequestBody String rateRuleDatas) {
        //String loginUM = getLoginUM();
        //return compilingRuleService.updateCompilingRule(rateRuleDatas,loginUM);
        JSONArray jarr = JSONArray.fromObject(rateRuleDatas);
        List<HashMap<String, String>> listmap = (List<HashMap<String, String>>) JSONArray.toCollection(jarr,HashMap.class);
        for (HashMap<String, String> hashMap : listmap) {
            for (Entry<String, String> entry : hashMap.entrySet()) {
                System.out.println(entry.getKey()+":"+entry.getValue());
            }
        }
        return null;
    }
	
2.檔案上傳的ajax請求,processData預設是true,把傳送請求的資料轉為物件。但是上傳檔案時用false,contentType上傳檔案時就不能是默認了。讓伺服器自己解析
	//js部分 檔案上傳
	function uploadDoc() {
		var form = new FormData();
		form.append("file",document.getElementById("commissionTargetFile").files[0]);
		$.ajax({
			url : 'theoryRateConfig/uploadTheortyExcel.do',
			type : "post",
			data : form,
			cache : false,
			processData : false,
			contentType : false,
			success : function(data) {
			}
	}
	
	//java 部分
	@PostMapping("uploadTheortyExcel.do")
	@ResponseBody
	public ResultInfo uploadTheortyExcel(HttpServletResponse httpResponse, HttpServletRequest httpRequest) {

        ResultInfo resultInfo = new ResultInfo();
        //預設上傳成功
        resultInfo.setCode(ResponseUtil.success_code);
        resultInfo.setMessage("檔案上傳成功");
        
        MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) httpRequest;
        List<MultipartFile> files = multiRequest.getFiles("file");
        MultipartFile file = files.get(0);
        return resultInfo;
	}

補充:url上get方法請求時,在java方法裡用RequestParam 來接

@RequestMapping(value = "hi", method = RequestMethod.GET)
@ResponseBody
 public String helloConsumer(@RequestParam String name)
 而在post請求時,用@RequestBody 來接
    @PostMapping("/bankRankConfig/updatePartyARankRato.do")
    @ResponseBody
    @ApiOperation(value = "修改甲方排名系數配置", notes = "修改甲方排名系數配置")
    public ResultInfo updatePartyARankRato(@RequestBody String ratioDtolist)