Vue.JS且戰且飛(二十三)

2017 iT 邦幫忙鐵人賽

DAY 16

Modern Web

Vue.JS且戰且飛系列第 23 篇

2017鐵人賽 eagle 老鷹且戰且飛 vue.js

老鷹(eagle)

2016-12-29 21:56:05

2031 瀏覽

分享至

示範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]);
}