Laravel使用AJAX进行登录验证

laravel login validation with ajax

本文关键字：登录 验证 使用 AJAX Laravel      更新时间：2023-09-26

>我有一个登录页面，用户可以在其中登录。如果登录失败，则会将用户发送到一个新页面，其中包含显示登录失败的文本。我正在尝试使用 ajax 重做此功能，以便如果登录失败，它会在登录页面上显示登录失败，不会转到另一个页面。

这是我的登录函数中的代码，在我的控制器中，它返回有关登录失败的视图。我不确定用什么替换代码才能使其与 ajax 一起使用。

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

我想用ajax做的只是在登录失败时更改元素ID以阻止，而不是返回新页面。按照下面的代码片段行。

 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>

这是包含 ajax 的 JavaScript 

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();

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

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

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

请参阅以下问题和教程。

使用 XMLHttpRequest 发送 POST 数据

https://www.developphp.com/video/JavaScript/Ajax-Post-to-PHP-File-XMLHttpRequest-Object-Return-Data-Tutorial

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

相关文章：