示範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);
}
iThome鐵人賽
看影片追技術