Spring 使用 ajax

谁借莪１个温暖的怀抱￠ 2022-06-08 04:59 119阅读 0赞

## 1、Spring 基础环境搭建（略） ##

## 2、完成Spring 自动转化json的配置 ##

请参考 [http://blog.csdn.net/bestcxx/article/details/77989356][http_blog.csdn.net_bestcxx_article_details_77989356]

## 3、Java部分 ##

import java.util.HashMap;
    
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController
    public class AjaxController {
    	
    	@ResponseBody
    	@PostMapping("ajaxCheckUserName")
    	public HashMap<String,Object> ajaxCheckUserName(){
    		HashMap<String,Object> map=new HashMap<String,Object>();
    		map.put("result", "YES");
    		map.put("msg", "只是一个默认测试访问");
    		return map;
    		
    	}
    	
    
    }

## 4、js部分-需要jquery.js和下面自定义的home.js ##

![20170915121004951][]

/**
     * 处理首页的js
     */
    $(function(){
    	$(".checkUserName").blur(function(){checkUserName(this)});
    });
    
    /*使用ajxa 方法后台访问该用户名是否已经注册*/
    function checkUserName(theid){
    	//data="&"+id+"="+value是ajax的本质模式,这里id是一个变量,比如 id="userName",等同于 data={userName:value}={'userName':value},二者 的区别是{}中的key不能为变量
    	//var data="&"+id+"="+value;
    	var data=gainJson(theid);
    
    	$.ajax({
    		url : "ajaxCheckUserName",// 请求地址
    		timeout : 600000,//超时时间设置，单位毫秒
    		async : true,// 异步
    		cache : false,// 缓存
    		type : 'post',// 请求方式
    		/*data: $('#formid').serialize(),//序列化表单*/			
    		data:data,						
    		dataType : 'json',// 服务器返回的数据类型
    		contentType:"application/x-www-form-urlencoded; charset=utf-8",
    		success : function(data) {// 请求成功后调用的
    			$(".col_msgspan").text(data.result+"~ "+data.msg);
    		},
    		
    		error :function(){
    			alert("异常");
    		}
    	});
    };
    
    //获取id和值的公共方法，返回json格式
    function gainJson(theid){
    	var id=$(theid).attr("id");
    	var value=$("#"+id+"").val();
    	var str="&"+id+"="+value;
    	return str;
    }

## 5、css部分 ##

![20170915121050737][]

@CHARSET "UTF-8";
    .col_msgspan{
    	color:white;
    	background-color:red;
    	width:100px;
    	height:10px;
    }

## 6、jsp 部分 ##

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>首页</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/home.js"></script>
    <link rel="stylesheet" type="text/css" href="css/home.css">
    </head>
    <body>
    	<h1>spring ajax测试</h1>
    	测试描述：在文本框中输入任意内容，鼠标离开后显示提示信息，当输入“123”时,提示数据尚不存在，其他字符提示数据已存在<br>
    	<br>
    	输入信息并移开鼠标：<input class="checkUserName" id="userName" name="userName" type="text">
    	<span class="col_msgspan"></span>
    </body>
    </html>

## 7、效果 ##

http://localhost:8085/fileup/

![20170915121308109][]

[http_blog.csdn.net_bestcxx_article_details_77989356]: http://blog.csdn.net/bestcxx/article/details/77989356
[20170915121004951]: /images/20220608/98901e2e6f144c148c6bc05ed7fc9ab5.png
[20170915121050737]: /images/20220608/346a0916857548fa940c26bcb9c9e537.png
[20170915121308109]: /images/20220608/a148f24002e147ce9bd6b3167f35efb5.png