示範Vue.js&JQuery新增修改刪除查詢(刪除資料)
23.php
<html>
<head>
<meta charset="UTF-8">
<title>示範Vue.js&JQuery新增修改刪除查詢(刪除資料)</title>
</head>
<body>
<div id="show">
<table>
<tr>
<th>name</th>
<th>age</th>
<th>email</th>
<th>del</th>
</tr>
<tr v-if="list != null" v-for="item in list">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.email }}</td>
<td><input v-on:click="delItem(item.id)" type="button" value="del"></td>
</tr>
<tr v-else>
<td colspan="3">沒有資料</td>
</tr>
</table>
</div>
</body>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script>
// start app
new Vue({
el: '#show',
data: {
list: []
},
mounted: function () {
$.get('get-list.php', function (query) {
this.list = query;
}.bind(this), 'json');
},
methods: {
delItem: function (id) {
$.get('del.php', {id: id}, function (result) {
if (result.success) {
alert('刪除成功');
this.list = result.query;
} else {
alert('刪除失敗');
}
}.bind(this), 'json');
}
}
})
</script>
</html>
del.php
<?php
//pdo請自寫
include 'config.php';
include 'pdoClass.php';
if (isset($_GET)) {
$pdo = new pdoClass($config);
if ($pdo->delItem($_GET['id'])) {
echo json_encode(['success' => true, 'query' => $pdo->getList()]);
} else {
echo false;
}
} else {
echo json_encode(['success' => false]);
}
iThome鐵人賽
看影片追技術