ssm框架完成前端的ajax登录

最新推荐文章于 2024-08-07 21:03:04 发布
最新推荐文章于 2024-08-07 21:03:04 发布
阅读量3.2k 收藏 7
点赞数 1
分类专栏： java 文章标签： SSM ajax spring jquery

首先，引入jquery的包：

[javascript]  view plain  copy
  1. <script type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.min.js"></script>  
  2. <script type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>  
  3. <script type="text/javascript" src="../js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>  

然后前端对应的代码：

[html]  view plain  copy
  1. <body style="background-color: #F3F3F3">  
  2.     <div class="easyui-dialog" title="管理员登录" data-options="closable:false,draggable:false"  
  3.         style="width: 400px; height: 300px; padding: 10px;">  
  4.         <div style="margin-left: 50px; margin-top: 50px;">  
  5.             <div style="margin-bottom: 20px;">  
  6.                 <div>  
  7.                     用户名:  
  8.                     <input name="username" class="easyui-textbox" data-options="required:true"  
  9.                         style="width: 200px; height: 32px" value="admin" />  
  10.                 </div>  
  11.             </div>  
  12.             <div style="margin-bottom: 20px">  
  13.                 <div>  
  14.                     密   码:  
  15.                     <input name="password" class="easyui-textbox" type="password"  
  16.                         style="width: 200px; height: 32px" data-options="required:true" value="admin" />  
  17.                 </div>  
  18.             </div>  
  19.             <div>  
  20.                 <a id="login" class="easyui-linkbutton" iconCls="icon-ok"  
  21.                     style="width: 100px; height: 32px; margin-left: 50px">登录</a>  
  22.             </div>  
  23.         </div>  
  24.     </div>  


然后ajax的异步请求的js：

[javascript]  view plain  copy
  1. <script type="text/javascript">  
  2.         /* 登录 */  
  3.         $("#login").click(function() {  
  4.             var username = $("[name=username]").val();  
  5.             var password = $("[name=password]").val();  
  6.   
  7.             if (username == '' || password == '') {  
  8.                 $.messager.alert('错误', "用户名或者密码为空！");  
  9.                 return;  
  10.             }  
  11.   
  12.             /* ajax请求 */  
  13.             $.ajax({  
  14.                 url : "/rest/login",  
  15.                 type : "post",  
  16.                 data : {  
  17.                     "username" : username,  
  18.                     "password" : password  
  19.                 },  
  20.                 dataType : "text",  
  21.                 success : function(data) {  
  22.                     if (data != null && data == 'index') {  
  23.   
  24.                         window.location.href = "/page/index";  
  25.   
  26.                     } else if (data != null && data == 'login') {  
  27.   
  28.                         $.messager.alert('错误', "用户名或者密码为空！");  
  29.                         return;  
  30.                     }  
  31.                 }  
  32.             });  
  33.   
  34.         });  
  35.   
  36.     </script>  
  37. </body>  

最后后台代码：

[java]  view plain  copy
  1. @Controller  
  2. @RequestMapping("/rest")  
  3. public class LoginAndRegistController {  
  4.   
  5.     @Autowired  
  6.     UserService userService;  
  7.   
  8.     /*** 
  9.      * 登录 
  10.      *  
  11.      * @param username 
  12.      * @param password 
  13.      * @return 
  14.      */  
  15.     @ResponseBody  
  16.     @RequestMapping(value = "/login")  
  17.     public String login(String username, String password) {  
  18.   
  19.         TbUser user = userService.selectByExample(username, password);  
  20.   
  21.         if (user != null) {  
  22.   
  23.             return "index";  
  24.         }  
  25.   
  26.         return "login";  
  27.     }  
  28.   
  29. }  


整个过程完结。

来源 http://blog.csdn.net/fhliuzhihu/article/details/79162317

