设为首页 加入收藏

TOP

SpringMVC+Jquery实现Ajax(二)
2019-09-17 19:09:47 】 浏览:76
Tags:SpringMVC Jquery 实现 Ajax
kage
="controller" /> <!--支持SpringMVC特有的注解 --> <mvc:annotation-driven /> <!-- 对静态资源放行 --> <mvc:default-servlet-handler /> <!-- 视图解析器:自动为咱们添加前缀与后缀 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/views/" /> <property name="suffix" value=".jsp" /> </bean> <!-- 上传解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize"> <!-- 上传文件大小的上限 --> <value>2000000000</value> </property> </bean> </beans>

 

  

4、Controller层注解

@Controller
@RequestMapping("/Jquery")

 

四、Jquery框架配置

1、导包(因为在前端需要用到Json,所以需要导入Json的包)

 

2、项目中引入Jquery

 

 

3、html中引入Jquery

 

<!-- 导入jquery,jquery共有两个版本,jquery-1.11.2.js:有完整的源代码,比较占空间,jquery-1.11.2.min.js:是压缩版,比较节约空间 -->
<script type="text/java script" src="/jquery/jquery-1.11.2.min.js"></script>

 

五、前端代码展示:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入jquery,jquery共有两个版本,jquery-1.11.2.js:有完整的源代码,比较占空间,jquery-1.11.2.min.js:是压缩版,比较节约空间 -->
<script type="text/java script" src="/jquery/jquery-1.11.2.min.js"></script>
<script type="text/java script">
    
    function login(){
        /**
        * 提交方式一:整个表单的数据提交方式
        */
         //serialize():表单序列化
        var params = $("#loginForm").serialize();
        //post请求,params:请求参数,将数据传到后端,function(result){}:回调函数,接收后端返回的数据,参数名(result)可随便取
        
     $.post("/Jquery/login",params,function(result){
            //因为SpringMVC框架和Jquery框架的联合作用,使得传回来的result保留了原有数据类型
            if(result){//登录成功
                
                window.location.href="http://www.baidu.com";
                
            }else{
                //完全等于  document.getElementById("erSpan").innerHTML = result+":"+"登录失败!";
                $("#erSpan").html(result+":"+"登录失败!");
            }
            
        })
    }
    
    function login2(){
        /**
        *提交方式二:一个个数据上传的方式
        */
        //以下两句相当于 document.getElementById("userName").value;
        var userName = $("#userName").val();
        var pwd = $("#pwd").val();
        
        //写法一:key值必须要加"";
        //var params = {"userName":userName,"pwd":pwd};
        //写法二:
        var params = "userName="+userName+"&pwd="+pwd;
        
        //发送请求到后台
        //如果要传参,直接在第二个参数中传就可以了
        $.post("/Jquery/login",params,function(result){
            //因为SpringMVC框架和Jquery框架的联合作用,使得传回来的result保留了原有数据类型
            if(result){
                window.location.href="http://www.baidu.com"
            }else{
                //完全等于document.getElementById("erSpan").innerHTML = result+":"+"登录失败!";
                $("#erSpan").html(result+":"+"登录失败!");
            }
        }) 
    }
</script>
</head>
<body>
    <span id="erSpan&qu
首页 上一页 1 2 3 下一页 尾页 2/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇React搭建项目(全家桶) 下一篇每个Web开发者都该了解的12条命令..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目