1. 程式人生 > >JavaScript 用ajax傳遞引數到後臺

JavaScript 用ajax傳遞引數到後臺

用ajax傳遞引數時,會經常出現後臺接受不到引數的情況,解決如下

前端:

  <script type="text/javascript">
    var validateNum;
    function validateButton() {
        if (validateNum!=null){
                if (document.getElementById("validateNum").value==validateNum){
                    var c=document.getElementById('submit');
                    c.type='submit';
                }else {
                    alert("不對");
                }
            }
    }
    function success(text) {
        validateNum=text;
    }
    function fail(code) {
        var input = document.getElementById('test-response-text');
        alert(code);
    }
    function startRequst1(){
        var request = new XMLHttpRequest(); // 新建XMLHttpRequest物件
        request.onreadystatechange = function () { // 狀態發生變化時,函式被回撥
            if (request.readyState === 4) { // 成功完成
                // 判斷響應結果:
                if (request.status === 200) {
                    // 成功,通過responseText拿到響應的文字:
                    alert(request.responseText);
                    return success(request.responseText);
                } else {
                    // 失敗,根據響應碼判斷失敗原因:
                    return fail(request.status);
                }
            } else {
                // HTTP請求還在繼續...
            }
        };
        // 傳送請求:
        var phoneNumber=document.getElementById("phoneNumber").value;
        request.open('POST', '/blog/sendValidateMsg',true);
        request.setRequestHeader("Content-type", "application/json; charset=utf-8");
        request.send(phoneNumber);//傳遞單個引數
    }
</script>
<body>

<div class="body-mid-form">
            <form action="/blog/register1" method="post">
                <input type="text"   placeholder="請輸入手機號碼" id="phoneNumber" name="phoneNumber"/>
                <br/>
                <input type="text" placeholder="請出入驗證碼" id="validateNum"/>
                <input type="button" value="點選獲取驗證碼" onclick="startRequst1();"/>
                <br/>
                <input type="text" placeholder="請輸入密碼" id="password" name="password"/>
                <br/>
                <input type="button" value="註冊" id="submit" onclick="validateButton()"/>
            </form>
</div>
</body>
</html>

後臺獲取ajax傳遞來的引數:

        @ResponseBody
	@RequestMapping("/blog/sendValidateMsg")
	public String  sendValidateMsg(HttpServletRequest req){
		//ajax傳遞過來的引數 的讀取
		StringBuilder sb = new StringBuilder();
		try {
			BufferedReader reader = req.getReader();
			char[]buff = new char[1024];
			int len;
			while((len = reader.read(buff)) != -1) {
				sb.append(buff,0, len);
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
		return sb.toString();//這便是傳遞過來的值

	}

當用ajax傳遞多個值時:

request.send(JSON.stringify({ "phoneNumber": "1123546", "name": "Lucy" }));

後臺接收:

                 StringBuilder sb = new StringBuilder();
                 try {
			BufferedReader reader = req.getReader();
			char[]buff = new char[1024];
			int len;
			while((len = reader.read(buff)) != -1) {
				sb.append(buff,0, len);
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
		String str=sb.toString();
		JSONObject jsonObject=new JSONObject(str);
		String  phoneNumber=jsonObject.getString("phoneNumber");          
                String  name=jsonObject.getString("name"); 
                //含有特殊字元的文字需要先進行轉碼
               URLDecoder.decode(jsonObject.getString("text"), "UTF-8"));