我想显示数据库中的数据。如果我们新添加了一个表单数据，我想在不使用 codeigniter 刷新的情况下附加新的帖子

Question

我有一个显示和隐藏 div。那是一个添加形式。我想显示表格底部表格中的所有数据。无论是否打开表单，都必须显示数据。当我们添加新帖子时，它必须附加在显示数据的顶部而不刷新。

我的看法

    <div class="slidingDiv" style="display:none">


                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box box-primary">
                                <div class="box-header">
                                    <h3 class="box-title">Add Requirement Item</h3>

                                </div><!-- /.box-header -->
                                <!-- form start -->
                               <?php echo validation_errors(); ?>
                               <?php 
                               $attributes = array('id' => 'myForm');
                               echo form_open_multipart(base_url().'moderator/Requirement/add_employee_data',$attributes); ?>
                                    <div class="box-body">
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <label for="txttitle">Requirement Title (Product/Service) : </label>
                                                        </div>
                                                        <div class="col-xs-12">
                                                            <input type="text" name="txtService" class="form-control" id="txttitle" placeholder="Requirement Title (Product/Service) : " value="" required>
                                                        </div>

                                                    </div>
                                                </div> 
                                            </diV>
                                            <div class="col-xs-6">
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-xs-8">
                                                            <label for="txtquantity">Estimated Quantity : </label>
                                                        </div>
                                                        <div class="col-xs-4">
                                                            <label for="txtquantity"></label>
                                                        </div>
                                                        <div class="col-xs-8">
                                                            <input type="text" name="txtQuantity" class="form-control" id="txtquantity" placeholder="Estimated Quantity" value="
                                                                   " required>
                                                        </div>
                                                        <div class="col-xs-4">
                                                          <select class="form-control" name="txtunit" required="required">
                                        <option value="">----Select------</option>
                                        <?php
                                        foreach ($units as $name) {
                                            echo ' <option value="' . $name->id . '">' . $name->name . '</option>';
                                        }
                                        ?>
                                    </select>
                                                        </div>

                                                    </div>
                                                </div> 
                                            </diV>
                                            <div class="col-xs-12">
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <label for="txtdetails">Requirement Details : </label>
                                                        </div>
                                                        <div class="col-xs-12">
                                                            <textarea class="textarea" name="txtRequirement" placeholder="Requirement Details" id="txtdetails" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
                                                        </textarea>
                                                        </div>

                                                    </div>
                                                </div> 
                                            </div>
                                            <div class="col-xs-12">
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-xs-6">
                                                            <label for="sbUser">Expiry of Requirement : </label><br>
                                                            <div class="input-group">
                                                                <div class="input-group-addon">
                                                                    <i class="fa fa-calendar"></i>
                                                                </div>
                                                                <input id="thedate" type="text" name="txtBidclosing" class="form-control"  required="required"/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div><!-- /.box-body -->
                                    <div class="box-footer">
                                   <input type="button" class="button" value="submit" />
                                </form>
                            </div>
                        </div>
                    </div>
            </div>
  <div  id="sort">
<br>
 </div> 

Ajax 代码

<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type:"POST",
  url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
data:$("#myForm").serialize(),
success: function (dataCheck) {
//alert(dataCheck);
$('#sort').append(dataCheck);
//window.location.reload();},
});});});
</script>

型号

public function add_employee_data($data){
$this->db->insert('jil_requirementdetail',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('jil_requirementdetail');
$this->db->where('rqmd_id',$id);
$result = $this->db->get()->result();
return $result;
}

Answer 1

在您的模型上

public function add_employee_data($data){
    $this->db->insert('jil_requirementdetail',$data);
    $id = $this->db->insert_id();
    $this->db->select('*');
    $this->db->from('jil_requirementdetail');
    // $this->db->where('rqmd_id',$id); // get all data 
    $this->db->order_by('rqmd_id','DESC');
    $result = $this->db->get();
    if($result->num_row() > 0)
    {
        echo json_encode(['status'=>'pass','data'=>$result->result()];
    }else{
           echo json_encode(['status'=>'fail']);
         }
 }

关于 Ajax 成功

<script>
  $(document).ready(function(){
    $(".button").click(function(){
      $.ajax({
        type: "POST",
        url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
        data: $("#myForm").serialize(),
        success: function(dataCheck){
          //alert(dataCheck);
          var res = JSON.parse(dataCheck);
          if(res.status=='pass')
          {
              var user_data = res.data;
              var html = '';
              var length = user_data.length;
              for(var i = 0; i < length; i++)
              {
                //your html
                html += '<div>' + user_data[i].name + '</div>'; //add your html structure as you want
              }
              $('#sort').append(html);
            },
       }
      });
    });
  });
</script>