设置ajax验证响应

Question

我用于登录表单的PHP代码[此部分位于我拥有登录表单的index.php的最顶部]看起来像这样：

if(isset($_POST['submit'])){

	if (!isset($_POST['username'])) $error[] = "Please fill out all fields";
	if (!isset($_POST['password'])) $error[] = "Please fill out all fields";

	$username = $_POST['username'];
	if ( $user->isValidUsername($username)){
		if (!isset($_POST['password'])){
			$error[] = 'A password must be entered';
		}
		$password = $_POST['password'];

		if($user->login($username,$password)){
			$_SESSION['username'] = $username;
			header('Location: welcome.php');
			exit;

		} else {
		$error[] = '<div style = "text-align:center">Wrong username/password or your account have not been activated </span>';
		}
	}else{
		$error[] = '<div style = "text-align:center">Username required</span>';
	}

，登录表单的HTML如下：

  <form role="form" method="post" action="" >

				<?php
				//check for any errors
				if(isset($error)){
					foreach($error as $error){
						echo '<p class="bg-danger">'.$error.'</p>';
					}
				}

				if(isset($_GET['action'])){

					//check the action
					switch ($_GET['action']) {
						case 'active':
							echo "<h2 class='bg-success'>Your account is now active you may now log in.</h2>";
							break;
						case 'reset':
							echo "<h2 class='bg-success'>Please check your inbox for a reset link.</h2>";
							break;
						case 'resetAccount':
							echo "<h2 class='bg-success'>Password changed, you may now login.</h2>";
							break;
					}

				}

				
				?>

				<div class="form-group">
					<p align="center">
					<font face="Tahoma">Username:</font><font color="#FFFFFF">
					</font>
					<input type="text" name="username" id="username" class="form-control input-lg"  value="<?php if(isset($error)){ echo htmlspecialchars($_POST['username'], ENT_QUOTES); } ?>" tabindex="1">
					</div>
<br>
				<div class="form-group">
					<p align="center">
					<font face="Tahoma">Password: </font><font color="#FFFFFF">
					&nbsp;</font><input type="password" name="password" id="password" class="form-control input-lg"  tabindex="3">
				</div>
                             <br>
				<div align="center">
<input type="submit" name="submit" value="Login" class="btn1" tabindex="5">
				</div>
                             
				

                             
                        </form>

现在，如果存在错误，则会提交此表单，它将刷新整个页面，并在表单字段顶部的右侧显示错误消息。如何在不刷新整个页面的情况下使用AJAX / jQuery响应来验证错误。我只希望有错误而不弹出刷新错误消息。如果成功，则它将登录用户。有人可以帮助我吗？

我也有一个errors.php文件，其中仅包含以下代码：

<?php  if (count($errors) > 0) : ?>
  <div class="error">
  	<?php foreach ($errors as $error) : ?>
  	  <p><?php echo $error ?></p>
  	<?php endforeach ?>
  </div>
<?php  endif ?>

我了解了设置AJAX方法的概念，但IDK指出了如何在此代码和表单上使用它。希望你们能提供帮助。

Answer 1

这是一个非常广泛的问题，有很多可能的答案，但这是解决问题的一种方法。

1。使用AJAX发布登录信息

$.post("loginScript.php", {
    username: "username goes here",
    password: "password goes here"
}, function(data){

});

2。回响您的结果

您的登录脚本应回显一个JSON响应，该响应指示登录是否成功，如果失败，则表明错误是什么。

<?php

    if(//login conditions)
    {
        echo json_encode(array(
            "success"  => true
        ));
    }
    else
    {
        echo json_encode(array(
            "success"  => false,
            "errors"   => $errors
        ));
    }

3。处理响应

$.post("loginScript.php", {
    username: "username goes here",
    password: "password goes here"
}, function(data){
    var json = JSON.parse(data);
    if(json.success)
    {
        //Login was successful
    }
    else
    {
        var errors = json.errors;
        //Display errors on your page.
    }
});