Laravel 中用jquery dialog ajax进行数据的添加与修改

在laravel 开发中有的时候需要用到jquery ui 中的dialog弹窗插件来完成相应的添加修改信息等操作，接下来我讲解一下我自己的用法，由于接触jquery 时间不长所以可能有点繁琐，顾仅供大家参考，整个过程亲测没有问题。

1.路由设置

//友情链接

Route::resource("links","LinksController");
    Route::post('links/{id}/edit','***Controller@edit');
    Route::post('links/update','***Controller@update');
    Route::post('links/store','***Controller@store');

2.控制器逻辑控制

//添加友情链接 
public function store(Request $request){
    //验证
    $this->validate(request(),[
      'name'=>'required|min:2',
      'href'=>'required|min:10',
    ]);
    //逻辑
    // $name=$request->input('name');
    // $href=$request->input('href');
    $data=$request->except("_token");
    $data['created_at']=date('Y-m-d');
    $result=\DB::table("***")->insert($data);
    if($result){
        return json_encode($data);
    }else{
        echo 0;
    }

}
    public function edit($id){
        $result=\DB::table("***")->find($id);
        if($result){
            return json_encode($result);
        }else{
            return 0;
        }

    }
    //修改数据逻辑
    public function update(Request $request){
        $arr=$request->except("_token");
        $arr['updated_at']=date('Y-m-d');
        if($arr){
            $result=\DB::update('update *** set name=?,href=?,updated_at=? where id=?',[$arr['name'],$arr['href'],$arr['updated_at'],$arr['id']]);
            if($result){
                return json_encode($arr);
            }
        }else{
            echo '<script type="text/javascript">alert("提交的数据不能为空!");history.back();</script>';
        }
    }

3.渲染页面设计与javascript逻辑开发

<div class="cl pd-5 bg-1 bk-gray mt-20">
   <span class="l">
       <a id="dialogK" class="btn btn-primary radius">
           <i class="Hui-iconfont">&#xe600;</i> 添加友情链接
       </a>
   </span>
</div>
<td class="td-status">
   <a title="编辑" href="javascript:;" onclick="member_edit(编辑ID)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>
</td>
<div id="dialog" title="添加友情链接" style="display: none;overflow:hidden;">
    <form class="form form-horizontal" id="dialogForm" action="/admin/links/store" method="post">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>标签名：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" class="input-text" autocomplete="off"  placeholder="标签名" style="width: 200px;" name="name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>超链接：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" class="input-text" autocomplete="off"  placeholder="超链接" style="width: 200px;" name="href">
            </div>
        </div>
    </form>
</div>
<div id="dialogxiu" title="修改友情链接" style="display: none;overflow:hidden;">
    <form class="form form-horizontal" id="dialogFormxiu" action="/admin/links/update" method="post">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" id="dialogxiuid" name="id" value="">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>标签名：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" class="input-text" id="qianming" autocomplete="off"  placeholder="标签名" style="width: 200px;" name="name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>超链接：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" class="input-text" id="chaolianjie" autocomplete="off"  placeholder="超链接" style="width: 200px;" name="href">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $('#dialogK').click(function(){
        $('#dialog').dialog({
            title:"友情连接添加",
            modal: true,
            autoOpen: false, 
            width: "400",
            bgiframe: true,
            closeOnEscape: true,
            draggable: true,
            resizable:true,
            buttons: {
               "提交": function() {
                   var form = $("#dialogForm");
                   $.ajax({
                        url:form.attr('action'),
                        type:form.attr('method'),
                        data:form.serialize(),
                        dataType:"json",
                        success:function(data){
                            $("#dialog").dialog("close");
                            alert("成功了");
                            window.location.reload();
                        },
                        error:function(){
                            $("#dialog").dialog("close");
                            alert("出错了");
                        }
                   }); 
               },
               "关闭": function() {  
                    $("#dialog").dialog("close");  
                },
            },

        });
        $('#dialog').dialog("open");
    });
});

//编辑产品操作
function member_edit(id){
    $.post('/admin/links/'+id+'/edit',{'_token':"{{csrf_token()}}"},
        function(data){
            //将JSON 数据生成原生的 JavaScript 对象
            var data = eval('('+data+')');
            //data.id//调用元素
            $("#dialogxiuid").val(data.id);
            $("#qianming").val(data.name);
            $("#chaolianjie").val(data.href);
            $('#dialogxiu').dialog({
                title:"修改友情链接",
                width:"400",
                buttons:{
                    "提交": function() {
                        var form = $("#dialogFormxiu");
                        $.ajax({
                            url:form.attr('action'),
                            type:form.attr('method'),
                            data:form.serialize(),
                            dataType:"json",
                            success:function(data){
                                $("#dialogxiu").dialog("close");
                                alert("数据成功了");
                                window.location.reload();
                            },
                            error:function(){
                                $("#dialogxiu").dialog("close");
                                alert("数据出错了");
                            }
                        }); 
                    },
                },

            });
        }
    ); 
}
</script>

这样就是实现了 在渲染页面通过ajax 数据的传递实现数据的添加与修改