qq_270490096
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SSM使用Ajax实现登录
YuMi的博客
10-22 1111
文章目录SSM使用Ajax实现登录 SSM使用Ajax实现登录 毕竟都说了是ssm咱就不写那些配置文件等等，还有一些基本步骤实体类,接口什么的就不写了,直接上代码。 controller层 package com.java.ym.controller; import com.java.ym.entity.Dog; import com.java.ym.entity.Master; import com.java.ym.service.DogService; import org.springframe
Java Web登录Demo（SSM+Ajax）
01-20
demo主要运用SSM框架完成用户的登录功能；demo集成了MyBatis反向生成工程；demo的后台运用了spring的自动注入、springMVC的请求驱动、MyBatis面向接口数据库编程技术；JSP前台和后台交互的响应模式；
第十二章 Spring MVC 框架扩展和SSM框架整合(2023版本IDEA)
最新发布
2301_78884095的博客
08-07 1322
在Java中，特别是在使用Spring框架时，编写自定义转换器（Converter）通常涉及实现org.springframework.core.convert.converter.Converter接口或继承org.springframework.core.convert.converter.ConverterFactory（如果你需要更复杂的转换逻辑，能够处理多个源类型或目标类型）。下面是一个简单的自定义转换器示例，它将一个字符串转换为自定义的User对象。
SSM框架加上Ajax demo
09-12
这是我实习的时候留下的一点小小的经验，我本是不想要积分的，但是这个网站好像是想钱想疯了在学习的同志们，与君共勉！
jquery_ajax实现案例（SSM框架）
01-03
jquery ajax实现步骤，word文档记录方式，里面放有步骤代码(可适用于是ssm框架)
ssm框架前端ajax与后台交互
w19970811的博客
05-18 622
前端html代码： <a href="javascript:;" onclick="resetPassword('111')">重置密码</a> 前端script代码: /** *引入js */ <script th:src="@{static/webcampus/jquery/jquery-3.4.1.min.js}" charset="utf-8"></script> <script type="text/javascript"&
Java框架-SSM整合实现登录-AJAX-JSON
zhangxuelong461的博客
02-15 1445
1. SSM框架整合实现用户登录 1.1. 创建项目 相关配置环境依赖如下： pom.xml <dependencies> <!-- SpringMVC --> <dependency> <groupId>org.springframework</groupId> <artifac...
Ajax 框架之SSM整合框架实现ajax校验
10-19
在Web开发中，Ajax（Asynchronous ...总的来说，SSM框架与Ajax的结合，使得Web应用能够更加灵活地处理用户交互，提供了更丰富的用户体验。同时，通过JSON数据交换，前后端的解耦也更加明显，有利于代码的维护和扩展。
ssm框架里面前端拿HTML写,基于SSM框架的web开发——ajax实现先后台数据交互
weixin_39605521的博客
06-08 1113
前台向后台传输数据1丶用传统的form表单提交，举个栗子： 假设在第一个文本框中输入 admin ,在第二个密码框中输入 123 ，那么当点击submit提交按钮时，表单中的数据将会封装成以下格式的一个字符串发送到后台："username=admin&password=123" 。这种字符串就是江湖人称的 url编码字符串(application/x-www-form-urlencode...
基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码.zip
10-24
《基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码解析》 图书管理系统是信息化时代中常见的应用，它能够有效地管理和组织大量的图书信息，为用户提供便捷的查询、借阅、归还等功能。本系统采用的是经典的...
用ssm框架和Ajax写的分页查询
07-01
分页查询
Ajax+SpringMVC+Spring+Mybatis+MySql+js用户注册实例
07-23
Ajax+SpringMVC+Spring+Mybatis+MySql+js用户注册实例,具体过程和效果看博文：http://blog.csdn.net/evankaka/article/details/47023975
基于SSM框架实现简单的登录注册功能【数据库+源码】
07-12
SSM框架，全称Spring、SpringMVC和MyBatis，是Java开发中常用的一种集成框架，用于构建高效、灵活的Web应用。本项目旨在帮助初学者通过实践掌握基于SSM实现简单登录注册功能的基本步骤和技巧。 首先，`Spring`作为...
SSM框架中使用ajax传递数据
SSL 的博客
11-16 2155
1. 依赖准备 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.13.0</version> </dependency> <
ssm框架跨域ajax案例,ssm框架解决跨域问题
weixin_35763513的博客
08-06 235
原ssm框架解决跨域问题一：自定义一个Filter。package com.fyq.filter;import java.io.IOException;import javax.servlet.Filter;import javax.servlet.FilterChain;import javax.servlet.FilterConfig;import javax.servlet.ServletE...
ssm框架之jquery和AJAX验证
JackMaster_xh的博客
06-29 1962
页码的代码片： controller控制类：
Jquery ajax 介绍
半拾
08-05 274
在前后端交互中我们经常使用ajax Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。jQuery 不是
SSM + Ajax
m0_51945098的博客
12-22 2399
1.创建数据库 2.创建工程，目录，导入jquery类库，并导入pom依赖 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.c
ssm框架登录Ajax
09-21
根据你提供的引用内容，ssm框架登录Ajax可以通过以下步骤实现: 首先，在前端的js代码中，定义一个login函数，用于处理登录操作。它使用jQuery的ajax方法发送POST请求到服务器的login1.do路径。请求的数据包括用户名...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值