javascript - 如何将 anchor 标记的 data-id 值传递给 Codeigniter Controller 函数并在数据模型中显示结果？

Question

我正在开发 Code-Igniter 项目，我正在尝试显示 anchor 标记的点击事件的数据。为此，我使用 AJAX 将 data-index 值传递给 Controller 和 Model。之后我得到了结果，但结果没有显示在 modal-box 中。

这是我的代码:

查看:

<a id="propDetail" name="propDetail" data-toggle="modal" 
    data-index="<?= $property->property_id; ?>" 
    title="Details of <?= $property->property_code; ?>" 
    data-target="#myModal" class="open-Details">
    <?= $property->property_code; ?>
</a>

AJAX 代码:

<script type="text/javascript">
$('.open-Details').click(function() {
    $.ajax({
      url : '<?= base_url(); ?>property',
      data: {
        propDetail: $(this).data("index")
      },
      type: "POST",
      success: function(data) {
        console.log('success');
        console.log(data);
      }
    });
  });
</script>

我将值放入 Controller 的变量中。

Controller 代码:

public function index()
    {   

        $user = $this->ion_auth->user()->row();
        $data['username'] = $user->username;
        $data['user_id'] = $user->id;

        $id=$this->input->post('property_id');
        $area=$this->input->post('area_id');
        $cluster=$this->input->post('cluster_id');
        if( $area =='') {
            $area =0;
        }
        if($cluster == ''){
            $cluster=0;
        }

        $propDetail = $this->input->post('propDetail');

        $data['areas'] = $this->p->area();
        $data['clusters'] = $this->p->cluster();
        //$data['clusters'] = $this->p->clusterAll($area);
        $data['title'] = 'Property List';

        $data['properties'] = $this->p->getPropertyByAreaCluster($area, $cluster);
        $data['propDetails'] = $this->p->defectsView($propDetail);

        $this->load->view('template/header', $data);
        $this->load->view('Property/property_view', $data);
        $this->load->view('template/footer');
    }

型号代码:

public function defectsView($propDetail)
   {
        $query = $this->db->query("call modalView(?)", $propDetail);
        if ($query) {
            $data = $query->result();
            $query->next_result(); 
            $query->free_result();
            return $data;
        } else {
            return false;
        }
   }

如果我将硬编码值传递给过程(我正在使用存储过程)，我就会得到结果。

这是我的模态视图:

<div class="modal fade displaycontent" id="myModal">
  <div class="modal-dialog" id="propertyDetails" role="document">
    <div class="modal-content displaycontent">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Property Datails of</h4>
      </div>
      <div class="modal-body">
        <table class="table table-striped ">
          <tbody>
            <?php if($propDetails) { 
              foreach ($propDetails as $propDetail) { ?> 
              <tr>
                <td>Property Code:</td>
                <td><?= $propDetail->property_code; ?></td>
              </tr>
              <tr>
                <td>Defect Added DAte :</td>
                <td><?= $propDetail->property_added_date; ?></td>
              </tr>
              <tr>
                <td>Room ASYS No.:</td>
                <td><?= $propDetail->property_ASYS_no;?></td>
              </tr> 
              <tr>
                <td>Address:</td>
                <td><?= $propDetail->property_address_1;?></td>
              </tr> 
              <tr>
                <td>Room Count:</td>
                <td><?= $propDetail->rooms;?></td>
              </tr> 
              <tr>
                <td>Defect Count:</td>
                <td><?= $propDetail->defects;?></td>
              </tr> 
            <?php } } ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

编辑: 这是我的输出:

我不明白，我在哪里犯了错误。欢迎任何形式的帮助，提前致谢。

Answer 1

由于您是通过 AJAX 发送响应，因此您需要回显输出。否则 ajax 将得到空白响应。

还取决于您发送响应的方式，在 ajax 中添加 dataType。 例如:发送 html 响应添加 dataType:'html'，如果发送 json 响应添加 dataType : 'json'

JS 代码:

<script type="text/javascript">
$('.open-Details').click(function() {
    $.ajax({
      url : '<?= base_url(); ?>property',
      data: {
        propDetail: $(this).data("index")
      },
      dataType :"html"
      type: "POST",
      success: function(data) {
        console.log('success');
        console.log(data);
      }
    });
  });
</script>

PHP 代码:

echo $this->load->view('Property/property_view', $data,true);