JS------网页前台Ajax弹出模态框、提交后台服务

1.前台html代码片段

<div class="modal fade" id="notice_add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog text" role="document" >
            <div class="modal-content"  >
                <form>
                <div class="modal-header" >
                    <h3 class="modal-title">发布公告</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <input type="hidden" name="notice_guid" value="" id="notice_guid">
                    <input type="hidden" name="istop" value="" id="istop">
                    <input type="hidden" name="isshow" value="" id="isshow">
                    <input type="hidden" name="content" value="" id="content">
                    <input name="_token" type="hidden" value="{{ csrf_token() }}"/>
                    <div class="row">
                        <label class="col-2 text-center mytitle" >标题</label>
                        <input type="text" class="form-control col-9 myinput" id="title" name="title" value="" autocomplete="off" required>
                        <span class="col-sm-1"></span>
                    </div>
                    <div style=" border-top: 1px dashed #ebecec;margin: 10px 0;"></div>
                    <div class="row">
                        <label class="col-2 text-center mytitle" >序号</label>
                        <input type="number" class="form-control col-4 myinput" id="noticesort" name="noticesort" value="100" autocomplete="off">
                        <span class="col-sm-6 mytitle">(请输入数字，序号越大越靠前显示)</span>
                    </div>
                    <div style=" border-top: 1px dashed #ebecec;;margin: 10px 0;"></div>
                    <div class="row">
{{--                        <label class="col-2 text-center mytitle">是否置顶</label>--}}
{{--                        <div class="form-control col-sm-2" style="border: none">--}}
{{--                            <input type="checkbox" class="al-toggle-button" id="top" name="top">--}}
{{--                            <div class="form-check form-check-inline">--}}
{{--                                <input class="form-check-input" type="radio" id="istop" name="istop" value="1" checked>--}}
{{--                                <label class="form-check-label">是</label>--}}
{{--                            </div>--}}
{{--                            <div class="form-check form-check-inline">--}}
{{--                                <input class="form-check-input" type="radio" id="istop" name="istop" value="0" >--}}
{{--                                <label class="form-check-label">否</label>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <label class="col-2 text-center mytitle">是否显示</label>
                        <div class="form-control col-sm-2" style="border: none">
                            <input type="checkbox" class="al-toggle-button" id="show" name="show" checked>
{{--                            <div class="form-check form-check-inline">--}}
{{--                                <input class="form-check-input" type="radio" id="isshow" name="isshow" value="1" checked>--}}
{{--                                <label class="form-check-label">是</label>--}}
{{--                            </div>--}}
{{--                            <div class="form-check form-check-inline">--}}
{{--                                <input class="form-check-input" type="radio" id="isshow" name="isshow" value="0" >--}}
{{--                                <label class="form-check-label">否</label>--}}
{{--                            </div>--}}
                        </div>
                        <span class="col-sm-4"></span>
                    </div>
                    <div style=" border-top: 1px dashed #ebecec;margin-bottom: 10px;"></div>
                    <div class="row">
                        <label class="col-2 text-center mytitle" >内容</label>
                        <div id="mycontent"  style="color: #000">

                        </div>
{{--                        <textarea type="text" rows="8" class="form-control col-9 myinput" name="content" id="content" placeholder="请输入内容"></textarea>--}}
                        <span class="col-sm-1"></span>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">取  消</button>
                    <button type="button" class="btn btn-primary notice_add">发  布</button>
                </div>
                </form>
            </div>
        </div>
    </div>

2.Ajax逻辑处理（采用sweetalert2消息弹框样式）

<script type="text/javascript">
      <link href="{{asset('static/admin/css/vendor/sweetalert2.min.css')}}" rel="stylesheet" type="text/css"/>

       //弹出模态框
       $(".addModal").click(function () {
           editor.txt.clear();
           $.ajax({
               //请求方式
               type: "get",
               //请求地址
               url: $("#com-url").val()  + "/notice/create",
               //请求成功
               success: function (result) {
                   var res = JSON.parse(result);
                   if (res.status == "201") {
                       $('#notice_guid').val(res.data);
                       $('#notice_add').modal('show');
                   } else {
                       alert("请求错误！")
                   }

               },
               //请求失败，包含具体的错误信息
               error: function (e) {
                   console.log(e.status);
                   console.log(e.responseText);
               }
           });
       });


        //post方法向后台服务发送数据
       $(".notice_add").click(function () {
           if(document.getElementById("show").checked == true)
           {
               $("#isshow").val(1);
           }
           else
           {
               $("#isshow").val(0);
           }
           $("#istop").val(0);

           $("#content").val(editor.txt.html());
           var data = $(this).parents("form").serialize();
           $.ajax({
               //请求方式
               type: "post",
               //请求地址
               url: $("#com-url").val()  + "/notice_add",
               data:data,
               headers: {
                   'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
               },
               //请求成功
               success: function (result) {
                   var res = JSON.parse(result);
                   $('#notice_add').modal('hide');
                   if (res.status == "201") {
                       Swal({
                           title: "发布成功",
                           type: "success",
                           showConfirmButton: false,
                           showConfirmButton: false
                       });
                       setTimeout(function(){  //使用  setTimeout（）方法设定定时1000毫秒
                           location.reload();;//页面刷新
                       },1000);
                   } else {
                       Swal({
                           title: "发布失败",
                           // text: "你点击这个按钮",
                           type: "error",
                           showConfirmButton: false,
                           showConfirmButton: false
                       });
                       setTimeout(function(){  //使用  setTimeout（）方法设定定时1000毫秒
                           location.reload();;//页面刷新
                       },1000);
                   }

               },
               //请求失败，包含具体的错误信息
               error: function (e) {
                   console.log(e.status);
                   console.log(e.responseText);
               }
           });
       });
   </script>

3.php后台服务接收数据

/**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        $obj= new NoticeBll();

        //Guid主键
        $guid=$obj->getNewGuid();

        echo SuccessJson($guid);
        
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $input=$request->all();

        $obj=new NoticeBll();
        $result=$obj->store($input);
        if($result=='true'){
            echo SuccessJson();
        }
        else{
            echo ErrorJson();
        }
    }



//config/function公共配置文件
function SuccessJson($data = [], $msg = '操作成功')
{
    $data = [
        'status' => 201,
        'msg' => $msg,
        'type' => 'json',
        'token' => '',
        'data' => $data
    ];
    return json_encode($data);
}

function ErrorJson($data = [], $msg = '操作失败')
{
    $data = [
        'status' => 501,
        'msg' => $msg,
        'type' => 'json',
        'token' => '',
        'data' => $data
    ];
    return json_encode($data);
}