form表单提交和ajax提交的使用场景和差别
2021-07-25 22:55
标签：false als 餐厅 刷新 status 异步 sele 过程 曝光 1、都是发送http请求 2、安全性都一样，安全性与提交方式无关 form表单提交和ajax提交的使用场景和差别 标签：false als 餐厅 刷新 status 异步 sele 过程 曝光 原文地址：https://www.cnblogs.com/liazhimao/p/14948710.html共同点
区别
ajax请求：
form表单提交：
举例：
el-form ref="form" :model="form" label-width="80px" style="width: 500px">
el-form-item label="活动名称">
el-input v-model="form.name">el-input>
el-form-item>
el-form-item label="活动区域">
el-select v-model="form.region" placeholder="请选择活动区域">
el-option label="区域一" value="shanghai">el-option>
el-option label="区域二" value="beijing">el-option>
el-select>
el-form-item>
el-form-item label="活动时间">
el-col :span="11">
el-date-picker
type="date"
placeholder="选择日期"
v-model="form.date1"
style="width: 100%"
>el-date-picker>
el-col>
el-col class="line" :span="2">-el-col>
el-col :span="11">
el-time-picker
placeholder="选择时间"
v-model="form.date2"
style="width: 100%"
>el-time-picker>
el-col>
el-form-item>
el-form-item label="即时配送">
el-switch v-model="form.delivery">el-switch>
el-form-item>
el-form-item label="活动性质">
el-checkbox-group v-model="form.type">
el-checkbox label="美食/餐厅线上活动" name="type">el-checkbox>
el-checkbox label="地推活动" name="type">el-checkbox>
el-checkbox label="线下主题活动" name="type">el-checkbox>
el-checkbox label="单纯品牌曝光" name="type">el-checkbox>
el-checkbox-group>
el-form-item>
el-form-item label="特殊资源">
el-radio-group v-model="form.resource">
el-radio label="线上品牌商赞助">el-radio>
el-radio label="线下场地免费">el-radio>
el-radio-group>
el-form-item>
el-form-item label="活动形式">
el-input type="textarea" v-model="form.desc">el-input>
el-form-item>
el-form-item>
el-button type="primary" @click="onSubmit">立即创建el-button>
el-button>取消el-button>
el-form-item>
el-form>
data() {
return {
form: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: "",
},
};
},
methods: {
onSubmit(e) {
// console.log(this.form);
e.preventDefault();
let formData = JSON.stringify(this.form);
// console.log(formData);
this.$http.post("", formData).then(function (res) {
if (res.status === 2000) {
console.log(111111)
} else {
console.log(222222)
}
});
},
},