จะสร้างพารามิเตอร์การสืบค้นใน Javascript ได้อย่างไร?

มีวิธีใดในการสร้างพารามิเตอร์การสืบค้นสำหรับการส่งคำขอ GETใน JavaScript หรือไม่

เช่นเดียวกับใน Python ที่คุณมีurllib.urlencode()ซึ่งใช้ในพจนานุกรม (หรือรายการสองสิ่งสองตัว) และสร้างสตริงเช่น'var1=value1&var2=value2'.

ได้แล้ว:

function encodeQueryData(data) {
   const ret = [];
   for (let d in data)
     ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
   return ret.join('&');
}

การใช้งาน:

const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 };
const querystring = encodeQueryData(data);

URLSearchParamsเพิ่มการรองรับเบราว์เซอร์

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = new URLSearchParams(data);

// searchParams.toString() === 'var1=value1&var2=value2'

Node.js มีโมดูลเคียวรีสตริง

const querystring = require('querystring');

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'

การทำงาน

function encodeData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
}   

Zabbaได้ให้ในความคิดเห็นในคำตอบที่ได้รับการยอมรับในขณะนี้ข้อเสนอแนะว่าให้ฉันเป็นทางออกที่ดีที่สุด: ใช้jQuery.param ()

หากฉันใช้jQuery.param()ข้อมูลในคำถามเดิมรหัสจะเป็นเพียง:

const params = jQuery.param({
    var1: 'value',
    var2: 'value'
});

ตัวแปรparamsจะเป็น

"var1=value&var2=value"

สำหรับตัวอย่างที่มีความซับซ้อนมากขึ้นปัจจัยการผลิตและผลผลิตดูjQuery.param ()เอกสาร

เราเพิ่งเปิดตัวarg.jsซึ่งเป็นโครงการที่มุ่งแก้ปัญหานี้ครั้งแล้วครั้งเล่า ตามเนื้อผ้ามันยากมาก แต่ตอนนี้คุณสามารถทำได้:

var querystring = Arg.url({name: "Mat", state: "CO"});

และการอ่านผลงาน:

var name = Arg("name");

หรือรับล็อตทั้งหมด:

var params = Arg.all();

และหากคุณสนใจเกี่ยวกับความแตกต่างระหว่าง?query=trueและ#hash=trueจากนั้นคุณสามารถใช้Arg.query()และArg.hash()วิธีการ

สิ่งนี้ควรทำงาน:

const createQueryParams = params => 
      Object.keys(params)
            .map(k => `${k}=${encodeURI(params[k])}`)
            .join('&');

ตัวอย่าง:

const params = { name : 'John', postcode: 'W1 2DL'}
const queryParams = createQueryParams(params)

ผลลัพธ์:

name=John&postcode=W1%202DL

ES2017 (ES8)

การใช้ประโยชน์Object.entries()ซึ่งส่งคืนอาร์เรย์ของ[key, value]คู่ของวัตถุ ตัวอย่างเช่นสำหรับมันจะกลับมา{a: 1, b: 2} [['a', 1], ['b', 2]]ไม่รองรับ (และจะไม่เป็น) เฉพาะโดย IE

รหัส:

const buildURLQuery = obj =>
      Object.entries(obj)
            .map(pair => pair.map(encodeURIComponent).join('='))
            .join('&');

ตัวอย่าง:

buildURLQuery({name: 'John', gender: 'male'});

ผลลัพธ์:

"name=John&gender=male"

หากคุณใช้PrototypeจะมีForm.serialize

หากคุณใช้jQueryจะมีAjax / serialize

ฉันไม่รู้ว่ามีฟังก์ชั่นอิสระใด ๆ ที่จะทำสิ่งนี้ให้สำเร็จ แต่การค้นหาโดย Google พบว่ามีตัวเลือกที่น่าสนใจหากคุณไม่ได้ใช้ห้องสมุด แต่ถ้าคุณไม่เป็นเช่นนั้นคุณควรจะเป็นเพราะสวรรค์

เช่นเดียวกับการทบทวนคำถามเก่าเกือบ 10 ปีนี้ ในยุคของการเขียนโปรแกรมนอกสถานที่นี้ทางออกที่ดีที่สุดของคุณคือการตั้งค่าโครงการของคุณโดยใช้ตัวจัดการการพึ่งพา ( npm) มีห้องสมุดอุตสาหกรรมกระท่อมทั้งหมดที่เข้ารหัสสตริงการสืบค้นและดูแลกรณีขอบทั้งหมด นี่คือหนึ่งในคนที่ได้รับความนิยมมากขึ้น -

https://www.npmjs.com/package/query-string

การปรับเปลี่ยน typescript เล็กน้อย:

  public encodeData(data: any): string {
    return Object.keys(data).map((key) => {
      return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
  }

เธรดนี้ชี้ไปที่รหัสบางส่วนสำหรับการหลีกเลี่ยง URL ใน php มีescape()และunescape()ที่จะทำงานส่วนใหญ่ แต่คุณต้องเพิ่มสิ่งพิเศษอีกสองสามอย่าง

function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}

function urldecode(str) {
str = str.replace('+', ' ');
str = unescape(str);
return str;
}