Ajax异步刷新局部页面的小李子

看到下面那幅图没有，我们要的是当点击确定以后，根据条形码搜索出商品信息，并且异步刷新右边页面：

再来个小李子：

这个页面呢，就是输入ICCID信息之后，鼠标离开input框之后，立即刷新认证信息填写表单，当然都是用Ajax，区别仅是触发jQuery事件的方式不同；

HTML:

 <table class="splr_table" width="100%" cellpadding="0" cellspacing="0">
     <tr>
         <td align="right">按条形码搜索：</td>
         <td>
          <input class="pp_text" type="text" name="" value="{$info.bar_code}" id="txtBarcode" style="float: left;"  />
          <input class="tj-button" onclick="search_bar_code({$info.goods_id})" type="button" id="btnMatch" value="确定" />
         </td>
     </tr>

Ajax:

 function search_bar_code(id)
     {    //根据条形码搜索商品信息
         var bar_code = parseInt($('#txtBarcode').val());
         $.ajax({
             url:"{:U('Goods/search_bar_code')}",
             type:'post',
             dataType:'json',
             data:{'id':id,'bar_code':bar_code},
             success:function(res){
                 if(res.notice == 'ok' && res.html){
                     $('#goodsForm').html(res.html);
                 }else{
                     alert(res.notice);
                 }
             }
         });
     }

然后就是接口函数：

 <?php

 namespace Supplier\Controller;
 use Think\Controller;

 class GoodsController extends CommonController {
     /* 根据条形码找出商品信息 */
     function search_bar_code()
     {
         if(IS_AJAX){
             $input = I('post.');
             $id = intval($input['id']);
             $bar_code = intval($input['bar_code']);
             $service_id = $_SESSION['service_site']['service_id'];
             $g = D('goods');
             $info = $g->where("bar_code = $bar_code")->find();
             $res = array('notice'=>'ok');
             if($info){
                 $date = date('Y-m-d',time());
                 $path = C('UNLINK_PATH').$date.'/';
                 if(!file_exists($path)){
                     mkdir($path);   //如果不存在图片目录则创建
                 }
                 $tmp_img = array();
                 for($i = 1;$i < 7;$i++){
                     $f_name = 'thumb'.$i;
                     if(array_key_exists($f_name,$info) && $info[$f_name]){  //如果取出的商品有图片则进行copy
                         $old_img = C('UNLINK_PATH').$info[$f_name];
                         if(file_exists($old_img)){
                             $tmp = explode('.',$old_img);
                             $ext = end($tmp);
                             $new_img = uniqid().'.'.$ext;
                             $f = copy($old_img,($path.$new_img));
                             if($f){ //如果复制成功则记录新的图片
                                 $tmp_img[$f_name] = $date.'/'.$new_img;
                                 $info[$f_name] = $tmp_img[$f_name];
                             }else{
                                 $this->log_add(array('content'=>'根据条形码搜索','des'=>'复制图片出错'));
                             }
                         }
                     }
                 }
                 if(count($tmp_img) > 0){    //更新商品图片信息
                     $f = $g->where("goods_id = $id")->save($tmp_img);
                     if(!$f){
                         $this->log_add(array('content'=>'根据条形码搜索','des'=>'保存图片信息出错'));
                     }
                 }
                 $info['goods_id'] = $id;
                 //取出供应商与栏目列表start
                 $c = D('Category');
                 $category_1 = $c->where('parent_id = 0')->select();
                 $this->assign('category_1',$category_1);
                 if($info['category_1']){
                     $this->assign('category_2',$c->where('parent_id = %d',$info['category_1'])->select());
                     if($info['category_3']){
                         $this->assign('category_3',$c->where('parent_id = %d',$info['category_2'])->select());
                     }
                 }
                 //取出供应商与栏目列表end
                 $this->assign('info',$info);
                 $html = $this->fetch('goods_ajax');
                 $res['html'] = $html;
             }else{
                 $res['notice'] = '没有该条形码信息';
             }
             $this->ajaxReturn($res,'JSON');
         }
     }
 }

  $html = $this->fetch('goods_ajax');

其实这句话才是关键，他是将局部页面（需要异步刷新的部分）整个fetch（display呢就是将HTML页面代码获取过来并输出，而fetch呢就是将代码获取过来但是并不做输出）然后将整个页面的代码作为json数据（$res['html'] = $html;）传输过去。