springMVC学习记录——处理ajax请求

阳光穿透心脏的1/2处 2022-05-07 23:56 194阅读 0赞

### 1、使用response输出请求处理数据，响应请求： ###

控制器中的处理方法：

@RequestMapping(value="getValue3.action")
    public void getValue3(LsjmUser user, HttpServletResponse response)
    {
            // 设置reponse编码和响应头编码格式， 防止中文乱码
            response.setCharacterEncoding("utf-8");
    	response.setContentType("text/html;charset=utf-8");
    	// 可以自己组装json字符串, 也可以用fastjson转换
            Map<String,String> result = new HashMap<String, String>();
    	result.put("result", "成功");
    	String resultStr = JSON.toJSONString(result);
    	//String resultStr = "{\"result\":\"chaol\"}";
    	PrintWriter pw = null;
    	try {
    		pw = response.getWriter();
    		pw.write(resultStr);
    		pw.flush();
    	} catch (Exception e) {
    		e.printStackTrace();
    	} finally{
    		pw.close();
    	}
    }

前台页面及 js 代码（首先记得要引入jquery）：

<form method="post" id="myform">
    	<input type="text" id="uname" name="uname" />
    	<input type="text" id="pwd" name="pwd" />
    	<input type="submit" value="提交" />
    </form>
    
    <script>
    	$(document).ready(function(){
    		var unameInput = $("#uname");
                    // input元素失去焦点后触发
    		unameInput.blur(function(){
    			//console.info(unameInput.val())
    			$.ajax({
    				url:"user/getValue3.action",
    				type:"post",
    				data:{"uname":unameInput.val()},
    				datatype:"json",
    				success:function(data){
    					console.info("success");	
    					console.info(JSON.parse(data).result);  //成功
    				},
    				error:function(){
    					console.info("error")
    				}
    			})
    		})
    	})
    </script>

## ##

### 2、springMVC中对ajax的支持 ###

使用 @ResponseBody将方法的返回类型 Map 或者 List 转换成一个Json对象返回给用户界面

**前提条件：导入三个jar：**

<dependency>
    	<groupId>com.fasterxml.jackson.core</groupId>
    	<artifactId>jackson-core</artifactId>
    	<version>2.6.0</version>
    </dependency>
    <dependency>
    	<groupId>com.fasterxml.jackson.core</groupId>
    	<artifactId>jackson-annotations</artifactId>
    	<version>2.6.0</version>
    </dependency>
    <dependency>
    	<groupId>com.fasterxml.jackson.core</groupId>
    	<artifactId>jackson-databind</artifactId>
    	<version>2.6.0</version>
    </dependency>

控制器中的处理方法：

@ResponseBody  //将Map、List转换成Json对象返回
    @RequestMapping(value="ajaxDemo.action")
    public Map<String, String> ajaxDemo(LsjmUser user)
    {
    	// 可处理中文乱码问题
            Map<String, String> result = new HashMap<String, String>();
    	result.put("result", "成功");
    	result.put("uname", user.getUname());
    	return result;
    }

前台页面及 js 代码（首先记得要引入jquery）：

<form method="post" id="myform">
    	<input type="text" id="uname" name="uname" />
    	<input type="text" id="pwd" name="pwd" />
    	<input type="button" value="提交" onclick="commit()" />
    </form>
    
    <script>
    	function commit(){
    			$.ajax({
    				url:"user/ajaxDemo.action",
    				type:"post",
    				data:{"uname":$("#uname").val(), "pwd": $("pwd").val()},
    				datatype:"json",
    				success:function(data){
    					console.info(JSON.stringify(data));  //{"result":"成功","uname":"chaol"}
    				},
    				error:function(){
    					console.info("error")
    				}
    			})
    		}
    </script>