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

Question

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

我创建了一个名为newsletterid的表，其中包含 3 列：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);

更新

添加 echojson_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();
      }
    }
  });
}

我该如何解决这个问题？

标签： javascriptphpjqueryajaxcodeigniter

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();
                    }
                }
...