laravel7 jqAjax下拉框搜索

html: 设置页面改变事件

<div id="show">

 <div class="page-container" style="width: 300px">
            <label >科室下拉搜索</label>
            <div>
                <select name="interest"  id="serarch" onchange="serch()"  class="input-text"  >
                    <option value="老年人套餐">老年人套餐</option>
                    <option value="儿童套餐">儿童套餐</option>
                </select>
            </div>
        </div>

</div>

引入jq,触发Ajax

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">


    function serch() {
        //     获取下拉框的分类值
        var value=$('#serarch').val();
        //发送值
        $.ajax({
            "url":"/package/serarch",
            "data":{value},
            'dataType':'json',
            "type":"POST",
            success:function (res) {
                console.log(res)
                if (res.code==200){
                    var data = res.data;
                    var  str="<table>";
                    str += "<th>ID</th>";
                    str += "<th>套餐名称</th>";
                    str += "<th>套餐类型</th>";
                    str += "<th>适用院区</th>";
                    str += "<th>套餐价格</th>";
                    str += "<th>套餐项目</th>";
                    str += "<th>操作</th>";
                    for (var i=0;i<data.length;i++){
                        str +="<tr><td>"+data[i].id+"</td><td>"+data[i].Package_name+"</td><td>"+data[i].type+"</td><td>"+data[i].yuan+"</td><td>"+data[i].price+"</td><td>"+data[i].price+"</td><td>"+data[i].project+"</td></tr>"
                    }
                    str+="</table>";
                    $("#show").html(str);
                    $("tr:odd").css('background-color','');
                    $("tr:even").css('background-color','');
                    $("tr:eq(0)").css('background-color','');
                    $("table").css('border','1px solid red');
                }
            }
        })



    }

</script>

设定路由

//下拉搜索
    Route::post('package/serarch','PackageController@serarch');

控制器:

    public function serarch(Request $request){
//        接受值
        $data=$request->post('value');
//        进行查询
        $res=Package::where('type',"=","$data")->get();
//        返回结果
        return ['code'=>200,'data'=>$res,'msg'=>'success'];
    }

效果图

 

posted @ 2021-12-14 21:49  王越666  阅读(53)  评论(0编辑  收藏  举报