在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"></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"></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 数据的传递实现数据的添加与修改