SpringMVC Jquery实现埃阿斯功能

一、什么是Ajax？

Ajax:异步的Java脚本语言和Json(这里可扩展置标语言改为了JSON)；

作用：用于完成网页局部刷新功能（修改少量数据只用局部刷新，不用再整个网页重新加载);

二、SpringMVC和框架的简单介绍

SpringMVC:是基于春天的一个子框架(MVC框架),功能强于春天，这个框架主要是解决咱们控制器这一层的问题。

男：模特-模型查看-视图控制器-控制器小型应用程序

框架框架：是一个程序员使用比较多的射流研究…框架，功能较为强大。理念：写的更少，做的更多优点：1.兼容各种浏览器2.操作埃阿斯很简单

版本：1.x版本兼容工业管理学(工业工程)浏览器2.x，3.x.及之后的不兼容工业管理学(工业工程)

框架的更新主要有两个路线：路线一：1.3，1.4，1.x..这个路线主要是坚持于兼容工业管理学(工业工程)浏览器路线二：2.x，3.x.这个路线不再兼容工业管理学(工业工程)浏览器两路线并没有版本前后的关系

三、SpringMVC的配置

1、导入冲突包

2、配置核心控制器web.xml

？可扩展标记语言版本='1.0 '编码='UTF-8 '？web-app xmlns : xsi=' http://www。w3。org/2001/XMLSchema-instance ' xmlns=' http://xmlns。JCP。org/XML/ns/javaee ' xsi 3360架构位置=' http://xmlns。JCP。org/XML/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd' ID=' WebApp _ ID '版本=' 3.1 '！-核心控制器-servlet servlet-name dispatcher/servlet-name servlet-class org。弹簧框架。网络。servlet。dispatcherservlet/servlet-class init-param！- SpringMVC的配置文件的位置-param-NameContextconfiglocation/param-name param-value类路径：应用程序上下文-MVC。XML/param-value/init-param！-即学习笔记一跟着服务器（雄猫)的启动而启动-启动时加载1/启动时加载/servlet servlet-映射servlet-名称dispatcher/servlet-名称！-使用杠(/)更加符合咱们的安静的风格-URL-模式//URL-模式/servlet-映射！-配置相应的过滤器：角色学习笔记一的邮政请求的乱码问题- !-配置编码方式过滤器，注意一点：要配置在所有过滤器的前面-筛选器筛选器-名称字符编码筛选器/筛选器-名称筛选器-类别组织。弹簧框架。网络。过滤器。字符编码筛选器/筛选器类init-param-name编码/param-name param-value utf-8/param-value/init-param/filter-filter-mapping筛选器-name字符编码筛选器/筛选器-name URL-pattern/配置applicationContext.xml

？可扩展标记语言版本='1.0 '编码='UTF-8 '？beans xmlns=' http://www。弹簧框架。org/schema/beans ' xmlns : xsi=' http://www .w3。org/2001/XMLSchema-instance ' xmlns : context=' http://www .弹簧框架。org/schema/context ' xmlns 3: MVC=' 3http://www .弹簧框架。org/schema/MVC ' xsi : schema位置=' http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context 33

@ Controller @请求映射("/Jquery ")

四、Jquery框架配置

1、导包（因为在前端需要用到Json，所以需要导入数据的包)

2、项目中引入框架

3、html中引入框架

！-导入jquery，jquery共有两个版本，jquery-1.11.2.js:有完整的源代码，比较占空间，jquery-1.11.2.min.js:是压缩版，比较节约空间-脚本类型=' text/JavaScript ' src=' http :/jquery/jquery-1。11 .2 .量滴js /脚本五、前端代码展示：

！DOCTYPE html html hearteta charset=' UTF-8 '标题在此插入标题/title！-导入jquery，jquery共有两个版本，jquery-1.11.2.js:有完整的源代码，比较占空间，jquery-1.11.2.min.js:是压缩版，比较节约空间-脚本类型=' text/JavaScript ' src=' http :/jquery/jquery-1。11 .2 .量滴js '/脚本脚本类型=' text/JavaScript '函数login(){ /** *提交方式一：整个表单的数据提交方式*///serialize():表单序列化var params=$('#loginForm ').serialize()；//帖子请求，参数：请求参数，将数据传到后端，函数（结果){}:回调函数，接收后端返回的数据，参数名（结果)可随便取$.post('/Jquery/login '，params，function(result){ //因为学习笔记一框架和框架框架的联合作用，使得传回来的结果保留了原有数据类型if(result){//登录成功窗户。位置。http://。百度。com ' rel='外部不跟随' rel='外部不跟随'；}else{ //完全等于文件。getelementbyid(' Erspan ').innerHTML=结果":"登录失败！$('#erSpan ').html(结果":"登录失败!');} }) }函数login2(){ /** *提交方式二：一个个数据上传的方式*///以下两句相当于文件。getelementbyid(' userName ').价值；var userName=$('#userName ').val()；var pwd=$('#pwd ').val()；//写法一：键值必须要加'';//var params={ ' userName ' : userName，' pwd ' : pwd }；//写法二：var params=' userName=' userName ' pwd=' pwd；//发送请求到后台//如果要传参，直接在第二个参数中传就可以了$.post('/Jquery/login '，params，function(result){ //因为学习笔记一框架和框架框架的联合作用，使得传回来的结果保留了原有数据类型if(result){ window。位置。http://。百度。com ' rel='外部不跟随' rel='外部不跟随' } else {//完全等于文件。getelementbyid(' Erspan ').innerHTML=结果":"登录失败！$('#erSpan ').html(结果":"登录失败!');} })}/script/head body span id=' Erspan '/span form id=' loginFOrm ' action='/Jquery/log in ' method=' post '用户名：输入类型=' text ' name=' userName ' id=' userName '/br/密码输入类型='text' name='pwd' id='pwd' /br /输入类型='button '值='ajax '表单提交onclick=' log in()'/input type=' button ' value=' Ajax '单独提交onclick=' login 2()'//表单/正文/html六、控制器层代码展示：

包装控制器；导入组织。弹簧框架。刻板印象。控制器；导入组织。弹簧框架。网络。绑定。注释。请求映射；导入组织。弹簧框架。网络。绑定。注释。反应体；@ Controller @请求映射("/Jquery ")公共类JqueryController {/* * *注意：如果在浏览器上访问login.html的路径为：IP:端口号/login.html，而这里访问注册方法的路径直接为：/登录，前面没有任何路径，如@RequestMapping('/Jquery ')，则会出现406错误*/@请求映射('/log in ')@响应正文//加上这个注解，返回就不会再跳转页面，只是返回数据(json)公共布尔登录(字符串用户名，字符串pwd){系统。出去。println(userName ' : ' pwd)；如果('流星。等于（用户名)"456"。equals(pwd)){ 0返回真}返回false}}总结

以上所述是小编给大家介绍的SpringMVC Jquery实现埃阿斯功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！