DOM基础测试35

[zhangxinxu]

本期题目如下：

大家提交回答的时候，注意缩进距离，起始位置从左边缘开始；另外，github自带代码高亮，所以请使用下面示意的格式。

```js
// 你的JS代码写在这里
 ```

**心怀瑞雪，自己作答，不要参考别人回答**

其他 本期小测答疑直播为8月3日上午10:00，预计半小时左右。直播地址：https://live.bilibili.com/21193211

每位答题者会有至少2积分参与分，本次小测满分10积分。

首位答题者会100%被翻牌。

[wingmeng]

第 1 题：

document.getElementById('loginForm');  // 方法1：经典的 id 选择器
document.querySelector('#loginForm');  // 方法2：万能的 querySelector
document.forms.loginForm;  // 方法3：表单原生方法，还可以写作：document.forms['loginForm']
loginForm;  // 方法4：标签的 id 可以直接当变量来用

第 2 题：

1. form 标签添加 onsubmit="return false"

   <form id="loginForm" action="/account/login" method="post" onsubmit="return false">
   

2. form 提交事件里 return false（仅限 DOM 0 级）

   loginForm.onsubmit = function() {
     // 其他操作...
     return false;
   };
   

3. form 提交事件里阻止表单默认行为 preventDefault

   // DOM 0 级
   loginForm.onsubmit = function(e) {      
     e.preventDefault();
     // 其他操作...
   };
   
   // DOM 2 级
   loginForm.addEventListener('submit', function(e) {
     e.preventDefault();
     // 其他操作...
   }, false);
   

第 3 题：

const btnTypes = ['button', 'submit', 'reset', 'image'];
const formData = [...loginForm]
  // 过滤掉表单按钮
  .filter(field => !btnTypes.includes(field.type))

  // 将表单元素的值封装成 k-v 形式的数据，例如：{username: 'abc'}
  .reduce((data, { name, value }) => {        
    // 这里仅按照题意作简单处理，
    // 如果要完善的话，还要考虑单选框、复选框这类 name 值相同的表单元素
    data[name] = value;        
    return data;
  }, {});

console.log(formData)

补充：抽空自己封装表单库，意外发现原来根本不用这么折腾，早就有 FormData 这个 JS 原生对象了，它可以将数据编译成键值对，直接供 AJAX 来使用。孤陋寡闻了……

第 4 题：

在 AJAX 提交前为 submit 按钮设置 disabled 属性来禁用按钮（同时也禁用了表单提交），等 AJAX 返回后（无论成功失败）再去掉 disabled 属性启用按钮。

第 5 题：

为隐藏的输入框加上 form="loginForm" 属性即可。 利用这个特性可以把从属于表单的元素放在任何地方，只需指明该元素的 form 特性值为表单 id 即可，这样该元素就从属于表单了。

<input name="from" type="hidden" form="loginForm">

[livetune]

// 第一题
const form = document.querySelector('#loginForm')
console.log(form)

form.addEventListener('submit', function (e) {
    // 第二题
    e.preventDefault()
    const res = {}
    let submitButton;
    // 第三题
    for (let item of form) {
        console.log(item)
        if (item.type.toLowerCase() === 'submit') {
            submitButton = item
            continue
        } else {
            res[item.name] = item.value
        }
    }
    // 第四题
    submitButton.type = "button"
    setTimeout(() => {
        submitButton.type = 'submit'
    }, 4000)
    // 或者
    submitButton.disabled = true
    setTimeout(() => {
        submitButton.disabled = false
    }, 4000)
})

第五题

<input name="form" type="hidden" form="loginForm">

[stupidsongshu]

<form id="loginForm" name="login" action="/account/login" method="POST">
  <p>账号：<input name="username" required></p>
  <p>密码：<input type="password" name="password" required></p>
  <p><input type="submit" name="submit" value="登录"></p>
</form>
<input type="hidden" name="from" value="baidu">

// 1. 获取<form>元素
var loginForm = document.getElementById('loginForm')
// var loginForm = document.login
// var loginForm = document.forms[0]
// var loginForm = document.forms.login

