背景
我在使用form進行傳遞數據的時候,發現不知道如何調用回調函數,
這個時候使用了原生的Ajax,但是使用xhr.open進行get請求的時候,需要帶上form標簽中input的數據.這里需要將input中的name:value轉換為字符串的形式進行顯式提交
代碼
function collectionsInputArg(formNode) {// 將INPUT內容轉換為對象
let saveNameAndValue = {}; // 返回的對象
let notSaveNodes = []; // 主要用於調試所用 : 沒有保存進對象的節點列表,函數結束自動銷毀此變量.
for (let item of formNode.elements) {
if (!(item.name in saveNameAndValue) && item.nodeName === 'INPUT') { // 判斷唯一性 && 節點標簽
if (item.value == '') { // 如果值為空決定如何操作
item.value = ' '; // 這里設置了一個空格
}
saveNameAndValue[item.name] = item.value;
} else {
notSaveNodes.push(item); // 調試信息
console.log(notSaveNodes);
}
}
return saveNameAndValue;
}
function objTransformStrFn(transObject) { // 將對象轉換為字符串
let returnStr = '';
let objKeys = Object.keys(transObject);
for (let item of objKeys) {
if (transObject[item]) {
returnStr += item + '=' + transObject[item] + '&';
}
}
return returnStr.slice(0, -1);
}
/*
// 在AJAX中調用☑
示例 :
const form1 = document.getElementById('form1');//獲取表單
let saveObjTransformStr = objTransformStrFn(collectionsInputArg(form1));// 在請求事件中中調用此函數.
結果 :
URL : http://127.0.0.1:3000/?user_name= &sex=男&hobby=吃飯睡覺打豆豆
轉換為字符串 : user_name= &sex=男&hobby=吃飯睡覺打豆豆
*/