1.原生form
优点:不需引入其他依赖
缺点:1.原生form表单action提交请求后没有回调函数,获取不到提示消息,即时将iframe作为目标返回,没有提示消息,如果想有提示消息使用监听iframe中的load事件
//监听ifram加载 界面直接返回响应信息; 判断返回内容是否为空
document.getElementID("#iframeID").addEventListener("load", () => {
let content =
document.getElementID("#iframeID").contentDocument?.getElementById('msg')?.innerText;
if (content && content!== undefined){
alert(content);
}
2.如果将form的onsubmit函数return false,则不执行请求,可以使用xmlRequest作为请求方式,但是会调用两次alert,即时return false 也不行。暂不知到解决办法。
<form action="" onsubmit="return mySubmit(this)"></form>
//js
function mySubmit(form){
let formData = new FormData(form)
//获取字段
let field1 = formData.getData('表单字段名')
//做校验等
if(field1 == ''){
return false
}
//直接提交
return true
//利用xml
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://192.168.1.247:2000/wx/exhibition/add')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
let params = "name=" + name + "&phone=" + phone
xhr.send(params)
xhr.onreadystatechange = function () {
let res = JSON.parse(xhr.responseText)
alert(res.msg)
}
}
2.利用jquery jquery.form中的ajaxForm,或者ajax
<script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
<iframe id="myIframe" name="myIframe" style="display: none"></iframe>
<div>
<form id="myForm"
target="myIframe"
action=""
method="post"
enctype="application/x-www-form-urlencoded" //默认就是键值对形式不需写
>
<label for="name">姓名: <span class="req">*</span></label>
<input type="text" id="name" name="name"
required placeholder="请输入姓名"
maxlength="20"
></form>
<div>
//js
const validate = (formData, jqForm, options) => {
let myreg = /^1[3456789]\d{9}$/;
if (!myreg.test(formData.phone)) {
alert("电话号码格式不正确!")
return false
}
return true
}
function successFun(responseText, statusText) {
alert(responseText.msg)
}
let options = {
target: '#myIframe', //把服务器返回的内容放入id为output的元素中
beforeSubmit: validate, //提交前的回调函数
success: successFun, //提交后的回调函数
//url: url, //默认是form的action, 如果申明,则会覆盖
//type: type, //默认是form的method(get or post),如果申明,则会覆盖
//dataType: null, //html(默认), xml, script, json...接受服务端返回的类型
// clearForm: true, //成功提交后,清除所有表单元素的值
// resetForm: true, //成功提交后,重置所有表单元素的值
timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求
}
$('#myForm').ajaxForm(options)
3.vueSFC + vant 适用于界面内容多,样式要求较高,响应式的联动的
模块引用,请求调用的xml,如果使用axios的话,参数要求键值对application/x-www-form-urlencoded时,即时设置请求头也不可以,依然是application/json,需要利用qs.stringfy(param) 格式化后传递参数。
<link rel="stylesheet" href="./css/vant_index.css"/>
<script src="./js/vue.global.prod.js"></script>
<script src="./js/vant.min.js"></script>
<script type="module">
const {createApp, ref, reactive, toRefs} = Vue
const app = createApp({
template: `
<div></div>
<div><FormComponent></FormComponent></div>
`
})
app.component('FormComponent', {
template: `
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field
v-model="formData.name"
name="name"
label="姓名"
placeholder="请输入姓名"
:rules="[{ required: true, message: '请输入姓名' }]"
/>
<van-field
v-model="formData.advice"
type="textarea"
autosize
rows="7"
name="advice"
label="建议"
placeholder="请输入建议"
/>
</van-cell-group>
<div style="margin: 16px;">
<van-button round block type="primary" native-type="submit">
提交
</van-button>
</div>
</van-form>`,
setup() {
const state = reactive({
formData: {
name: null,
phone: null,
},
})
const onSubmit = (values) => {
const {
name,
phone,
} = values
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://192)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
let params = "name=" + name + "&phone=" + phone
xhr.send(params)
xhr.onreadystatechange = function () {
let res = JSON.parse(xhr.responseText)
if (res.code == 0) {
vant.showSuccessToast(res.msg);
} else {
vant.showFailToast(res.msg);
}
}
}
return {
...toRefs(state),
onSubmit
}
}
})
// 通过 CDN 引入时不会自动注册 Lazyload 组件
// 可以通过下面的方式手动注册
app.use(vant).use(vant.Lazyload);
// 调用工具函数,弹出一个 Toast
vant.showToast('欢迎~');
app.mount('#app');
</script>
备注
1.适配移动端时
html文件需添加
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
2.界面添加padding导致布局偏移
解决办法:除了设置 box-sizing:border-box之外还要记得将html,body{padding:0;margin:0
}置零
加油吧!