loginForm.onsubmit = function(e) {
  // 2. <form>表单元素提交的时候阻止默认的表单提交行为
  e.preventDefault()

  // 3. Ajax提交时获取<form>表单元素下所有需要提交的数据
  var username = loginForm.username.value
  var password = loginForm.password.value
  console.log(username, password)

  // 4. Ajax提交时阻止二次点击
  loginForm.submit.disabled = true
  setTimeout(() => {
    loginForm.submit.disabled = false
  }, 1000)

  // 5. 提交隐藏输入框数据
  var from = document.querySelector('input[type=hidden]').value
  console.log(from)
}

[XboxYan]

1

var form = document.getElementById('loginForm');

2

form.addEventListener('submit',function(ev){
    ev.preventDefault();
})

3

var formdata = new FormData(form);

4

form[submit].addEventListener('click',function(){
    this.disabled = true;
    var request = new XMLHttpRequest();
    request.open("POST", "XXX");
    request.send(formdata);
    request.onload = function(oEvent) {
        //其他业务逻辑
       form[submit].disabled = false;
    };
})

//题目说直接通过什么属性控制，感觉有什么更简单的方法？

5

给隐藏的输入框加上form属性即可。

<form id="loginForm">
...
</from>
<input type="hidden" name="form" form="loginForm">

[guqianfeng]

    let loginForm = document.getElementById("loginForm"); //第一题
    loginForm.onsubmit = function(e){
        e.preventDefault(); //第二题
        let obj = new FormData(this);
        let result = {};
        for(let [key, value] of obj.entries()){
            result[key] = value;
        }
        console.log(result); //第三题结果,不过如果有checkbox要做下处理，应该返回个数组，即使只选择了一个，也应该返回个单元素的数组
        //第四题这边就简单描述下，beforeSend的时候把按钮改为禁用，success，fail的时候在恢复可点击的状态
        //第五题给隐藏域加上属性form='loginForm'
    };

[ZhangXDong]

// 1.获取form元素
let oForm = document.getElementById('loginForm')

// 2.阻止默认的表单提交行为
let aInput = oForm.getElementsByTagName('input')
let submitBtn = null
for(let i = 0; i < aInput.length; i++) {
	if (aInput[i].type === 'submit') {
		submitBtn = aInput[i]
	}
}
submitBtn.addEventListener('submit', (e) => {
	e.preventDefault()
})

// 3.ajax请求，获取所有需要提交的数据
let reqData = {}
for(let i = 0; i < aInput.length; i++) {
	if (aInput[i].name) {
		reqData[aInput[i].name] = aInput[i].value
	}
}

// 4.防止二次提交
// ajax 前设置disabled为true，ajax完成后设置disabled为false
submitBtn.disabled = true
submitBtn.disabled = false

// 5.form提交区域外元素
<input name="from" type="hidden" form="loginForm">

[NeilChen4698]

document.forms['loginForm']

document.forms['loginForm'].onsubmit = function() {return false;}

3/4/5.

document.forms["loginForm"].onsubmit = function(event) {
	event.preventDefault();
	var submitBtn = document.querySelector('[type="submit"]');
	var param = {
		username: document.forms['loginForm']['username'].value,
		password: document.forms['loginForm']['password'].value,
		from: document.getElementsByName('from')[0].value,
	};
	submitBtn.disabled = true;
	mockAjax(param, function() {
		submitBtn.disabled = false;
	})
}

[Despair-lj]

// 1.
var form = document.getElementById('loginForm');

// 2.
form.addEventListener('submit', function(event) {
  event.preventDefault();
});

// 3.
form.addEventListener('submit', function(event) {
  event.preventDefault();
  var formData = new FormData(this);
});

// 4.
form.addEventListener('submit', function(event) {
  event.preventDefault();
  var submitButton = this.querySelector('[type="submit"]');
  submitButton && submitButton.setAttribute('disabled', '');
});

// 5.
<input name="from" type="hidden" form="loginForm" />;

[jiaoHsiung]

// 1 
var form = document.getElementById('loginForm');

// 2
// <form id="loginForm" action="/action/login" method="post" onsubmit="return false;"></form>

// 3 (利用第一题中得到的form变量)
var username= form.username.value;
var password=form.password.value;

// 4 第一次提交之后 把type="submit" 改成 type="button"
<p><input type="submit" value="登录"></p>

// 5
 <input name="from" type="hidden" form="loginForm">
/**
*  或者在提交的时候通过
* var from = document.getElementsByName('from')[0];
* 得到from.value 
*/

[GitHdu]

//1.
var loginForm = document.forms['login']


