ajax 實現無重新整理搜尋
阿新 • • 發佈:2020-12-04
html頁面:
<divclass="header-search"> <aid='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個值