SpringMvc-ajax案例

ajax案例

参考文章：
https://blog.csdn.net/weixin_39925381/article/details/83352871

https://www.runoob.com/jquery/ajax-ajax.html

@ResponseBody详解
https://blog.csdn.net/originations/article/details/89492884

jquery下载方法：

下载官网链接：https://jquery.com/download/

步骤：

导入json格式依赖包:

        <!--json格式依赖包-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.9</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.9</version>
        </dependency>

springmvc-servlet.xml开启mvc注解的支持:

    <!--主要是打开springmvc框架对注解的支持：@service @Control-->
    <!--开启mvc注解的支持-->
    <mvc:annotation-driven>
        <mvc:message-converters><!--SpringMvc将对象转换成JSON格式的字符串输出-->
            <bean class="org.springframework.http.converter.StringHttpMessageConverter"></bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

springmvc-servlet.xml静态资源访问:

    <!--静态资源访问-->
    <mvc:resources location="/static/images/" mapping="/static/images/**"></mvc:resources>
    <mvc:resources location="/static/js/" mapping="/static//js/**"></mvc:resources>
    <mvc:resources location="/static/css/" mapping="/static/css/**"></mvc:resources>

UserController.java

   /**
     * Json讲解
     * @return
     * @ResponseBody的作用其实是将java对象转为json格式的数据。
     * @responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后，
     * 写入到response对象的body区，通常用来返回JSON数据或者是XML数据。
     *
     * @RequestBody是作用在形参列表上，用于将前台发送过来固定格式的数据【xml格式 或者 json等】封装为对应的 JavaBean 对象，
     * 封装时使用到的一个对象是系统默认配置的 HttpMessageConverter进行解析，然后封装到形参上。
     */
    @ResponseBody
    public String getJson(){
        return "testjson";
    }
    @RequestMapping("/getUser")
    @ResponseBody
    public User getUser(String uname,String upwd){
        //接收到用户和密码封装到User对象中
        User user=new User();
        user.setUname(uname);
        user.setUpwd(upwd);
        return user;//以json格式返回user对象
    }

index.jsp

<form id="getUser">
    用户名：<input type="text" id="uname" name="uname"/>
    密码：<input type="password" id="upwd" name="upwd"/>
    <input type="button" value="getUser" id="getUserBtn"/>
</form>

<p id="showUser"><%--显示用户信息--%>
</p>
<%--引入jQuery文件--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.min.js"></script>

<script type="text/javascript">//ajax异步请求
    $(function () {
        $("#getUserBtn").click(function () {
            /*var uname=$("uname").val();
            var upwd=$("upwd").val();*/

            var form=$("#getUser");//根据id获取表单
            //alert("a");
            $.ajax({
                type:"get",
                dataType:"json",
                url:"${pageContext.request.contextPath}/user/getUser",
                //data:{uname:uname,upwd:upwd},//把用户名和密码分开传
                data:form.serialize(),//传到后端的参数，表单序列化
                success:function (result) {
                    console.log(result);
                    //alert("uname:"+result.uname);
                    //把用户填充到p标签
                    $("showUser").html("uname:"+result.uname);
                }
            });
        });
    });
</script>

运行结果：