Thinkphp ajax查询数据局部刷新 demo

浏览：2812 发布日期：2018/07/25 分类：功能实现关键字： Thinkphp ajax查询局部刷新 demo

Thinkphp ajax查询数据局部刷新 demo 交流程序员QQ：467477957
html代码：

    <form method="post" name="form1" enctype="multipart/form-data">



    <div class="col-md-4">

       <p class="bg-info">

    </p><div class="col-md-12 input-group">

      <span class="input-group-btn">

        <button class="btn" type="button">关键字</button>

      </span>

      <input type="text" name="keywords" class="form-control" id="keywords" placeholder="物品名称">

    </div><!-- /input-group -->

      <p></p>

    </div>

    <!-- 2 搜索按钮 --> 

    <div class="col-md-2">

     <p class="bg-info">

     </p><div><button id="submit" type="button" class="btn btn-danger">搜    索</button></div>

     <p></p>

    </div>

     <div class="col-md-2">

     <p class="bg-info">

     </p><div><button type="reset" class="btn btn-info">清    空</button></div>

     <p></p>

    </div>

    </form>



      <table class="table table-bordered text-center" style="font-size:20px;font-weight:bold;" id="tab">

        

          <tbody>

          

          <tr>

                <td class="bg-primary">操作</td>

                <td class="bg-primary">序号</td>

                <td class="bg-primary">物品编号(ID)</td>

                <td class="bg-primary">物品名称</td>

                <td class="bg-primary">规格型号</td>

                <td class="bg-primary">单位</td>

                <td class="bg-primary">检验类型</td>

                

          </tr>

          

          

          <volist name="list" id="vo">

          <tr class="data">     

                <td class="bg-success"><button type="button" class="btn btn-success" data-dismiss="modal">选择</button></td>          

                <td class="bg-success">{$vo.id}</td>

                <td class="bg-success">{$vo.num}</td>

                <td class="bg-success">{$vo.name}</td>

                <td class="bg-success">KM18</td>

                <td class="bg-success">个</td>

                <td class="bg-success">全检</td> 

                

          </tr>

         </volist>

         

         <tr class="apend"></tr>

          

          </tbody>

          </table>

Jquery ajax代码：

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("#submit").click(function(){

   

   

    var keywords = $('#keywords').val();

    //alert(keywords);

   

   jQuery.ajax({

   type: "POST",

 

   url: "__ROOT__/index.php/Index/search", 

   data: {keywords:keywords}, 

   cache: false,

   success: function(msg){

   //alert(msg);

   $(".data").remove();

   

   

         

   str =' <tr>';

    str +=           ' <td class="bg-primary">操作</td>';

        str +=        '<td class="bg-primary">序号</td>';

        str +=        '<td class="bg-primary">物品编号(ID)</td>';

        str +=        '<td class="bg-primary">物品名称</td>';

            str +=    '<td class="bg-primary">规格型号</td>';

            str +=    '<td class="bg-primary">单位</td>';

             str +=   ' <td class="bg-primary">检验类型</td>';

                

         str +=   '  </tr>';

          

  

  $.each(JSON.parse(msg), function(idx, obj) {

  

 // alert(obj.name);

  

  str += '<tr class="apend">' ; 

  str += "<td class='bg-success'><button type='button' class='btn btn-success' data-dismiss='modal'>选择</button></td>";          

                str += "<td class='bg-success'>"+obj.id+"</td>";

                str += "<td class='bg-success'>"+obj.num+"</td>";

                str += "<td class='bg-success'>"+obj.name+"</td>";

                str += "<td class='bg-success'> </td>";

                str += "<td class='bg-success'> </td>";

                str += "<td class='bg-success'> </td>"; 



 str += '</tr>'; 

  });

  

        $('table tbody').html(str);

        

   }

});

 

});   



});

</script>

IndexAction.class.php控制器代码：

<?php

class IndexAction extends Action {

    public function index(){



    $Dao = M("demo");

    

    // 查询数据

    //$list = $Dao->where("tel='$_SESSION[tel]'")->select();

    $list = $Dao->order('id ASC')->select();

    //dump($list);    // 用 dump() 可以在调试阶段查看数据是否已读取



    // 模板变量赋值

    $this->assign("list", $list);

    $this->display('default/Index/index');

    

    }

    

    public function search(){

    //echo $_POST[keywords];

    

    header("Content-type:text/html;charset=utf-8");

    $keywords=$_POST['keywords'];



    $Dao = D("demo");

    // 查询数据

    

    $where['name']=array('like',"%{$_POST[keywords]}%");



    //$where['name']=array('like',"%可口可乐%");

    

    $list = $Dao->where($where)->select();



    $json_string = json_encode($list);   

    echo $json_string; 

    

    }

}

SQL数据表结构和数据：

--

-- 表的结构 `think_demo`

--



CREATE TABLE IF NOT EXISTS `think_demo` (

  `id` int(11) NOT NULL,

  `num` varchar(255) CHARACTER SET utf8 NOT NULL,

  `name` varchar(255) CHARACTER SET utf8 NOT NULL,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;



--

-- 转存表中的数据 `think_demo`

--



INSERT INTO `think_demo` (`id`, `num`, `name`) VALUES

(1, 'WP6', '可口可乐'),

(2, 'WP4', '钢板'),

(3, 'WP3', '钢板'),

(4, 'WP2', '尼龙棒'),

(5, 'WP2', '锁紧螺母'),

(6, 'MP2', '焊接弯头'),

(7, 'WP9', '可口可乐'),

(8, 'WP12', '可口可乐');