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个值