个人中心
gpt4 book ai didi

javascript - 将不同的 PHP 验证响应处理成 Ajax 以显示在警报 Bootstrap 中

转载 作者：行者123 更新时间：2023-11-30 20:19:27 25 4
gpt4 key购买 nike

我有一个通过电子邮件恢复密码的表格。我向 PHP 发送输入以执行以下操作:

  1. 验证{三个不同的验证消息)
  2. 如果通过，处理

一旦收到响应，在AJAX中，虽然无效，但被认为是成功的，因为它已经在php中被处理了。 .

我需要区分每个响应，以便显示适当的警报消息

  • 如果字段输入为空，我想在alert-info中显示它消息框
  • 如果字段输入不是有效的电子邮件，我想在 alert-warning 中显示它消息框
  • 如果在服务器中找不到字段输入，我想在 alert-danger 中显示它消息框
  • 如果成功，我想在alert-success中显示

$(function() {
	// Get FORM ID ///////////////////////////////////////////
	var form = $('#RecoveryForm');
	// Get MESSAGE DIV ID ///////////////////////////////////////////
	var formMessages = $('#formresults');
	$(form).submit(function(e) {
		$( "#submit" ).prop( "disabled", false ); 
		e.preventDefault();
		var formData = $(form).serialize();
			$.ajax({
			type: 'POST',
			url: $(form).attr('action'),
			data: formData
			})
		.done(function(response) {
			$(formMessages).removeClass('error');
			$(formMessages).addClass('success');
			$(formMessages).text(response);
			// Get FORM ID ///////////////////////////////////////////
			document.getElementById("RecoveryForm").reset();
			//$('#reset-button').click();
		})
		.fail(function(data) {
			$(formMessages).removeClass('success');
			$(formMessages).addClass('error');

			if (data.responseText !== '') {
				$(formMessages).text(data.responseText);
			} else {
				$(formMessages).text('Oops! An error occured and your message could not be sent.');
			}
		});
	$("#submit").removeAttr("disabled");		
	});
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>

    	<div id="formresults"></div>	 
	<form id="RecoveryForm" method="post" action="exa.php">
      <table align="center">
      <tr><td><div class="input-append"><input type="text" name="email" id="email" class="input-xlarge" placeholder="Email" maxlength="100" /><span class="add-on"><li class="icon-envelope"></li></span></div></td></tr>
      </table>
      <input type="hidden" name="token" value="<?=Token::generate();?>" />
      <center><input type="submit" id="submit" name="Forget" class="btn btn-primary" value="Submit" /></center>
    </form>
  	<script src="ajax/jquery-2.1.0.min.js"></script>
	<script src="ajax/app.js"></script>
<!---------------------------------------------------------------->
<?php include 'footer.php'; ?>
</body>
</html>

PHP>

<?php   
header('Content-type: application/json');
require 'Access.php'; // Get Access
//response array with status code and message
$response_array = array();    
if ($_SERVER["REQUEST_METHOD"] == "POST") { 
    $email = $_POST["email"];                   

    if ( empty($email) ) {                      
        $response_array['status'] = 'info';
        $response_array['message'] = 'No Input';
        echo json_encode($response_array);
        exit;   
        }
    if ( !filter_var($email, FILTER_VALIDATE_EMAIL) ) {
        $response_array['status'] = 'warning';
        $response_array['message'] = 'Not Valid Email';
        echo json_encode($response_array);
        exit;   
        }
    if (@mysql_num_rows(mysql_query("SELECT `id` FROM `accounts` WHERE `email`='$email'")) < 1) {
        $response_array['status'] = 'danger';
        $response_array['message'] = 'Account Not Found';
        echo json_encode($response_array);
        exit;   
        }
            $row_user = @mysql_fetch_array(mysql_query("SELECT * FROM `accounts` WHERE `email`='$email'"));
            $password = $row_user['pass'];
            $to = $row_user['email'];
            $subject = "Your Recovered Password";
            $message = "Please use this password to login: " . $password;
            $headers = "From : XXX@hotmail.com";
    // Send the email.
    if (mail($to, $subject, $message, $headers)) {
        $response_array['status'] = 'Success';
        $response_array['message'] = 'Email Sent';
        echo json_encode($response_array);
        } else {
        $response_array['status'] = 'info';
        $response_array['message'] = 'Try Again Later';
        echo json_encode($response_array);
                }
} else {
$response_array['status'] = 'info';
        $response_array['message'] = 'Try Again Later';
        echo json_encode($response_array);
}
$response_array['status'] = 'info';
        $response_array['message'] = 'Try Again Later';
        echo json_encode($response_array);
?>

最佳答案

首先我们从 html 开始验证，因为这可能会被用户阻碍和操纵，但仍然是一个很好的开始方式。

首先，我们将 required 属性添加到 html 中的输入字段，并更改 input types 以匹配您期望的数据类型，例如:input type="email" 隐藏输入并不能防止它被篡改，最好也添加 Readonly 属性。

   <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <div id="formresults"></div>     
        <form id="RecoveryForm" method="post" action="exa.php">
            <table align="center">
                <tr>
                    <td>
                        <div class="input-append">
                            <input type="email" Required name="email" id="email" class="input-xlarge" placeholder="Email" maxlength="100" />
                            <span class="add-on"><li class="icon-envelope"></li></span>
                            <p id="mailerror"></p> <!-- This Segment Displays The Validation Rule For Email -->
                        </div>
                    </td>
                </tr>
            </table>
            <input type="hidden" Readonly name="token" value="<?=Token::generate();?>" />
            <center>
                <input type="submit" id="submit" name="Forget" class="btn btn-primary" value="Submit" />
            </center>
            <script src="ajax/jquery-2.1.0.min.js"></script>
            <script src="ajax/app.js"></script>
        </form>
     </body>
   </html>

其次，您使用的是 jquery，虽然它更易于使用，但我建议您从 java 脚本验证开始，使用 onsubmit 属性捕获表单并开始验证。作为初学者而不是 jquery，你会更好地理解到底发生了什么。

<script>
 $(function() {
    /*Get FORM ID*/
    var form = $('#RecoveryForm');

    /*Get MESSAGE DIV ID */
    var formMessages = $('#formresults');

    /*Email Validation*/
    var email_regex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var email = $('#email').val();

    if (!email.match(email_regex) || email.length == 0) {
    $('#mailerror').text("* Please enter a valid email address *");
    $("#email").focus();
    return false;
    }
    else if (email.match(email_regex) && email.length >= 5){
    $(form).submit(function(e) {
        $( "#submit" ).prop( "disabled", false ); 
        e.preventDefault();
        var formData = $(form).serialize();
            $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
            })
        .done(function(response) {
            if (response.status=='Success'){
                $(formMessages).removeClass('error');
                $(formMessages).addClass('success');
                $(formMessages).text(response.message);
            }
            else if (response.status=='warning'){
                $(formMessages).removeClass('success');
                $(formMessages).addClass('error');
                $(formMessages).text(response.message);
            }
            else if (response.status=='danger'){
                $(formMessages).removeClass('success');
                $(formMessages).addClass('error');
                $(formMessages).text(response.message);
            }
            else if (response.status=='info'){
                $(formMessages).removeClass('success');
                $(formMessages).addClass('error');
                $(formMessages).text(response.message);
            }

            /*Get FORM ID */
            document.getElementById("RecoveryForm").reset();
        })
        .fail(function(data) {
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }
        });
    $("#submit").removeAttr("disabled");        
    });
    }
 });
</script>

第三个你的 PHP 本来可以写得更好，但它可能工作得很好 :( 所以我们暂时离开它。

关于javascript - 将不同的 PHP 验证响应处理成 Ajax 以显示在警报 Bootstrap 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51616352/

25 4 0
文章推荐： javascript - Konva 实时更新一个正确的位置
文章推荐： c - scanf 如何知道何时结束 for 循环？
文章推荐： c - 我的 BFS C 代码给出了错误的(绝对是废话)输出
文章推荐： c# - 如何将基于约定的自定义与 AutoFixture 的 [AutoData] 属性相结合？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com