平展javascript對象作爲查詢字符串傳遞

Question

我有一個JavaScript對象，我需要將其扁平化爲一個字符串，以便我可以傳遞查詢字符串，我該怎麼做？即：

{ cost: 12345, insertBy: 'testUser' }將成爲cost=12345&insertBy=testUser

我不能使用jQuery AJAX調用這個電話，我知道我們可以使用和傳遞對象作爲data但不是在這種情況下。儘管如此，使用jQuery拼合成對象也是可以的。

謝謝。

Answer 1

你想​​：

var str = $.param({ cost: 12345, insertBy: 'testUser' }); 
// "cost=12345&insertBy=testUser" 

注意，這是jQuery的內部使用序列化作爲data參數傳遞對象的功能。

Answer 2

嘗試$.param()方法：

var result = $.param({ cost: 12345, insertBy: 'testUser' }); 

Answer 3

這裏有一個非jQuery的版本：

function toQueryString(obj) { 
    var parts = []; 
    for (var i in obj) { 
     if (obj.hasOwnProperty(i)) { 
      parts.push(encodeURIComponent(i) + "=" + encodeURIComponent(obj[i])); 
     } 
    } 
    return parts.join("&"); 
} 

Answer 4

var myObj = { cost: 12345, insertBy: 'testUser' }, 
    param = '', 
    url = 'http://mysite.com/mypage.php';  

for (var p in myObj) { 
    if (myObj.hasOwnProperty(p)) { 
    param += encodeURIComponent(p) + "=" + encodeURIComponent(myObj[p]) + "&"; 
    } 
} 

window.location.href = url + "?" + param; 

Answer 5

一般的JavaScript：

function toParam(obj) { 
    var str = ""; 
    var seperator = ""; 
    for (key in obj) { 
    str += seperator; 
    str += enncodeURIComponent(key) + "=" + encodeURIComponent(obj[key]); 
    seperator = "&"; 
    } 
    return str; 
} 


toParam({ cost: 12345, insertBy: 'testUser' }) 
"cost=12345&insertBy=testUser" 

Answer 6

這裏是另一種非jQuery的版本，利用lodash或者如果您已經在使用一個下劃線那些圖書館：

var toQueryString = function(obj) { 
    return _.map(obj,function(v,k){ 
    return encodeURIComponent(k) + '=' + encodeURIComponent(v); 
    }).join('&'); 
}; 

Answer 7

This是一個古老的問題，但在谷歌搜索的頂部，所以我加入這個完整性。

如果1）你不希望用戶的jQuery，但2）要隱蔽一個嵌套對象的查詢字符串，然後（建設關添唐氏和蓋伊的回答）的，使用此：

function toQueryString(obj, urlEncode) { 
    // 
    // Helper function that flattens an object, retaining key structer as a path array: 
    // 
    // Input: { prop1: 'x', prop2: { y: 1, z: 2 } } 
    // Example output: [ 
    //  { path: [ 'prop1' ],  val: 'x' }, 
    //  { path: [ 'prop2', 'y' ], val: '1' }, 
    //  { path: [ 'prop2', 'z' ], val: '2' } 
    // ] 
    // 
    function flattenObj(x, path) { 
     var result = []; 

     path = path || []; 
     Object.keys(x).forEach(function (key) { 
      if (!x.hasOwnProperty(key)) return; 

      var newPath = path.slice(); 
      newPath.push(key); 

      var vals = []; 
      if (typeof x[key] == 'object') { 
       vals = flattenObj(x[key], newPath); 
      } else { 
       vals.push({ path: newPath, val: x[key] }); 
      } 
      vals.forEach(function (obj) { 
       return result.push(obj); 
      }); 
     }); 

     return result; 
    } // flattenObj 

    // start with flattening `obj` 
    var parts = flattenObj(obj); // [ { path: [ ...parts ], val: ... }, ... ] 

    // convert to array notation: 
    parts = parts.map(function (varInfo) { 
     if (varInfo.path.length == 1) varInfo.path = varInfo.path[0];else { 
      var first = varInfo.path[0]; 
      var rest = varInfo.path.slice(1); 
      varInfo.path = first + '[' + rest.join('][') + ']'; 
     } 
     return varInfo; 
    }); // parts.map 

    // join the parts to a query-string url-component 
    var queryString = parts.map(function (varInfo) { 
     return varInfo.path + '=' + varInfo.val; 
    }).join('&'); 
    if (urlEncode) return encodeURIComponent(queryString);else return queryString; 
} 

使用像：

console.log(toQueryString({ 
    prop1: 'x', 
    prop2: { 
     y: 1, 
     z: 2 
    } 
}, false)); 

，輸出：

prop1=x&prop2[y]=1&prop2[z]=2 

Answer 8

您可以使用的jsfiddle這個

function serialize(obj) 
{ 
    let str = [] 

    for(var p in obj) 
    { 
     if(obj.hasOwnProperty(p)) str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p])) 
    } 

    return str.join('&') 
} 

嘗試此鏈接https://jsfiddle.net/yussan/kwmnkca6/

Answer 9

我ES6版本（純JavaScript，沒有jQuery的）：

function toQueryString(paramsObject) { 
    return Object 
    .keys(paramsObject) 
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(paramsObject[key])}`) 
    .join('&') 
    ; 
} 

Answer 10

另一個版本：

function toQueryString(obj) { 
    return Object.keys(obj).map(k => { 
     return encodeURIComponent(k) + "=" + encodeURIComponent(obj[k]) 
    }) 
    .join("&"); 
} 

Answer 11

ES6版本Jrop's answer（也解析嵌套參數）

const toQueryString = (obj, urlEncode = false) => { 
    if (!obj) return null; 
    const flattenObj = (x, path = []) => { 
    const result = []; 
    Object.keys(x).forEach((key) => { 
     if (!Object.prototype.hasOwnProperty.call(x, key)) return; 
     const newPath = path.slice(); 
     newPath.push(key); 
     let vals = []; 
     if (typeof x[key] === 'object') { 
     vals = flattenObj(x[key], newPath); 
     } else { 
     vals.push({ path: newPath, val: x[key] }); 
     } 
     vals.forEach((v) => { 
     return result.push(v); 
     }); 
    }); 
    return result; 
    }; 

    let parts = flattenObj(obj); 
    parts = parts.map((varInfo) => { 
    if (varInfo.path.length === 1) { 
     varInfo.path = varInfo.path[0]; // eslint-disable-line no-param-reassign 
    } else { 
     const first = varInfo.path[0]; 
     const rest = varInfo.path.slice(1); 
     varInfo.path = `${first}[${rest.join('][')}]`; // eslint-disable-line no-param-reassign 
    } 
    return varInfo; 
    }); 

    const queryString = parts.map((varInfo) => { 
    return `${varInfo.path}=${varInfo.val}`; 
    }).join('&'); 
    if (urlEncode) { 
    return encodeURIComponent(queryString); 
    } 
    return queryString; 
}; 

的