Javascript 使用ajax进行laravel登录验证

我有一个用户可以登录的登录页面。如果登录失败，用户将被发送到一个新页面，其中显示登录失败的文本。我正在尝试使用ajax重做此功能，这样，如果登录失败，它将在登录页面上显示登录失败，将无法转到其他页面

下面是我的控制器中的登录函数中的代码，它返回登录失败时的视图。我不确定用什么替换代码以使其与ajax一起工作

public function checkValue()
{
// if login failed
return view("pages.loginFailed");
}

使用ajax所要做的就是在登录失败时将元素id更改为block，而不是返回新页面。按照下面代码段的行

 var x = document.getElementById("loginFailed");
 x.style.display = 'block'; 

这是我的刀片视图中的代码

<div class="textFields">
<form action =""{{ route("loginVPM") }}"" method="post">
<div class="loginDiv"><input class="loginInput" type="form" placeholder="username" name="firstnameLogin"> </input></div>
<div class="loginDiv"> <input class="loginInput" type ="form" placeholder="lastname" name="lastnameLogin"> </input> </div>
<div class="loginDiv"> <input class="loginInput" type ="password" placeholder="password" name="passwordLogin"> </input> </div>
</div>
<div class="loginFailed" id="loginFailed"> login Failed ! </div>
<br><br><br>
<div class="center"> Forgot? &nbsp;| &nbsp; <a href="http://villageprintwebapp.app/users"> Sign up </a> </div>
<br><br>
<div class="center">
<button type="submit" class="submitButton"> Submit
</button>
</div>
</form>

---

我的问题是，我不明白在open方法的第二个参数中应该放什么。我知道这应该是服务器位置的url，但不确定如何找到它，或者我是否可以在这里传入另一个参数。

首先，x.open应该是POST请求，而不是GET请求

变量必须作为x.send（您的变量）中的参数发送

请参阅以下问题和教程

---

您应该阻止“提交”按钮的默认操作，否则它仍将重定向到其他页面。

不过，我不想发送任何变量。“阻止提交按钮的默认操作，否则它仍将重定向到另一个页面”我认为这不对，您需要将表单字段中的数据作为参数发送到x.send（）。在x.open中（“GET”，true）；您将在空白空间中输入{{路由（“LogVIPPM”）}，在您更改到POST之后，因为将用户登录在GET上是非常不安全的。

function display() {

var x = XMLHttpRequest();
x.onreadystatechange = function() {
if(x.readyState == 4 && x.status == 400)
{
var  y = document.getElementById("loginFailed");
y.style.display = 'block';
}
};
x.open("GET", " ", true);
x.send();