将 json 对象转换为输入字段

Question

我正在尝试达到一个目标，我不知道我是否采取了正确的方式。 我使用 Codeigniter 在数据库中插入表单数据。我有一个下拉字段，下面一些输入字段可以根据下拉中选择的值显示。下拉列表和输入字段是链接的。我尝试实现的方式使我需要将 json 对象转换为输入字段，因为在下拉结果中进行选择后，如下所示：

[{"name":"NSS"},{"name":"POLIZA"},{"name":"CARNET"}]

如何将上面的结果转换为：

<input  type="text" name="NSS">
<input  type="text" name="POLIZA">
<input  type="text" name="CARNET">

以下是我尝试实现它的方式：

I- 窗体视图。

<form method="post" action="<?php echo site_url('admin/save');?>" >

  <div class="form-group">
    <label>Seguro médico</label>
    <div class="col-sm-6">
      <select name="seguro_medico" id="seguro_medico">
        <option></option>
        <?php 
        foreach($seguro_medico as $row)
            echo '<option value="'.$row->id_ap.'">'.$row->medical_insurance.'</option>';
      ?>
      </select>
    </div>
  </div>

  <div id="seguro_input">
    <?php 
    if (isset($GET_INPUT)) {
        foreach($GET_INPUT as $get_input) {
    ?>
          <div class="form-group">
            <label><?=$get_input->name;?></label>
            <div class="col-sm-6">
              <input  type="text" name="<?=$get_input->name;?>" >
            </div>
          </div>
    <?php
        }
    }
    ?>
  </div>

  <input type="submit" name="send_citas" value="Send">

</form>

II-JQUERY 代码。

$(document).ready(function() {

    $("#seguro_medico").on('change',function(e) {

        e.preventDefault();

        $.ajax({
            url: '<?php echo site_url('admin/get_input');?>',
            type: 'post',
            data: 'seguro_medico='+$("#seguro_medico").val(),
            success: function(data) {
                $("#seguro_input").html(data);
            }
        });
    });
});

III- 控制器 (get_input)。

public function get_input() {

    $seguro_medico=$this->input->post('seguro_medico');
    $query = $this->model_admin->get_input($seguro_medico);
    $data['GET_INPUT'] =$query;
    echo json_encode($query);
}

Answer 1

您的 get_inputfunction 正在返回一个 json 对象，所以...

1. 您必须在 $.ajax 调用中设置该数据类型。

2. 在success函数中，可以取json对象数组，循环写入所有对应的input，维护容器div。

把所有东西放在一起......

$(document).ready(function() {

    $("#seguro_medico").on('change',function(e) {

        e.preventDefault();

        $.ajax({
            url: '<?php echo site_url('admin/get_input');?>',
            type: 'post',
            data: { seguro_medico: $("#seguro_medico").val() },
            dataType: 'json',
            success: function (data) {

                var inputs = [];

                $.each(data,function(id,value) {
                    inputs.push(
                        '<div class="form-group">' +
                          '<label>' + value.name + '</label>' +
                          '<div class="col-sm-6">' +
                            '<input type="text" name="' + value.name + '">' +
                          '</div>' +
                        '</div>'
                    );
                });

                $("#seguro_input").html(inputs.join(''));
            }
        });
    });
});