• ssm 框架 使用ajax异步,实现登陆


    只是简单写一下 js、jsp、和controller

    jsp

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    
    
    <html>
    <script src="../easyUI/jquery.min.js"></script>
    <script src="../js/login.js"></script>
    <head>
        <title>u</title>
    </head>
    <body>
    用户名:<input type="text" name="username"  id="username"><br>
    密码:<input type="password" name="password" id="password"><br>
    <button id="login" onclick="login()">登录</button>
    
    </body>
    </html>

    js

    function login() {
    $('input[name="radioInput"]:checked').val();
          var username = $("#username").val();
          var password = $("#password").val();
          var url="http://localhost:8080/user/login.action";
           
      var user = {
          username:username,
          password:password
      };
    
      $.ajax({
          url:url,
          contentType:"application/json;charset=utf-8",
          type:"POST",
          data:JSON.stringify(user),
          dataType:"JSON",
          success:function (res) {
              if(res.username == username){
                  if(res.password == password){
                      window.location.href = "http://localhost:8080/jsp/success.jsp";
                  }else {
                      "密码错误"
                  }
              }
              else {
                  alert("用户名不存在")
              }
          }
      })
    }

    ajax把用户名和密码封装成JSON字符串,传给后台Controller, Controller得到前台 传给的字符串(里面是一个User类)。 通过这些信息(即前台传过来的信息)进行查找,将根据用户名 查找的结果返回,  然后在Ajax的Success 中进行判断(传入值  和 查询值)决定指向的页面

    controller

    @ResponseBody
        @RequestMapping(value = "/login.action")
        public  User  login(@RequestBody User user){
            
            User userLogin = userService.login(user.getUsername(), user.getPassword());
            
            return userLogin;
        }

    这里是给ajax 返回一个user   ,user自动封装为JSON

  • 相关阅读:
    boost库常用库介绍
    boost介绍
    vs2019+win10配置boost库
    交互式多媒体图书平台的设计与实现
    47.全排列 2
    46.全排列
    基于VSCode的C++编程语言的构建调试环境搭建指南
    码农的自我修养之必备技能 学习笔记
    工程化编程实战callback接口学习笔记
    Erlang模块inet翻译
  • 原文地址:https://www.cnblogs.com/dong-dong-1/p/8742863.html
Copyright © 2020-2023  润新知