XHR failed loading: POST “http://localhost:8080/user/login2“. DevTools failed to load source map

XHR failed loading: POST “http://localhost:8080/user/login2”.
btn.onclick @ test_file.html:34
Navigated to http://127.0.0.1:8848/login1/test_file.html?username=%E5%BC%A0%E4%B8%89&password=123456
DevTools failed to load source map: Could not load content for chrome-extension://giijkmholjmdmpojlmmoieghkilnhkhb/static/js/0.chunk.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

出现改错误是前端情况如下:


XHR failed loading: POST “http://localhost:8080/user/login2“. DevTools failed to load source map_第1张图片XHR failed loading: POST “http://localhost:8080/user/login2“. DevTools failed to load source map_第2张图片

前端页面代码:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>FormData文件上传测试title>
	head>
	<body>
		<form id="form1">
			<input type="text" name="username"><br>
			<input type="password" name="password"><br>
			<button id="btn1">提交button>
			
			
			
		form>
	body>
	<script src="js/jquery-3.6.0.js">script>
	<script type="text/javascript">
		//获取按钮
		var btn=document.getElementById("btn1");
		
		//获取表单
		var form=document.getElementById("form1");
	
		//为按钮添加点击事件
		btn.onclick=function()
		{
			
			//将普通的html表单转为表单对象
			var formData=new FormData(form);
			$.ajax({
			//几个参数需要注意一下
			    type: "POST",//方法类型
			    // contentType:"application/json; charset=utf-8",
				contentType:false,
				processData:false,
			    dataType: "json",
			    url: "http://localhost:8080/user/login2" ,//url
			    data: formData,//前端向服务器查传送的数据一般是字符串,Json.stringify将json数据转为字符串
			    success: function (result) {
			        //console.log(typeof result);//打印服务端返回的数据类型,是json对象
					console.log(result);
					if(result.flag){			
						console.log("登陆成功");
					}
					else
					{
				 		window.location.href="http://www.baidu.com";
					}
			    },
			    
			});
			}
		script>
html>

后端接收代码:

@Controller
@RequestMapping("/user")
@CrossOrigin
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/login2")
    @ResponseBody
    public Result login2(@RequestParam("username") String name,@RequestParam("password") String password)
    {
        User user=userService.getUserByName(name);
        if(user.getPassword().equals(password))
        {
            System.out.println("登陆成功了");
            return new Result(true,"登陆成功");
        }
        else
        {
            System.out.println("登陆失败了");
            return new Result(false,"密码错误");
        }

    }
}

对于这个问题,后端能接收到数据,登陆成功,但是返回的结果无法在前端展示,仔细排查后是前端点击提交按钮后,前后端连接,数据是传到后端了,但是这个连接会立马断掉,原因如下:

form表单中的button标签没有声明type=“button”,导致被默认为,点击button按钮时,虽然ajax执行了数据上传,由于未声明,导致被默认为submit立刻触发另一个连接,就是form表单中的action的默认连接,原地跳转,导致前后端连接断开,没有response。

解决方法:

将 写在form标签外面,或者在form标签内部声明button的type=“button”,或者改用div,总之,只要防止触发form表单的action默认连接即可。

你可能感兴趣的:(web前端,ajax)