Ajax 消息被跳过到不在所需 div 元素上的 url 页面

Posted 2023-05-09

【中文标题】Ajax 消息被跳过到不在所需 div 元素上的 url 页面

【英文标题】：Ajax message gets skipped to the url page not on required div element

【发布时间】：2021-02-11 21:11:56

【问题描述】：

我有以下文件...有两个表单登录和注册（尚未发布表单部分） 表单分别是对 auth.php 和 signup.php 的操作，并通过 user.php 进行验证，登录时一切正常。但是，当我使用名称和图像注册用户时，成功消息会出现在 URL 页面上，而不是 modal-footer div 我想更新页脚 DOM 中的消息，即 div modal-footer。 我在 script.js 中使用了两个不同的函数，一个具有 $.form.serialize 的数据值，它处理登录部分，Formdata 处理注册部分....请指导更新 modal-footer div 上的成功消息......谢谢。

script.js

$(function()
    
    $('.form').on('submit', function(e)
        e.preventDefault();

        $form = $(this);
        
        submitForm($form);       
        
        
    ); 

    $('.register').on('submit', function(e)
        e.preventDefault();

         $reg = $('.register');
         registerForm($reg);        
        
    );     

);


function submitForm($form)

    $footer = $form.parent('.modal-body').next('.modal-footer');
    
    $footer.html('<img src="public/images/ajax-loader.gif">');
    
    $.ajax(
        url: $form.attr('action'),
        method: $form.attr('method'),        
        data: $form.serialize(),
        
        success: function(response)
            response = $.parseJSON(response);
            
            if(response.success)                   

            if(!response.signout)
                    setTimeout(function()
                    $footer.html( response.message );
                    window.location = response.url;
                ,5000);
            

             $footer.html( response.message );
            
             
         
         else if(response.error)
            $footer.html( response.message );
         

            console.log(response);

         
     );


function registerForm($form)

    $footer = $form.parent('.modal-body').next('.modal-footer');  
    $footer.html('<img src="public/images/ajax-loader.gif">');
    var data = new FormData(this.form);
    
    $.ajax(
        url: $form.attr('action'),
        method: $form.attr('method'), 
        data: data,
        processData: false,
        contentType: false,
        success: function(response)
            response = $.parseJSON(response);
            if(response.success)                  
                if(!response.signout)
                    setTimeout(function()
                    $footer.html( response.message );
                    window.location = response.url;
                ,5000);
            
                $footer.html( response.message );

         

         else if(response.error)

            $footer.html( response.message );
        
            console.log(response)
        

     );

auth.php

<?php
require_once 'includes/init.php';


$status = $user->login($_POST, $db);

if( $status === 'success')
    echo json_encode([
        'success'=> 'success', 
        'message'=> '<p class="alert alert-success">Authenticated successfully!</p>',
        'url' => 'profile.php',
    ]);

else if( $status === 'missing_fields')
    echo json_encode([
        'error'=> 'error', 
        'message'=> '<p class="alert alert-danger">All fields mandatory!</p>',
    ]);


else if( $status === 'error')
    echo json_encode([
        'error'=> 'error', 
        'message'=> '<p class="alert alert-danger">Incorrect email or password!</p>'
    ]);

signup.php

<?php
require_once 'includes/init.php';


$status = $user->signup($_POST, $db);

if( $status === 'success')
    echo json_encode([
        'success'=> 'success', 
        'message'=> '<p class="alert alert-success">You are signed up successfully!</p>',
        //'url' => 'index.php',
        'signout' => 1,
        
    ]);
else if( $status === 'missing_fields')
    echo json_encode([
        'error'=> 'error', 
        'message'=> '<p class="alert alert-danger">All fields mandatory!</p>',
       
   ]);

else if( $status === 'invalid format')
    echo json_encode([
        'error'=> 'error', 
        'message'=> '<p class="alert alert-danger">Only jpg,jpeg,pngfiles allowed!</p>',
        
    ]);
else if( $status === 'error')
    echo json_encode([
        'error'=> 'error', 
        'message'=> '<p class="alert alert-danger">Failed to sign you up!</p>'
    ]);

?>

user.php

class User


public function login($user, $db)

    if(empty($user['email']) OR empty($user['password']))
        return 'missing_fields';
    

    $sql = "SELECT * FROM `users` WHERE `email`=?";
    $statement = $db->prepare($sql);

    

    if( is_object($statement) )

        $statement->bindParam(1, $user['email'], PDO::PARAM_STR);
        $statement->execute();

        if($row = $statement->fetch(PDO::FETCH_OBJ)) // you the database and verify if the password and email match or not
            
            if(password_verify($user['password'], $row->password))
                
                $_SESSION['logged_in'] = [
                    'id'    =>  $row->id,
                    'name'  =>  $row->name,
                ]; 

                return 'success';
                           

        

    
    return 'error';




public function signup($user, $db)


if(empty($user['name']))
                return 'missing_fields';
                else  
                

if(isset($_FILES['image']))     
    $imgfile=$_FILES["image"]["name"];
    $imgnewfile = $imgfile;
    move_uploaded_file($_FILES["image"]["tmp_name"],"public/images/".$imgnewfile);
    $sql = "INSERT INTO `users`(`name`,`profile_image`) VALUES(?,?)";
    $statement = $db->prepare($sql);

        if(is_object($statement))
        
            $statement->bindParam(1, $user['name'], PDO::PARAM_STR);
            
            $statement->bindParam(2, $imgnewfile, PDO::PARAM_STR);
            
            $statement->execute();

            if($statement->rowCount())
                return 'success';
            
               

    
    
return 'error';

    
   

【参考方案1】：

你应该检查这部分

   if(response.success)                   

        if(!response.signout)
                setTimeout(function()
                $footer.html( response.message );
                window.location = response.url;
            ,5000);
        

         $footer.html( response.message );

window.location 如果注销为假，会将您重定向到响应网址。您正在从 php 返回 1。我不知道你为什么也注释掉了 php 文件中的 index.php 。那是您希望用户访问的目标网页吗？首先使用 console.log 或 alert 检查响应的内容。

【讨论】：

我在这里寻找的唯一东西就是登录和注册。 Tihis 代码工作正常，期望函数 registerForm($form)...它在模型页脚 div 内的 url 页面上显示消息...谢谢。是的，我已经对 index.php 进行了注释，因此它将作为 'signout' => 1,