ajax的应用

<select class="form-control slide" name="select" id="" style="width:100px">
 <volist name="slide" id="vo" key="k"> <option value="{$vo.id}" >{$vo.member}</option> </volist> </select> <form class="js-ajax-form" method="post"> <table class="table table-hover table-bordered table-list"> <thead> <tr> <th width="16"> <label>
 <input type="checkbox" class="js-check-all" data-direction="x" data-checklist="js-check-x"> </label> </th> <th width="100">ID</th> <th>公司名称</th> <th>总经理</th> <th width="80">协会职务</th> <th width="160">信息化平台</th> <!-- <th width="80">项目记分</th> --> <th width="80">企业记分</th>
 <th width="120">操作</th> </tr> </thead> <tbody id="tbody"> <volist name="list" id="vo" key="k"> <tr> <th width="16"> <label> <input type="checkbox" class="js-check-all" data-direction="x" data-checklist="js-check-x"> </label> </th> <th width="100">{$k}</th>
 <th>{$vo.name}</th> <th>{$vo.manager}</th> <th width="180">{$vo.duty}</th> <th width="150">{$vo.internet}</th> <!-- <th><if condition="empty($vo.total_score) OR ($vo.total_score==-1000)">未评分<else/>{$vo.total_score}</if></th> --> <th><if condition="$vo.reduce25
 eq 1">出现重大事故评分为0<elseif condition="$vo.total_score eq 0"/>未评分 <else/>{$vo.total_score}</if></th> <th width="180"><a href="{:url('credit/member_pay',array('id'=>$vo['id']))}">缴费</a>|<a href="{:url('member/member_mod',array('id'=>$vo['id']))}">修改</a></th> </tr>
 </volist> </tbody>

  在这里我想实现的功能是点击上方单选框从数据库中把相应的数据检索出来

 public function index()
    {	
    	$slide=Db::name('DrtMember')->order('id','asc')->select();
       //链表查询
     
        $list=$this->member->memberIndex('member_status',1);
        // 获取分页显示
        $page = $list->render();
        $this->assign([
            'slide'=>$slide,
            'page'=>$page,
            'list'=>$list
        ]);

        return $this->fetch();
    }
这是我控制上方单选框的控制器中的方法

public function member_select(){
    	
    		$id=$this->request->post();
            $member=$this->member->memberFind($id['id']);
            $findname=$member['member'];
    		switch ($id['id']) {
    			case 1:
    				$list=$this->member->memberFindAll();
                    echo $list;
    				break;
    			case 2:
    				$list=$this->member->memberSelect('member_status',1);
                     echo $list;
    				break;
    			default :
                    $list=$this->member->memberSelect('duty',"$findname");
                     echo $list;
                    break;
    		}

    }
<?php
// +----------------------------------------------------------------------

// | Author: drt9527 <1017002145@qq.com>
// +----------------------------------------------------------------------
namespace app\credit\model;

use think\Model;
use think\Cache;
use think\Db;

class DrtMemberModel extends Model
{   
    public function memberFindAll()
    {
        $result=Db::view('DrtCompany')->view('DrtCompanyCredit','total_score,reduce25','DrtCompanyCredit.pid=DrtCompany.id','LEFT')->paginate(10);
        $result=json_encode($result);
        return $result;
    }
	public function memberFind($id)
    {
       $result=$this->where('id',$id)->find();
       return $result;
    }
    public function memberIndex($key,$value)
    {
        $result=Db::view('DrtCompany')->view('DrtCompanyCredit','total_score,reduce25','DrtCompanyCredit.pid=DrtCompany.id','LEFT')->where($key,$value)->paginate(10);
        return $result;
    }
    public function memberSelect($key,$value)
    {
        $result=$this->memberIndex($key,$value);
        $result=json_encode($result);
        return $result;
    }
}


这是控制下方显示内容的方法以及在model层封装的数据
 $(".slide").change(function(){ 
        $("#tbody").empty();
        var url="{:url('credit/member/member_select')}";
        var id=$(this).val();
        // alert(id);
        $.post(url,{'id':id},function(res){
            res=res.data;
            
            for(var i=0;i<res.length;i++){
                $("#tbody").append(`<tr><th width="16">
                <label>
                <input type="checkbox" class="js-check-all" data-direction="x" data-checklist="js-check-x">
                </label>
            </th>
            <th width="100">${i+1}</th>
            <th>${res[i].name}</th>
            <th>${res[i].manager}</th>
            <th width="180">${res[i].duty}</th>
            <th width="150">${res[i].internet}</th>
            <th><if condition="$vo.reduce25 eq 1">出现重大事故评分为0<elseif condition="$vo.total_score eq 0"/>未评分
                        <else/>{$vo.total_score}</if></th>
            <th width="180"><a href="{:url('credit/member_pay',array('id'=>$vo['id']))}">缴费</a>|<a href="{:url('member/member_mod',array('id'=>$vo['id']))}">修改</a></th>
            </tr><tr>`);
            }
        },'json');

    });




整个过程是通过ajax将请求发送到相应的控制器中的方法 在该方法中获得数据通过echo或dump等输出函数输出到前台再用js将数据写到前台