[vue] ajax post form表单提交 json提交
在Vue中,可以使用axios库来发送POST请求,并将表单数据作为JSON提交。以下是一个简单的例子:
首先,确保安装axios:
npm install axios
然后,在Vue组件中使用axios发送POST请求:
<template>
<form @submit.prevent="submitForm">
<input type="text" v-model="formData.name" placeholder="Name">
<input type="email" v-model="formData.email" placeholder="Email">
<button type="submit">Submit</button>
</form>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
formData: {
name: '',
email: ''
}
};
},
methods: {
submitForm() {
axios.post('YOUR_API_ENDPOINT', this.formData)
.then(response => {
// 处理响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});
}
}
};
</script>
在这个例子中,当表单被提交时,submitForm
方法会被触发。axios.post
方法会向指定的API端点发送一个POST请求,并将formData
对象作为请求体发送(JSON格式)。成功提交后,你可以在.then
回调中处理响应数据,错误则在.catch
回调中处理。
评论已关闭