ajax请求

最新推荐文章于 2024-09-12 10:00:34 发布

weixin_42469186

最新推荐文章于 2024-09-12 10:00:34 发布

阅读量83

点赞数

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/weixin_42469186/article/details/131501233

版权

该文章展示了一个简单的前端登录表单，使用jQuery的AJAX发送POST请求到后端SpringMVC控制器进行登录验证。前端有两个提交按钮，分别调用两个不同的登录函数，一个发送表单数据为URL编码格式，另一个发送JSON格式。后端接收到请求后，根据用户名和密码进行验证并返回相应的响应信息。

摘要由CSDN通过智能技术生成

例如我们可以根据登录来举例

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>


<form>

    用户名:<input type="text" id="userName" />

    密码:<input type="text" id="pwd"/>
    <button onclick="userLogin()" type="button">提交</button>
    <button onclick="userLogin2()" type="button">提交</button>
</form>

<script type="text/javascript">
    function userLogin() {
        $.post({
            url:"http://localhost:8080/checkLogin",
            data:{'userName':$("#userName").val(),"pwd":$("#pwd").val()},
            contentType:"application/x-www-form-urlencoded; charset=UTF-8",
            dataType:"json",
            success:function (data) {
               console.log(data)
            }
        });
    }

    function userLogin2() {
        //    按钮的点击事件能够监听

        //    ajax
        var dataForm = {'userName':$("#userName").val(),'pwd':$("#pwd").val()};
        var str = JSON.stringify(dataForm);
        $.post({
            //从         http://localhost:8080/springmvc/toLogin
            // 跳转到    http://localhost:8080/springmvc/checkLogin
            url:'./checkLogin2',//url怎么改成相对路径
            data:str,//发出去的数据 变成json格式
            contentType:'application/json',//发出去的数据格式 json
            dataType:'json',//响应的数据格式 json
            success:function (result) {
                console.log(result)
                alert(result.msg)
            }
        })
    }
</script>


</body>
</html>

对应的后端：

package com.gao.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.gao.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;

@Controller
public class LoginController {

    @RequestMapping("/toLogin")
    public String toLoginController(){
        return "login";
    }

    @RequestMapping("/checkLogin")
    @ResponseBody
    public Map checkLogin(HttpServletRequest request){

        Map map=new HashMap();

        String userName = request.getParameter("userName");
        String pwd = request.getParameter("pwd");
        User user=null;
        if("admin".equals(userName)&&"666".equals(pwd)){
            map.put("flag",true);
            map.put("msg","登录成功");
            user=new User();
            user.setUserName(userName);
            user.setPwd(pwd);
            map.put("user",user);

        }else {
            map.put("flag",false);
            map.put("msg","错误");
        }

        return map;
    }


    @RequestMapping("/checkLogin2")
    @ResponseBody
    public Map checkLogin2(@RequestBody User user){

        Map map = new HashMap();
        String userName = user.getUserName();
        String userPass = user.getPwd();
        System.out.println(userName + ":" + userPass);
        if ("admin".equals(userName)&&"666".equals(userPass)){
            map.put("flag",true);
            map.put("msg","登陆成功");
        }else{
            map.put("flag",false);
            map.put("msg","用户名密码不正确");
        }
        return map;

    }

}