loginForm.onsubmit = function(e) {
  // 2.
  e.preventDefault()

  // 3. 
  var username = loginForm.username.value
  var password = loginForm.password.value

}

  // 4. 
  loginForm.submit.disabled = true

}

//5
document.querySelector('input[type=hidden]').setAttribute('form',"loginForm")

[fzpijl]

var form = document.getElementById('loginForm')

form.onsubmit = function(e) {
     e.preventDefault()
     //
}

function getFormData(form) {
      var data = {}
      var elements = form.elements;
      for(var i = 0; i < 2; i++) {
          data[elements[i].name] = encodeURIComponent(elements[i].value)
      }
      return data
  }

form.elements[2].disabled = true

提交的时候获取隐藏域的值，添加到要提交的表单数据中

[zzzluyan]

        //1、获取form元素
	const formDom = document.getElementById('loginForm');
	//2、阻止默认的提交行为
	formDom.addEventListener('submit', function(e) {
		e.preventDefault();
	});
	//3、获取表单数据
	const formData = new FormData(formDom);
	// 4、设置input type="submit" 属性disabled， 点击传输数据后，置为true, 有返回结果的时候置为false
	// 5、携带隐藏数据
	let from = document.getElementsByName('from')[0].value;
	formData.set('from', from);

[WGHwebitem]

<form id="loginForm" action="/account/login" method="post">
			<p>账号：<input name="username" id="nameid" required="required"></p>
			<p>密码：<input type="password" id="psdid" name="password" required="required"></p>
			<p><input type="submit" id="sub" onclick="SubmitF()" value="登陆"></p>
		</form>
		<p><input type="hidden" id="ipthidd" name="from"></p>



//1、获取from元素
		var getForm = document.getElementById('loginForm');
		console.log(getForm);
		//2、阻止表单默认提交行为
		getForm.onsubmit = function(event) {
                       //zxx: 这里永远都返回true的吧
			if(1) {
				return true;
			} else {
				event.preventDefault();
			}
		}
		//3、获取提交数据
		var nameD = document.getElementById('nameid').value;
		var psd = document.getElementById('psdid').value;
		console.log(nameD, psd);
		console.log(loginForm.username.value);
		console.log(loginForm.password.value);

		//4、改变属性阻止二次提交
		function SubmitF() {
			var subid = document.getElementById('sub');
			if(nameD == '' && psd == '') {} else {
				subid.setAttribute('type', 'button');
				//subid.disabled='true';//或者设置按钮不可点击
				getForm.submit();
			}

		}
		//5、表单外的input,在提交的时候加上属性form指定input也会一起提交，
		//form 属性规定 <input> 元素所属的一个或多个表单;
		var ipthidd = document.getElementById('ipthidd');
		ipthidd.setAttribute('form', 'loginForm');

[brenner8023]

// 1.
var loginForm = document.getElementById('loginForm'); // window.loginForm也可以

// 2.
loginForm.addEventListener('submit', function(e){
    e.preventDefault();
});

// 3.
loginForm.addEventListener('submit', function(e){
    var inputData = document.querySelectorAll('#loginForm input[name]');
    for(let i = 0; i < inputData.length; i++) {
          console.log(inputData[i].value);
    }
});

[Forx-Js]

1. 获取form

const formDom = document.getElementById('loginForm');

2. 阻止默认

