ajax 实现无刷新搜索

html页面:


  <div class="header-search">
      <a id=‘search_btn‘ href="javascript:;">搜索</a>
  </div>

<
div class="s-wrap"><!--搜索--> <div class="content"> <input id=‘search‘ placeholder="请输入内容" type="text"> <table> <thead> <tr> <td>日期</td> <td>订单状态</td> <td class="dd-num">订单编号</td> <td class="dd-pro">产品</td> <td >SKU</td> <td class="dd-shi">平台售价</td> <td>进货成本</td> <td>国际运费</td> <td>货代</td> <td>平台扣费</td> <td>其他</td> <td>净利润</td> <td>操作</td> </tr> </thead> </table> <form class="one-search"> <table> <tbody> <tr class="search_show"> <!--搜索出来的数据显示在这里--> </tr> </tbody> </table> </form> </div> </div> <script> $(function(){ $(#search_btn).click(function(){ $(.s-wrap,.add-l-wrap).show(); }) $(.add-l-wrap).click(function(){ $(.s-wrap,.add-l-wrap).hide(); }) }) $("#search").keyup(function(){ search() }); //搜索功能,提交ajax数据到后台 function search(){ var html =‘‘ // var key = // var arr=new Array(); // arr[‘key‘]= $("#search").val(); // arr[‘company_id‘]= {$company_id}; // arr[‘country_id‘]= {$country_id}; var arr = {params:[$("#search").val(),{$company_id},{$country_id}]};//由于是多个参数,必须拼接数据传给后台 // var a = JSON.stringify(arr); console.log(arr); // var datas = ‘key=‘+key; // console.log(datas); $.ajax({ url: {:url("Detail/search")}, data: arr, type: POST, dataType: json, success: function (data) { if(data.code==1){ $.each(data.data,function(no,items){ //这一步是显示数据的关键,each方法可以遍历二维数组数据 //data.data:php返回的数据; //no:键值; //items:内层数组内容 // var url = "{//:U(‘Index/question‘)}?user_id="+items.id+" //拼接数据 html+= <td><input type="text" name="c_time" value="+items.c_time+"></td>; html+= <td><input type="text" name="is_ok" value="+items.is_ok+"></td>; html+= <td class="dd-num"><input type="text" name="order_num" value="+items.order_num+"></td>; html+= <td class="dd-pro"><input type="text" name="products" value="+items.products+"></td>; html+= <td ><input type="text" name="sku" value="+items.sku+"></td>; html+= <td class="dd-shi"><input type="text" name="platform_income" value="+items.platform_income+"></td>; html+= <td ><input type="text" name="cost" value="+items.cost+"></td>; html+= <td ><input type="text" name="international_freight" value="+items.international_freight+"></td>; html+= <td ><input type="text" name="freight_forwarding" value="+items.freight_forwarding+"></td>; html+= <td ><input type="text" name="platform_deduction" value="+items.platform_deduction+"></td>; html+= <td ><input type="text" name="other1" value="+items.other1+"></td>; html+= <td ><input type="text" readonly="readonly" name="net_profit" value="+items.net_profit+"></td>; html+= <td><a class="oSearchSave" style="display:block" href="javascript:;">保存</a><a href="javascript:;" onclick="return del(+items.id+)">删除</a> </td>; html+= <input type="hidden" name="id" value="+items.id+">; html+= <input type="hidden" name="company_id" value="+items.company_id+">; html+= <input type="hidden" name="country_id" value="+items.country_id+">; }); $(.search_show).html(html)//显示数据,同时覆盖上一次搜索的数据 }else{ $(.search_show).html(<div>暂无数据</div>)//显示数据,同时覆盖上一次搜索的数据 } }, }); } </script>

php部分,我这里用的是tp5

public function search()
    {
        // $request = request()->param();
        // // $company_id = $request[‘com_id‘];
        // // $country_id = $request[‘cty_id‘];
        // halt($request);

        $res[‘code‘] = 0;
        $search_data = request()->param();
        // halt($search_data[‘params‘][0]);
        $where[‘order_num‘] = $search_data[‘params‘][0];//获取参数1
        $where[‘company_id‘] = $search_data[‘params‘][1];//获取参数2
        $where[‘country_id‘] = $search_data[‘params‘][2];//获取参数3
        // halt($where);
        $conn = ‘‘;
        if (!empty($search_data)) {
            // $key[‘order_num‘] = array(‘like‘, ‘%‘ . $search_data . ‘%‘);
            $conn = DetailModel::where($where)->select();//查询精准一条数据
        }
        if ($conn) {
            $res[‘code‘] = 1;
            $res[‘data‘] = $conn;
            $res[‘msg‘] = ‘成功‘;
        } else {
            $res[‘msg‘] = ‘失败‘;
        }
        return $res;//返回数据给前台
    }

ps:我这里是3个参数,如果是一个参数就更简单了

另外使用ajax传多个值也要注意: 用此方法:

var arr = {params:[$("#search").val(),{$company_id},{$country_id}]};//由于是多个参数,必须拼接数据传给后台   这里是3个值

 

ajax 实现无刷新搜索

上一篇:PHP腾讯云人脸核身 接口对接和签名设置


下一篇:spark访问mysql、spark访问hive