laravel adminlte3 使用ajax + 模态框 实

1. 模态框点击按钮

<button type="button" class="btn btn-primary btn-sm keep_tasks" data-toggle="modal" data-target="#keepM"
                                                task-id="{{$sub_task->id}}" cate-id="{{$sub_task->cate_id}}"
                                        >

2. 模态框html

        <!-- 模态框（Modal） -->
          <div class="modal fade" id="keepM" tabindex="-1" role="dialog" aria-labelledby="keepMLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="keepMLabel">
                            延续任务
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <form  role="form" action="/SMP_Board_Task/continue" method="POST">
                        {{csrf_field()}}
                        <input type="hidden" name="uri" value="{{$uri}}">
                        <div class="modal-body" id="continueContent">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
          </div>

3. 点击事件

  $(".keep_tasks").click(function (event) {
      target = $(event.target);
      var task_id = target.attr("task-id");
      var cate_id = target.attr("cate-id");
      $.ajax({
          url: "/SMP_Board_Task/get_continue/" + task_id,
          method: "POST",
          data: {"cate_id": cate_id},
          dataType: "json",
          success: function success(data) {

              var html = "<input type='hidden' name='task_id' value='" + task_id + "'>\n" +
                  "<div class=\"form-group\">\n" +
                  "<label>类别</label>\n" +
                  "<select class=\"form-control\" name=\"cate_id\">";

              if(data.length > 0) {
                  for(var i=0;i<data.length;i++){ //遍历data数组
                      var ls = data[i];
                      html +="<option value='"+ ls.id +"'>"+ ls.name +"</option>";
                  }
              } else {
                  html +="<option value='0'> 无版本可选择 </option>";
              }

              html +=" </select>\n" +
                  "</div>";

              $("#continueContent").html(html);
          }
      });
  });

4. 后端返回数据

    public function getContinues(Request $request)
    {
        $cate_id = $request['cate_id'];
        $category = DB::table('category')->where('id', $cate_id)->first();

        $version = DB::table('category')
            ->where([
                ['project_id', $category->project_id],
                ['pid', $category->pid],
                ['created_at', '>', $category->created_at]
            ])
            ->orderBy('created_at','desc')
            ->get()
            ->toJson();
        return $version;
    }

5. 效果

   
   点击.png