Spring 使用 ajax

最新推荐文章于 2021-09-05 17:38:22 发布

bestcxx

最新推荐文章于 2021-09-05 17:38:22 发布

阅读量537

点赞数 1

如果我们不尊重权威,源码看起来也没有什么借鉴意义,如果我们完全的信服权威,那么源码中未发现的bug就天然的被忽略了

本文链接：https://blog.csdn.net/bestcxx/article/details/77990124

版权

Spring 大杂烩同时被 3 个专栏收录

27 篇文章 1 订阅

订阅专栏

Spring MVC

11 篇文章 0 订阅

订阅专栏

Ajax

5 篇文章 1 订阅

订阅专栏

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

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

请参考 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

/**
 * 处理首页的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部分

@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>