ajax简单例子需要springboot框架maven项目构建

最近在做springboot学习，相关的项目建立步骤可以看这个链接

https://www.cnblogs.com/junyang/p/8151802.html

这边建立好的项目结构是这样的：

这里就是记录一下自己写的一个小例子来巩固基础的ajax学习。

首先先引入相关的JS，ajax需要引入jqurey，那就引入你的项目中，一般在static下，放哪看个人喜欢：

开始贴代码前先排个坑，之前js死活引用不上，总是提示404，所以需要自己加映射，写在WebConfig里：

@Configuration
@EnableWebMvc
@ComponentScan
public class WebConfig extends WebMvcConfigurerAdapter implements ApplicationContextAware{
	private ApplicationContext applicationContext;

    public WebConfig(){
        super();
    }

    @Override
    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
        this.applicationContext = applicationContext;
    } 
	@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations(ResourceUtils.CLAsspATH_URL_PREFIX+"/static/");
        registry.addResourceHandler("/templates/**").addResourceLocations(ResourceUtils.CLAsspATH_URL_PREFIX+"/templates/");
        super.addResourceHandlers(registry);  
    }

}

好了，接下来就是写html和controller了。

我这里叫testFile.html，在body里加上：

<div style = "margin-left: 50px; margin-right: 50px;  margin-top:50px ;">
<input id = "text1" type = "text"/>
<input id = "button1" type="button" value="点击判断用户名是否可用" onClick = "testGetUserShow()"></input>
<font style = "margin-left:10px; color:#F66; " >*用户名不能使用含有数字1或2或3</font>
<br></br><br></br>
<span id="ts"></span>
</div>

<script th:src="@{/static/js/bootstrap4/js/jquery-1.12.4.js}"></script>
 <script type="text/javascript">
/*<![CDATA[ */
function testGetUserShow(){
	var inputValue = document.getElementById("text1").value;
	var ffmap = {};
	ffmap.inputValue = inputValue;
	 $.ajax({
		type:"post",url:"/test/testUser",data:inputValue,dataType:"TEXT",success:function(data){
			if(data.trim() == "OK")  {
				//trim()方法会去掉页面中的冗余空格
			    $("#ts").html("该用户名可用");
			}else{
				if(data.trim == "ERROR"){
					alert("出错啦，请稍后重试");
					return;
				}
				$("#ts").html("该用户名不可用因为包含了数字 - "+data);
			}
			/* if(d.ok != undefined){
				alert(d.ok);
				document.getElementById("demo2").innerHTML = d.returnValue; 
			}else{
				alert(d.error);
			} */
		}
	}); 
}
/*]]>*/</script>

Controller:

@Controller
@RequestMapping("/test")
public class testController {
protected final static Logger logger = LoggerFactory.getLogger(testController.class);
@GetMapping("/testFile")
  public String testFile() {
    return "/ceshi/testFile";
  }

@RequestMapping("/testUser")
@ResponseBody
  public String testUser(@RequestBody String m) {
String textContains = "";
try {
if(m.contains("1")) {
textContains += "1 ";
String[] s1 = m.split("1");
textContains += formatContains(s1,"1");
}else if(m.contains("2")) {
textContains += "2 ";
String[] s2 = m.split("2");
textContains += formatContains(s2,"2");
}else if(m.contains("3")) {
textContains += "3 ";
}else {
textContains = "OK";
}
}catch(Exception e) {
e.printstacktrace();
logger.info(e.getMessage());
textContains = "ERROR";
}
return textContains;
  }

private String formatContains(String[] strings,String num) {
// Todo Auto-generated method stub
String containString = "";
if(strings.length == 0) {
return containString;
}else{
switch(num) {
case "1":
boolean isHaveTwo = false;
boolean isHaveThree = false;
for(int i = 0;i<strings.length;i++) {
if(strings[i].contains("2") && !isHaveTwo) {
containString += "2 ";
isHaveTwo = true;
}
if(strings[i].contains("3") && !isHaveThree) {
containString += "3 ";
isHaveThree = true;
}
if(isHaveTwo && isHaveThree) {
//有2有3，直接完成
break;
}else {
//其他情况继续寻
continue;
}

}
break;
case "2":
for(int i = 0;i<strings.length;i++) {
if(strings[i].contains("3")) {
containString += "3 ";
String[] s3 = strings[i].split("3");
break;
}
}
break;
  default:
  break;
}
}
return containString;
}
}