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

2017 iT 邦幫忙鐵人賽

DAY 16

Modern Web

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

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

老鷹(eagle)

2016-12-19 23:05:16

2149 瀏覽

分享至

示範Vue.js&JQuery新增修改刪除查詢(建立資料)

21.php

<html>
<head>
    <meta charset="UTF-8">
    <title>示範Vue.js&JQuery新增修改刪除查詢(建立資料)</title>
</head>
<body>
<div id="show">
    <div>
        name: <input type="text" v-model="name">
    </div>
    <div>
        age: <input type="text" v-model="age">
    </div>
    <div>
        email: <input type="text" v-model="email">
    </div>
    <input v-on:click="submitFrom()" type="button" value="submit">
</div>
</body>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script>
    // start app
    new Vue({
        el: '#show',
        data: {
            name: '',
            age: '',
            email: ''
        },
        methods: {
            submitFrom: function () {
                var $this = this;
                if ($this.name == '' || $this.age == '' || $this.email == '') {
                    alert('請填寫完整');
                } else {
                    $.get('insert.php', {
                        name: $this.name,
                        age: $this.age,
                        email: $this.email
                    }, function (result) {
                        if (result) {
                            alert('新增成功');
                        } else {
                            alert('新增失敗');
                        }
                    }, 'json')
                }
            }
        }
    })
</script>
</html>

insert.php

<?php
include 'pdoClass.php';
include 'config.php';

/**
 * PDO操作請自行寫
 */
if (isset($_GET)) {
    $pdo = new pdoClass($config);
    $result = $pdo->createData($_GET);
    echo json_encode($result);
} else {
    echo json_encode(false);
}