如何通过ajax将隐藏字段值传递给codeigniter控制器

Question

我有一个包含按钮(链接)的视图文件：

<a href id="savebutton" class="btn btn-warning">Save</a>

在这个视图的其他地方，我还在一个表单中声明了一些隐藏字段，其中包含我的userid和vacancyid。

echo form_input(dataHiddenArray('userid', $this->auth_user_id));
echo form_input(dataHiddenArray('vacancyid', $vacancydetails[0]->vacancy_id));

这些隐藏字段转换为：

<input type="hidden" value="2" class="userid">
<input type="hidden" value="1" class="vacancyid">

现在，我希望能够将这些值发送到我的控制器(通过AJAX)，这样我就可以将它们插入到数据库中。

我的JS文件如下所示：

$(function() {
    var postData = {
        "userid" : $("input.userid").val(),
        "vacancyid" : $("input.vacancyid").val()
    };                                        
        btnSave = $('#savebutton'),
        ajaxOptions = {
            cache: false,
            type: 'POST',
            url: "<?php echo base_url();?>dashboard/vacancy/saveVacancy",
            contentType: 'application/json',
            dataType: 'text'
        };

    btnSave.click(function (ev) {
        var options = $.extend({}, ajaxOptions, {
            //data : $(this).closest('form').serialize()
            data: postData
        });
        ev.preventDefault();

        // ajax done & fail
        $.ajax(options).done(function(data) {
            alert(data);        // plausible [Object object]
            //alert(data[0]);     // plausible data
            console.log(data);  // debug as an object
        }).fail(function (xhr, status, error) {
            console.warn(xhr);
            console.warn(status);
            console.warn(error);
        });
    });

我的控制器看起来像这样(它没有做很多事情，因为它没有返回任何东西)：

public function saveVacancy() {
        //$this->load->model('user/usersavedvacancies_model');
        /*$data = array(
            'userid' => $this->input->post('userid'),
            'vacancyid'=>$this->input->post('vacancyid')
        );*/
        echo $this->input->post('userid');
    }

Answer 1

对javascript的细微更改

$(function () {
    var postData = {
        "userid": $("input.userid").val(),
        "vacancyid": $("input.vacancyid").val()
    };
    btnSave = $('#savebutton'),
      ajaxOptions = {
          type: 'POST',
          url: "<?php echo base_url('dashboard/vacancy/saveVacancy);?>",
          dataType: 'json'
      };

    btnSave.click(function (ev) {
        var options = $.extend({}, ajaxOptions, {
            //data : $(this).closest('form').serialize()
            data: postData
        });
        ev.preventDefault();

        // ajax done & fail
        $.ajax(options).done(function (data) {
            console.log(data);  // debug as an object
            if (data.result === 'success') {
                alert("Yeah, it saved userid " + data.userid + " to vacancy id " + data.vacancyid);
            }
        }).fail(function (xhr, status, error) {
            console.warn(xhr);
            console.warn(status);
            console.warn(error);
        });
    });
});

在控制器中

public function saveVacancy()
{
    //assigning a more useable object name to the model during load
    $this->load->model('user/usersavedvacancies_model', 'save_vacancy'); 

    $data = array(
        'userid' => $this->input->post('userid'),
        'vacancyid' => $this->input->post('vacancyid')
    );
    //send data to model and model returns true or false for success or failure
    $saved = $this->save_vacancy->doSaveId($data); //yes, I made up the method, change it
    $result = $saved ? "success" : "failed";
    echo json_encode(array('result' => $result, 'userid' => $data['userid'], 'vacancyid' => $data['vacancyid']));
}

Answer 2

你需要理解$.ajax有两个方法，即GET和POST，从文档中你可以看到默认的方法是GET，因为你没有定义GET/POST方法，所以这个方法可能是GET，所以第一个改变是定义要POST的ajax方法，你也需要清楚ajax的dataType，它可能是JSON/html之一，默认是json。

$.ajax({
  method: "POST",
  url: url,
  data: data,
  dataType:'html'

});

我想这有助于您从Learn more中了解细节。