formDom.addEventListener('submit', e=>{
  e.preventDefault();
}

3. 获取数据

const getForm2Object = (formDom) => {
  const formData = new FormData(formDom),
    iterators = formData.entries(),
    data = {};
  for (const [key, value] of iterators) {
    data[key] = value;
  }
  return data;
}

4. 防止二次提交

formDom[2].disabled=true;  //禁用按钮,简单粗暴

5. 其它来源

// 想的比较简单
const formObject = getForm2Object(formDom), //获取form的Object数据,getForm2Object方法请看第3T
  data = {
    ...formObject,
    form: document.querySelector('input[name=form]').value
  };  //简单的解构重组 直接提交

[EmmaYXY]

<html>
<body>
<form id='loginForm' action='/account/login' method='post'>
	<p>账号：<input name='username' required></p>
	<p>密码：<input type='password' name='password' required></p>
	<p><input type='submit' value='登录'></p>
	<input type='hidden' name='from' value='用户来源'>
</form>
</body>
</html>

// 第一题
var form = document.getElementById('loginForm')
// 第三题
var name = document.querySelectorAll('input[name=username').value;
var password = document.querySelectorAll('input[name=password').value;
var source = document.querySelectorAll('input[name=from').value;

[frankyeyq]

1. 
document.forms
2.
document.getElementById('loginForm').addEventListener('submit', event => {
    event.preventDefault();
});
3.
var formData = new FormData(document.getElementById('loginForm'));
4.
document.getElementById('loginForm').querySelector('input[type="submit"]').disabled = true

5.<input name="form" type="hidden" form="loginForm">
 在表单之外的控件上加上form属性值为表单id的值就可以

[bugaosunihhh]

第一题

let form = document.getElementById("loginForm");
let form = document.querySelector("#loginForm");
let form = document.forms["loginForm"];
let form = loginForm;

第二题

loginForm.addEventListener('submit',function(e){
    e.preventDefault();
})
loginForm.onsubmit = function(e){
    return false;
}

第三题

// 方法1
let formdata = new FormData(loginForm);

// 方法2：获取必填的元素 然后进一步过滤，返回键值对，如果文件类型则需要其他考虑
Array.from(loginForm.querySelectorAll("input")).filter((v, k) => {
    return v.required;
}).reduce((obj, item) => {
    obj[item.name] = item.value;
    return obj;
},{});

第四题

let submitEl = loginForm["submit"]
submitEl.addEventListener('click',function(e){
    this.disabled = true;
    // 提交数据
    let req = new XMLHTTPRequest();
    req.open(loginForm.method,loginForm.action);
    req.onload = function(){
        submitEl.disabled = false;
    }
    req.send(new FormData(loginForm));
})

第五题

<input name="from" type="hidden" form="loginForm">

[xuejianrong]

// 1.
loginForm

// 2.
loginForm.onsubmit = function (e) {
    e.preventDefault();
}

// 3.
let fromData = new FormData(loginForm);

// 4.
loginForm.onsubmit = function (e) {
    document.querySelector('input[type="submit"]').disabled = 'disabled';
}

// 5.对隐藏的input做以下修改
<input type="hidden" name="from" form="loginForm">
// 在js中用以下代码获取
let fromData = new FormData(loginForm);

[les-lee]

<!doctype html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<input name="from" type="hidden">
<form id="loginForm" action="/account/login" method="post">
  <p>账号: <input name="username" type="text" required value="leslee"></p>
  <p>密码: <input name="password" type="password" autocomplete="current-password" value="123456" required></p>
  <p><input type="submit" value="登录"></p>
</form>
<script>
  // 1. 获取form表单
  let loginForm = document.forms.loginForm
  console.log('1.', loginForm)

  // 2.
  document.forms.loginForm.addEventListener('submit', (e) => {
      e.preventDefault()
      console.log(e)


  })

  // 3.
  let elements = document.forms.loginForm.elements
  let postData = Array.from(elements).filter(item => !!item.getAttribute('name'))
  console.log(postData)

  // 4.
  // 在前端设置一个sessionStorage 第一次点击提交的时候存一个状态, 然后把按钮禁掉, 当请求失败以后再把状态改回来, 这样可以防止用户刷新以后状态丢失


  // 5.
  let formData = new FormData(loginForm)
  formData.append('from', document.querySelector('[name="from"]'))
  console.log(formData.forEach(e=>console.log(e))

</script>

</body>
</html>

[Seasonley]

<form id="loginForm" name="login" action="/account/login" method="POST">
    <p>账号：<input name="username" required></p>
    <p>密码：<input type="password" name="password" required></p>
    <p><input type="submit" name="submit" value="登录"></p>
</form>
<!-- html5 -->
<input form="loginForm" type="hidden" name="form" value="wula">

<script>
    //1
    var appLoginForm=document.getElementById('loginForm')
    var formData=[]
    appLoginForm.addEventListener('submit',(e)=>{
        //2
        e.preventDefault();
        //3
        var inputNodes=[...appLoginForm.querySelectorAll('input')];
        formData=Object.fromEntries(inputNodes
            .filter(v=>v.type!='submit')
            .map(v=>{return [v.name,v.value]}))
        console.log(formData)
        //4
        inputNodes.filter(v=>v.type==='submit').map(v=>v.disabled="disabled")
    })
</script>

[liyongleihf2006]

jsbin

<form id="loginForm" action="/account/login" method="POST">
    <input name="a" />
    <input name="a" />
    <input name="b" />
    <input type="checkbox" name="c" value="cc" />
    <input type="checkbox" name="c" value="ccc" />
    <input type="radio" name="d" value="dd" />
    <input type="radio" name="d" value="ddd" />
    <select name="e" multiple>
        <option>ee</option>
        <option>ff</option>
    </select>
    <input />
    <input />
    <input />
    <input />
    <input type="submit" />
</form>
<input name="from" type="hidden" value="laiyuan" form="loginForm" />

//第一题
var loginForm = document.querySelector('#loginForm');

loginForm.addEventListener('submit', function (e) {
  
    //第二题
    e.preventDefault();
    
    //第三题
    //ie10以下及没有二进制文件
    var formData = getFormData(this);
    //ie10以上及有二进制文件
    //var formData = new FormData(this);
    console.log(formData);
    
    //第四题
    loginForm.querySelector("[type=submit]").disabled = true;
    setTimeout(function(){
      loginForm.querySelector("[type=submit]").disabled = false;
    },2000)
    
})

//第五题
//设置form属性
//<input name="from" type="hidden" value="laiyuan" form="loginForm" />

//当值多于一项的时候是数组,否则就是单值
function getFormData (form) {
    var data = {};
    Array.prototype.filter.call(form.elements, function (element) {
        return element.hasAttribute("name");
    }).forEach(function (oField) {
        var sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.type.toUpperCase() : oField.nodeName;
        if (!data[oField.name]) {
            data[oField.name] = [];
        }
        if (sFieldType === "RADIO" || sFieldType === "CHECKBOX") {
            if (oField.checked) {
                data[oField.name].push(oField.value)
            }
        } else if (sFieldType === "SELECT") {
            data[oField.name] = Array.prototype.map.call(oField.selectedOptions,function(option){
              return option.value;
            })
        } else {
            data[oField.name].push(oField.value)
        }
    });
    Object.keys(data).forEach(function (key) {
        if (data[key].length < 2) {
            data[key] = data[key].join()
        }
    });
    return data;
}

[zy017]

// 1.
let loginForm = document.forms["loginForm"]
console.log(loginForm)
// 2
loginForm.onsubmit = function() {
    return false
}
// 3
let serializeJSON = function(form) {
    let formData = new FormData(form)
    let jsonData = {}
    for (let item of formData.keys()) {
        let value = formData.getAll(item)
        if (value.length === 1) {
            value = value[0]
        } 
        jsonData[item] = value
    }
    return jsonData
}
console.log(serializeJSON(loginForm))
// 4
let submit = loginForm.querySelector('[type=submit]')
// Ajax请求时
submit.disabled = true
// Ajax请求成功后
submit.disabled = false

// 5
// 设置隐藏输入框 的form属性为loginForm的id
document.querySelector('[type=hidden]').setAttribute('form','loginForm') 

[smiledpeace]

 1. var loginForm = document.forms.loginForm
  2. loginForm.onsubmit = function(){return false}
  3. var elements = loginForm.elements
  var data = {};
  for(var i = 0;  i < elements.length; i++) {
	var item = elements[i];
       if (item.name) {
	    data[item.name] = item.value
       }
}
4. loginForm.querySelector('input[type="submit"]').disabled = 'disabled'
5. <input type="hidden" name="form" form="loginForm"/>

[zengqingxiao]

第一题 获取form元素

let froElt = document.querySelector('#loginForm');

第二题 阻止默认行为

行为：必然跳转页面，如果表单的action为空也会跳转到自己的页面，即效果为刷新当前页
  //当form中只有一个按钮的时候默会提交,但是好像不会跳转页面
  1.直接把type='submit' 改为 type='button'
  2.再登录按钮上加 onclick="return func()"阻止默认行为
  3.再from元素上加 onsubmit="return func()"
  4.触发事件执行event.preventDefault(); 

第三题

  let bntNameVal = document.querySelector("input[name='username']");
  let bntpasswordVal = document.querySelector("input[name='password']");
  console.log(inpNameVal.value);
  console.log(bntpasswordVal.value);

第四题

我觉得直接在当第一次点击的时候给登录按钮加一个disabled属性让按钮不不可以点击，等到请求成功的时候在把这个按钮的的disabled去除就可以了

第五题

- 用Ajax提交的方法先直接定义一个from对象的属性的属性值来接收为这个input的值，在通过Ajax吧from传给后端就可以了

[juzhiqiang]

1    获取ID方法 也可以获取标签 还有querySelector
        let form = document.getElementById('loginForm');
        let form = document.getElementsByTagName('form')[0];
        let form = document.querySelector('#loginForm');
 
      2. 直接使用event.preventDefault清除默认即可
        form.onsubmit = function (e) {
            e.preventDefault();

            3.将需要提交值存放对象中
            let obj = {},
                submitBtn;
            for (const item of form) {

                if (['submit'].includes(item.type)){
                    submitBtn = item;
                    item.disabled = true;
                    continue;
                } 
              
                obj[item.name] = item.value;
            }

            // 4 模拟异步 使用变量submitBtn 存储提交按钮元素 等请求完成后 在设置回 disabled false
            setTimeout(()=>{
                submitBtn.disabled = false;
            },2000)


        }

   5.在form表单内加上
      <input type="hidden" name="form" value="来源信息"/>

[sghweb]

好多都不记得了，查了资料才做出来

第一题
let formEle = document.getElementById('loginForm')

//第二题 阻止表单提交默认行为
formEle.onsubmit = (e) => {
  return false
}

//第三题
let inputs = Array.from(formEle)
let btns = ['button','image','reset','submit']
// form表单过滤按钮后的input
let inputVals = inputs.filter(item=>{
  // 取出submit按钮
  if(item.type=='submit'){
    submitBtn=item
  }
  return !btns.includes(item.type)
})
// 提交数据对象
let formData={}
// 提交时获取所有input值
function getVal() {
  inputVals.forEach((item) => {
    formData[item.name]=item.value
  })
}
//改了一下把事件写js里
submitBtn.onclick = function(){
    getVal()
}

//第四题 通过disabled控制 
<p><input type="submit" value="登录" disabled></p>


// 第五题 通过给hidden元素加上 form="loginForm" loginForm为所属表单的id
<input name="form" type="hidden" value="444" form="loginForm">

[xxf1996]

假设HTML结构如下：

<input name="from" type="hidden">
<form id="loginForm" action="/account/login" method="POST">
  <p>账号：<input name="username" required></p>
  <p>密码：<input type="password" name="password" required></p>
  <p><input type="submit" value="登录"></p>
</form>

我使用同一上下文来回答：

/* 第一题 */
const loginForm = document.forms.loginForm
/* 第二题 */
loginForm.onsubmit = function (e) {
  e.preventDefault()
}
/* 第三题 */
let data = {}
Array.from(loginForm.elements)
  .filter(item => item.hasAttribute('name'))
  .forEach(item => {
  data[item.name] = item.value
})
/* 第四题 */
const submitBtn = loginForm.elements[loginForm.elements.length - 1]
submitBtn.disabled = true
/* 第五题 */
const from = document.querySelector('input[type="hidden"]')
data[from.name] = from.value

[347235420]

第一题： var loginForm=document.getElementById('loginForm') var loginForm=document.document.querySelector('#loginForm')

第二题 e.preventDefault();

第三题 var userName=document.querySelector("meta[name='username']").value; var passWord=document.querySelector("meta[name='password']").value; 第四题

`
   通过给提交按钮添加属性disabled控制是否能进行提交

`

第五题

`
 把input放到loginForm的表单内，然后拿到input[type="hidden"]的值和账户密码一起传输过去

`

[lifelikejuly]

第一题

let form = loginForm;
console.log(form);

第二题&第三题

loginForm.addEventListener('submit', function(ev) {
        ev.preventDefault(); //取消默认表单提交
        var formObject = {};
        for (let item of loginForm) { //遍历表单数据
            if (item.name != "submit") {
                formObject[item.name] = item.value;
            }
        }
        console.log(formObject);
        ajax({
            type: loginForm.method, //获取表单提交类型
            dataType: "json",
            url: loginForm.action, //表单动作
            data: formObject,
            success: function(result) {
                if (result.resultCode == 200) {
                    alert("SUCCESS");
                };
            },
            error: function() {

            }
        })
    });

第四题 因为表单数据都有required属性，可以在提交表单时将其中密码input的value置空。虽然感觉用户交互体验上有点奇怪。

loginForm.username.value = ""

第五题 加上表单属性，根据上述的表单ajax再添加form数据

<input id="from" type="hidden" name="form" form="from" value="china">
formObject[from.name] = from.value;