1.向ajaxTest模板页面传数据
将Test表中的数据传递给ajaxTest模板
class User extends Controller
{
public function ajaxShow () {
$data = Test::all();
return view('ajaxTest',compact('data'));
}
}
2.控制器
取到提交过来的id,然后从数据库中找到这条数据,并更新数据,最后返回一个
class indexCo extends Controller
{
public function change (Request $request) {
// dd($request -> all()); 表单过来的所有数据
$id = $request -> input('id');
// 将post请求传递过来的id取出,并通过id主键 找到 这条数据
$obj = Test::find($id);
$obj -> score = $request -> input('score');
$re = $obj -> save();
if ($re) {
$data = [
'status' => 0,
'msg' => '分数修改成功'
];
} else {
$data = [
'status' => 1,
'msg' => '分数修改失败'
];
}
return json_encode($data);
}
}
3.ajaxTest.blade.php 模板文件 接受传过来的data并做渲染
引入layer弹框,根据不同状态显示不一样的弹框icon。
<table class="add_tab" border="1" style="border-collapse:collapse;">
<tr>
<th>姓名</th>
<th>分数</th>
<th>科目</th>
<th>改分数</th>
</tr>
@foreach($data as $v)
<tr>
<td>{{$v -> name}}</td>
<td id="a">{{$v -> score}}</td>
<td>{{$v -> subject}}</td>
<td style="padding:5px 20px;">
<input type="text" onchange="fn(this,{{$v -> id}})">
</td>
</tr>
@endforeach
</table>
<script src="{{URL::asset('js/jquery.min.js')}}"></script>
<script src="{{URL::asset('js/layer.js')}}"></script>
<script>
function fn(obj,id) {
// 获取到input框中输入的值
var newScore = obj.value
// console.log(obj.value)
$.ajax({
type: 'POST',
url:"{{url('change')}}",
data: {
"_token": "{{ csrf_token() }}",
"id": id,
"score": newScore
},
success: function (data) {
console.log(data);
var data = JSON.parse(data)
if (data.status == 0) {
layer.alert(data.msg,{icon:6})
// location.reload();
} else {
layer.alert(data.msg,{icon:5})
}
},
error: function (reject) {
console.log(reject);
}
});
}
</script>