html 写一个界面 有表单等

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

}置零

加油吧！