Thinkphp ajax查询数据 局部刷新 demo

浏览:351 发布日期: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', '可口可乐');



评论( 相关
后面还有条评论,点击查看>>