CodeIgniter 和 AJAX 表单

Question

我正在为我的网络应用程序使用 CodeIgniter，但我目前被 AJAX 表单所困扰。 我已经为我的“忘记密码”模式创建了一个视图，它看起来像这样：

<form action="<?=base_url()?>users/forgot_pass" method="post" id="forget_pass_form">
    <div class="form_header">
        <h1>Forgot your password?</h1>
    </div>
    <?php if($ajax_error == 0) { ?>
    <div class="front_success">
        <p>Password was succesfully sent to your email address.</p>
    </div>
    <?php } ?>

    <?php if($ajax_error == 1) { ?>
    <div class="login_error">
        <p>Email address was not found in the database.</p>
    </div>
    <?php } ?>

    <div id="loading_spinner"></div>
    <p><input type="text" name="to_email" placeholder="Sähköpostiosoite" class="user" style="background-postion: -200px; margin-top: 20px;" />
    <input type="submit" name="to_submit" value="Lähetä salasana" class="login_submit" id="forget-pass" /></p>
</form>

这是我的控制器：

<?php
    class Users extends CI_Controller {
        public function forgot_pass()
        {
            if(isset($_POST['to_submit'])) {
                    $this->load->model('user');
                    $email = $_POST['to_email'];
                    $email_addr = $this->user->get_email_address($email);

                    if($email_addr) {
                        foreach($email_addr as $row) {
                            $this->load->library('email');
                            $this->email->from('me');
                            $this->email->to($email);  
                            $this->email->subject('Testing');
                            $this->email->message('Your password is: ' . $row['password']); 

                            if(!$this->email->send()) {
                                $data['ajax_error'] = 1;
                            } else {
                                $data['ajax_error'] = 0;                                                                }
                            }
                        }
                    }
                $this->load->view('header');
                $this->load->view('index', $data);
                $this->load->view('footer');

        }   


    }


?>

我不会发布我的模型，因为我知道 100% 肯定它可以工作，而且它只包含一种方法来检查是否在数据库中找到电子邮件。

现在我想通过使用 AJAX 使其更具动态性。如果在数据库中找到电子邮件地址并且已发送邮件，我希望它在 div 中回显成功消息 到该电子邮件地址，否则我希望它回显错误“在数据库中找不到用户”。

这是我现在的 js 文件：

$(document).ready(function() {
    $("form#forget_pass_form").on('submit', function(){
        var from = $(this);
        $.ajax({
            url: from.attr('action'),
            type: from.attr('method'),
            data:$(from).serialize(),
            beforeSend: function(){
                        $("#loading_spinner").show();
                }
        });
        return false;
    }); 
});

AJAX 部分本身正在工作，但我只是不知道如何实现这些消息。任何帮助将不胜感激。

Answer 1

让你的 html 代码像这样

   <div class="front_success" style="display:none">
        <p>Password was succesfully sent to your email address.</p>
    </div>



<div class="login_error" style="display:none">
    <p>Email address was not found in the database.</p>
</div>

控制器的小改动：-

                                if($this->email->send()) {

                                    echo '1';

                                } else {

                                    echo '0';  

                                  }

因此，您的控制器根据该成功函数返回的任何内容都将成为潜水表演

试着让你的 ajax 代码像这样：-

$.ajax({

        url: from.attr('action'),

        type: from.attr('method'),

        data:$(from).serialize(),

        beforeSend: function(){
                        $("#loading_spinner").show();
                },
        success: function (data) {

   //alert(data);  alert it if you want to check the function output

             if(data == '1'){
   //if the email is send then it return 1 so that you show success msg
              $("#login_success").show();

                }else{
  //if the email is not send then it return 0 so that you show error msg
              $("#front_error").show();

               }
$("#loading_spinner").hide();// hide when ajax complete
             }


    });