如何通过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，因此首先更改定义ajax方法到POST，以及您需要清楚了解ajax的dataType，它可能是JSON / html之一，默认值为json。

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

});

我想这可以帮助您了解更多信息 。