SpringMVC——AJAX

前言

什么是AJAX利用AJAX可以做什么 简单使用

web.xmlapplicationContext.xmlAjaxControllerindex.jsp启动tomcat测试 测试数据异步加载

后端导入数据建立实体类建立动态页面 Ajax验证用户名体验

AjaxController登陆页面 问题

12 3

AJAX = Asynchronous Javascript and XML（异步的 Javascript 和 XML）

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

注册时，输入用户名自动检测用户是否已经存在。

登陆时，提示用户名密码错误

删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。

…等等

    
        springmvc
        org.springframework.web.servlet.DispatcherServlet
       
           contextConfigLocation
           classpath:applicationContext.xml
       
        1
    
    
        springmvc
        /
    

    
        encoding
        org.springframework.web.filter.CharacterEncodingFilter
        
            encoding
            utf-8
        
    
    
        encoding
        
                $.post("${pageContext.request.contextPath}/a2",function (data){
                    console.log(data);
                })
            })
        });

    




    <%--数据在后台--%>
    

    

        
姓名
        
年龄
        
性别
    
    

注意：我们在使用script的时候要逐步测试使用，不然后面会影响开发效率。
这里我们先测试一下，能不能拿到后端数据，拿到后端数据的方法就是写请求。
结果：

这里后台拿到了数据，接下来就可以把数据放入前端中。

数据放入前端中：用拼接的方式，把数据循环放入

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    




    <%--数据在后台--%>

    

    

        
姓名
        
年龄
        
性别
    
    

  @RequestMapping("a3")
    public String a3(String name,String pwd){
        String msg="";
        if(name!=null){
            //admin 这些数据应该在数据库中查
            if("admin".equals(name)){
                msg = "ok";
            }else {
                msg="用户名有误";
            }
        }
        if(pwd!=null){
            //123456 这些数据应该在数据库中查
            if("123456".equals(pwd)){
                msg = "ok";
            }else {
                msg="密码有误";
            }
        }
        return msg;
    }

login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    


 

     用户名：
     
 

 

     密码：
     
 

服务器报了500的错误，这种属于服务器代码错误。
这里我们把url写错了
正确的：

"${pageContext.request.contextPath}/a3"

不能把a3写进里面，不然会找不到方法。

后台没有数据
可能是因为没有导入jQuery

也可能是因为后端没有接收到数据，可以看响应

这里显示响应没有请求的数据。
解决：
很有可能是JSON乱码的问题，可以看我这篇文章
JSON乱码解决

也有可能是标签写错了

这里是通过标签获取相应的值的，如果标签错了，那么就拿不到前端的值，那么就是空。

如果是前端错误的话，修改完之后点击这个之后也可以成功修改，并且速度比较快

但是，如果是后端代码错误了，必须Restart server，重启服务器才可能修改成功。

因此，最稳妥的方式就是每次修改完重启服务器即可。