如何让 jQuery 脚本知道 Codeigniter 变量？

Question

我一直在使用 CodeIgniter 3.1.8 和 Twig 开发博客应用程序。我目前正在制作时事通讯订阅系统。

我创建了一个名为 newsletter 的表，其中包含 3 列：id、email 和 subscription_date。

时事通讯订阅表格：

<div id="messags" class="is-hidden h-text-center">
  <div class="success is-hidden alert-box alert-box--success">You have successfully subscribed to our newsletter</div>
  <div class="fail is-hidden alert-box alert-box--error">Sorry, the newsletter subscription filed</div>
</div>
<form name="newsletter" method="post" action="{{base_url}}newsletter/subscribe" id="newsletterForm" class="group" novalidate>
  <input type="email" value="{{set_value('email') | striptags}}" name="email" class="email" data-rule-required="true" placeholder="Your Email Address"> 
  <input type="submit" name="subscribe" value="subscribe">
</form>

Newsletter_model 模型：

class Newsletter_model extends CI_Model {
    public function subscriber_exists() {   
        $query = $this->db->get_where('newsletter', ['email' => $this->input->post('email')]);
        return $query->num_rows() > 0;
    }

    public function add_subscriber() {
        $data = [
            'email' => $this->input->post('email'),
            'subscription_date' => date('Y-m-d H:i:s')
        ];
        return $this->db->insert('newsletter', $data);
    }
}

正如您在上面看到的，我使用subscriber_exists() 来确保没有重复的电子邮件。

Newsletter 控制器非常简单：

class Newsletter extends CI_Controller {
  public function __construct(){
        parent::__construct();
    }

  public function subscribe(){
    $data['is_new_subscriber'] = true;
    if (!$this->Newsletter_model->subscriber_exists()) {
      $this->Newsletter_model->add_subscriber();
    } else {
      $data['is_new_subscriber'] = false;
    }
  } 
}

问题

我使用 jQuery AJAX 提交表单，脚本不知道 is_new_subscriber 变量：

(function($) {

    // Add subscriber via AJAX
    $("#newsletterForm").validate({
        rules: {
            email: {
                email: true
            }
        },

        submitHandler: function(form) {
            var form = $("#newsletterForm"),
                $fields = form.find('input[type="email"]'),
                url = form.attr('action'),
                data = form.serialize();
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                success: function() {
                    $('#messags').slideDown(250).delay(2500).slideUp(250);
                    if (is_new_subscriber == true) {
                        $fields.val('');
                        $('#messags .success').show();
                    } else {
                        $('#messags .fail').show();
                    }
                }
            });
        }
    });

})(jQuery);

更新

将 echo json_encode($data) 添加到 subscribe() 并将 submitHandler 更改为以下 ddi 不会解决问题：

submitHandler: function(form) {
  var form = $("#newsletterForm"),
  $fields = form.find('input[type="email"]'),
  url = form.attr('action'),
  data = form.serialize();
  $.ajax({
    dataType: "json",
    type: "post",
    url: url,
    data: data,
    success: function() {
      $('#messags').slideDown(250).delay(2500).slideUp(250);
      $fields.val('');
      if (data.is_new_subscriber == true) {
        $('#messags .success').show();
      } else {
        $('#messags .fail').show();
      }
    }
  });
}

我该如何解决这个问题？

Answer 1

在您填充 $data 变量后，您的代码不会对其执行任何操作。例如，您可以将其返回 JSON 编码。

  public function subscribe(){
    $data['is_new_subscriber'] = true;
    if (!$this->Newsletter_model->subscriber_exists()) {
      $this->Newsletter_model->add_subscriber();
    } else {
      $data['is_new_subscriber'] = false;
    }
    echo json_encode($data);
  }

那么，在你的JS代码的成功回调中，你需要引用它：

...
                success: function(data) {
                    $('#messags').slideDown(250).delay(2500).slideUp(250);
                    if (data.is_new_subscriber == true) {
                        $fields.val('');
                        $('#messags .success').show();
                    } else {
                        $('#messags .fail').show();
                    }
                }
...

Answer 2

这对我有用：

在控制器中，我添加了echo json_encode($data)：

class Newsletter extends CI_Controller {
  
  public function __construct() {
        parent::__construct();
    }

  public function subscribe(){
    $data['is_new_subscriber'] = true;
    if (!$this->Newsletter_model->subscriber_exists()) {
      $this->Newsletter_model->add_subscriber();
    } else {
      $data['is_new_subscriber'] = false;
    }
    echo json_encode($data);
  }
}

脚本：

(function($) {

  // Add subscriber via AJAX
  $("#newsletterForm").validate({
    rules: {
      email: {
        email: true
      }
    },

    submitHandler: function(form) {
      var form = $("#newsletterForm"),
      $fields = form.find('input[type="email"]'),
      url = form.attr('action'),
      data = form.serialize();
      $.ajax({
        dataType: "json",
        type: "post",
        url: url,
        data: data,
        success: function(response) {
          $('#messags').slideDown(250).delay(2500).slideUp(250);
          $fields.val('');
          if (response.is_new_subscriber === true) {
            $('#messags .success').show();
             $('#messags .notnew').hide();
          } else {
            $('#messags .notnew').show();
          }
        },
        error: function() {
          $('#messags .fail').show();
        }
      });
    }
  });

})(jQuery);

HTML：

<div id="messags" class="is-hidden h-text-center">
    <div class="success is-hidden alert-box alert-box--success">You have successfully subscribed to our newsletter</div>
    <div class="notnew is-hidden alert-box alert-box--info">You are already subscribed</div>
    <div class="fail is-hidden alert-box alert-box--error">Sorry, the newsletter subscription filed</div>
</div>