<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue + jquery ajax</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
<script type="text/javascript" src="jquery-3.6.4.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
<h1>This is a good test!</h1><br/>
<form name="user" id="userform" method="post" action="">
<table border="1" width="50%" align="center">
<tr>
<td width="30%">
<label>user name:</label>
</td>
<td width="70%">
<input v-model="name">
</td>
<tr>
<td>
<label>user mail:</label>
</td><td>
<input v-model="mail">
</td>
</tr>
<tr>
<td>
<label>user address:</label>
</td><td>
<input v-model="address">
</td>
</tr>
<tr>
<td colspan=2>
{{ message }}
</td>
</tr>
<tr><td><button @click="handleClick">send ajax</button></td><td></td></tr>
</table>
</form>
</div>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!',
name: 'Jane Brown',
mail: 'Jb@qq.com',
address: 'dashiqiaok, LiaoNing'
}
},
methods: {
handleClick(event) {
event.preventDefault();
$.ajax({
url: 'http://localhost:8764/user/findUser',
type: 'post',
data: {name:'flying blue cat', desc:'happy day'} ,
success: function(response) {
showData(response);
}
});
}
},
}
var bvue=Vue.createApp(HelloVueApp).mount('#hello-vue')
function showData(data){
bvue.mail=data.mail;
bvue.name=data.name;
bvue.address=data.address;
}
</script>
</body>
</html>QU