前端javascript发送ajax请求、后台书写function小案例

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

HTML端页面：

<td>
<input class="pp_text" type="text" name="" value="{$info.bar_code}" id="txtBarcode" style="float: left;"/>
<input class="tj-button tj-button2" onclick="search_bar_code({$info.goods_id})" type="button" value="确定" />
</td>

javascript页面（我发现在所有HTML也好，javascriot页面也好，这个ThinkPHP之中的U方法的写法，"{：U（'goods/add'）}"都是通用的;）

<script type="text/javascript">

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);
                }
            }
        });
    }
</script>

现在看看后台的接口程序如何写

 /* 根据条形码找出商品信息 */
     function search_bar_code()
     {
         if(IS_AJAX){
             $input = I('post.');//接受ajax传递过来的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');//
                 $tmp_img = array();
                 $info['goods_id'] = $id;
                 //取出供应商与栏目列表end
                 $this->assign('info',$info);
                 $html = $this->fetch('goods_ajax');
                 $res['html'] = $html;
             }else{
                 $res['notice'] = '没有该条形码信息';
             }
             $this->ajaxReturn($res,'JSON');
         }
     }

第17行的goods_ajax是一个静态HTML模板；fetch的作用的返回已经渲染好的HTML的代码；而display是直接输出渲染号的HTML的代码；

其中的goods_ajax的，只是当前HTML页面需要被刷新的一部分，比如一个table

如下

  <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 tj-button2" onclick="search_bar_code({$info.goods_id})" type="button" id="btnMatch" value="确定" style="margin-top: 0px; margin-bottom: 0px;" />
                 </td>
             </tr>

                     <div class="shop_div">
                         <select id="category_three1" name="data[category_3]" class="splr_select">
                             <option value="0">请选择一级分类</option>
                             <foreach name="category_3" item="v">
                                 <option value="{$v.category_id}" <?php if($v['category_id'] == $info['category_3']){echo 'selected';} ?> >{$v.category_name}</option>
                             </foreach>
                         </select>
                     </div>
                 </td>
             </tr>
             <tr>
                 <td align="right"><span class="red">*</span>商品名称：</td>
                 <td>
                     <div class="oper-find" style="position: relative;">
                         <input name="data[goods_name]" class="sp_name relation_store" value="{$info.goods_name}" type="text" placeholder="请输入/选择商品名称" />
                     </div>
                 </td>
             </tr>

你只需要记住，接口是如何返回数据，如何发送请求给接口函数的，然后又是如何将返回的数据用于局部刷新的

再上一个小小的接口程序：

这次返回的数据比较小;

 /* 处理ajax返回的数据 */
     function set_goods_ajax()
     {
         if(IS_AJAX){
             $input = I('post.');
             $id = intval($input['goods_id']);
             $data = $input['data'];
             $service_id = $_SESSION['service_site']['service_id'];
             $where = "goods_id = $id and service_id = $service_id";
             $g = D('goods');
             $allow_field = array('status','listorder','is_best');
             foreach($data as $k=>$v){   //过滤非法字段，虽然有点多余
                 if(!in_array($k,$allow_field)){
                     unset($data[$K]);
                 }
             }
             $f = $g->where($where)->save($data);
             if($f){
                 $res = array('notice'=>'ok');
             }else{
                 $res = array('notice'=>'修改失败！');
             }
             $this->ajaxReturn($res,'JSON');
         }
     }