ajax简单例子(需要springboot框架maven项目构建)
发布时间:2020-12-16 03:10:07 所属栏目:百科 来源:网络整理
导读:最近在做springboot学习,相关的项目建立步骤可以看这个链接 https://www.cnblogs.com/junyang/p/8151802.html 这边建立好的项目结构是这样的: 这里就是记录一下自己写的一个小例子来巩固基础的ajax学习。 首先先引入相关的JS,ajax需要引入jqurey,那就引
最近在做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; } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读