<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="app">
name: <input size="10" type="text" v-model="name" >
iq: <input size="10" type="text" v-model="iq" >
<textarea v-model="res" ></textarea>
</div>
<script src="script.js"></script>
</body>
</html>
let app = new Vue({
el: '#app',
data: {
url: 'https://lcdp003.enebular.com/new01/',
res: '',
name: 'aita',
iq: '105'
},
methods: {
window: onload = function() {
app.post();
},
post: function() {
let param = new URLSearchParams();
param.append("name", app.name);
param.append("iq", app.iq);
let xhr = new XMLHttpRequest();
xhr.open('POST', app.url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
app.res = xhr.responseText;
}
}
xhr.send(param);
},
}
})
/* Styles go here */
* {
padding: 0;
border: 1;
}
html, body, #app {
height: 98%;
}
textarea {
width: 100%;
height: 100%;
font-family: "メイリオ", sans-serif;
font-size: 20px;
}
textarea:focus {
outline: none;
}