كيفية بناء سلسلة الاستعلام مع جافا سكريبت

Question

أتساءل فقط إذا كان هناك أي شيء بنيت في جافا سكريبت التي يمكن أن تأخذ شكل والعودة معلمات الاستعلام, على سبيل المثال:"var1=القيمة&var2=value2&arr[]=فو&arr[]=شريط..."

لقد كنت أتساءل هذا لسنوات.

Answer 1

وحاولت البحث عن إجابة لهذا السؤال منذ بعض الوقت، ولكن انتهى بي الأمر كتابة وظيفة بلدي الذي يستخرج القيم من النموذج ..

وانها ليست مثالية لكنها تتلاءم احتياجاتي.

function form_params( form )
{
    var params = new Array()
    var length = form.elements.length
    for( var i = 0; i < length; i++ )
    {
        element = form.elements[i]

        if(element.tagName == 'TEXTAREA' )
        {
            params[element.name] = element.value
        }
        else if( element.tagName == 'INPUT' )
        {
            if( element.type == 'text' || element.type == 'hidden' || element.type == 'password')
            {
                params[element.name] = element.value
            }
            else if( element.type == 'radio' && element.checked )
            {
                if( !element.value )
                    params[element.name] = "on"
                else
                    params[element.name] = element.value

            }
            else if( element.type == 'checkbox' && element.checked )
            {
                if( !element.value )
                    params[element.name] = "on"
                else
                    params[element.name] = element.value
            }
        }
    }
    return params;
}

وform_params إرجاع (الرئيسي -> القيمة) رسم الخرائط من المعلمات. المدخل هو عنصر النموذج (DOM العنصر)

وانها لا تعامل مع الحقول التي تسمح اختيار متعددة.

Answer 2

وبدون مسج

var params = {
    parameter1: 'value_1',
    parameter2: 'value 2',
    parameter3: 'value&3' 
};

var esc = encodeURIComponent;
var query = Object.keys(params)
    .map(k => esc(k) + '=' + esc(params[k]))
    .join('&');

لالمتصفحات التي لا تدعم السهم وظيفة في بناء الجملة الذي يتطلب ES5، تغيير الخط .map... إلى

    .map(function(k) {return esc(k) + '=' + esc(params[k]);})

Answer 3

إذا كنت تستخدم مسج قد ترغب في التحقق من jQuery.param() HTTP: //api.jquery. كوم / jQuery.param /

مثال:

var params = {
    parameter1: 'value1',
    parameter2: 'value2',
    parameter3: 'value3' 
};
​var query = $.param(params);
document.write(query);

Answer 4

وهذا لا يجيب مباشرة على سؤالك، ولكن هنا وظيفة عامة الأمر الذي سيخلق URL الذي يحتوي على معلمات سلسلة الاستعلام. المعلمات (الأسماء والقيم) وهرب بأمان لإدراجها في URL.

function buildUrl(url, parameters){
  var qs = "";
  for(var key in parameters) {
    var value = parameters[key];
    qs += encodeURIComponent(key) + "=" + encodeURIComponent(value) + "&";
  }
  if (qs.length > 0){
    qs = qs.substring(0, qs.length-1); //chop off last "&"
    url = url + "?" + qs;
  }
  return url;
}

// example:
var url = "http://example.com/";

var parameters = {
  name: "George Washington",
  dob: "17320222"
};

console.log(buildUrl(url, parameters));
// => http://www.example.com/?name=George%20Washington&dob=17320222

Answer 5

هناك الآن واجهات برمجة التطبيقات هذه ، على وجه التحديد URLSearchParams API.على سبيل المثال المعطى:

const params = new URLSearchParams();
const formvals = {
   var1: "value",
   var2: "value2",
   arr: "foo",
};
for (const [key, val] of Object.entries(formvals)) {
   params.append(key, val);
}
console.log(params.toString());
// var1=value&var2=value2&arr=foo

ملاحظة: فمن جميلة متوافقة مع كروم و فايرفوكس في هذه الأيام, ولكن كن حذرا إذا كنت بحاجة إلى العمل مع مايكروسوفت و أبل المتصفحات منذ التوافق الجزئي.

Answer 6

ومع مسج يمكنك القيام بذلك عن طريق $.param

$.param({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })

// -> "action=ship&order_id=123&fees%5B%5D=f1&fees%5B%5D=f2&label=a+demo"

Answer 7

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"

Answer 8

لا، لا أعتقد القياسية جافا سكريبت والتي بنيت في، ولكن نموذج JS لديها أن وظيفة (الأطر JS بالتأكيد الأكثر أخرى لها أيضا، ولكن أنا لا أعرف منهم)، يسمونها <أ href = على "HTTP : //www.prototypejs.org/api/form/serialize "يختلط =" noreferrer "> تسلسل .

ويمكنني أن أوصي نموذج JS، وأنها تعمل على ما يرام تماما. والعيب الوحيد لقد لاحظت حقا انها حجم (بضع مئات كيلوبايت) ونطاق (الكثير من رمز لاياكس، دوم، وما إلى ذلك). وبالتالي إذا كنت تريد فقط مسلسل الشكل الذي هو مبالغة، وبالمعنى الدقيق للكلمة إذا كنت تريد فقط انها وظيفة اياكس (اللي تبونه هو أساسا ما كنت عليه ل) انها مبالغة. إلا إذا كنت حذرا قد تجد أنه يفعل القليل من الكثير "السحر" (مثل توسيع كل عنصر دوم أنها تمس وظائف نموذج JS فقط للعثور على العناصر) مما يجعلها بطيئة في الحالات القصوى.

Answer 9

سلسلة استعلام مواقع المعلومات يمكن أن تساعد.

وهكذا، يمكنك

const querystring = require('querystring')

url += '?' + querystring.stringify(parameters)

Answer 10

إذا كنت لا ترغب في استخدام المكتبة، وهذا ينبغي أن تغطي معظم / كل نفس أنواع عنصر النموذج.

function serialize(form) {
  if (!form || !form.elements) return;

  var serial = [], i, j, first;
  var add = function (name, value) {
    serial.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));
  }

  var elems = form.elements;
  for (i = 0; i < elems.length; i += 1, first = false) {
    if (elems[i].name.length > 0) { /* don't include unnamed elements */
      switch (elems[i].type) {
        case 'select-one': first = true;
        case 'select-multiple':
          for (j = 0; j < elems[i].options.length; j += 1)
            if (elems[i].options[j].selected) {
              add(elems[i].name, elems[i].options[j].value);
              if (first) break; /* stop searching for select-one */
            }
          break;
        case 'checkbox':
        case 'radio': if (!elems[i].checked) break; /* else continue */
        default: add(elems[i].name, elems[i].value); break;
      }
    }
  }

  return serial.join('&');
}

Answer 11

وأنت لا تحتاج في الواقع شكل للقيام بذلك مع النموذج. مجرد استخدام Object.toQueryString وظيفة :

Object.toQueryString({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })

// -> 'action=ship&order_id=123&fees=f1&fees=f2&label=a%20demo'

Answer 12

وأنا لست على يقين تماما نفسي، وأنا أذكر رؤية مسج فعل ذلك إلى حد ما، لكنه لا يعالج السجلات الهرمية على الإطلاق، ناهيك بطريقة فب دية.

وشيء واحد أنا أعرف على وجه اليقين، هو عند بناء عناوين وإصرارها على المنتج في دوم، لا مجرد استخدام سلسلة الغراء للقيام بذلك، أو عليك أن تكون فتح نفسك لالكسارة الصفحة مفيد.

وعلى سبيل المثال، برنامج إعلاني معين في خطوط سلسلة إصدار من كل ما يعمل المحمول. هذا على ما يرام عندما Adobe ق في عام سلسلة بسيطة، ولكن مع ذلك، أنه من السذاجة جدا، ويفجر في فوضى محرج بالنسبة للأشخاص الذين قد قمت بتثبيت صر، كما gnash'es إصدار سلسلة يحدث لاحتواء كامل التراخيص حقوق التأليف والنشر GPL في مهب، مع استكمال عناوين و. باستخدام هذا في بلدكم مولد المعلن سلسلة الغراء، والنتائج في الصفحة تهب مفتوحة، وبعد HTML غير المتوازنة تحول حتى في دوم.

ووالمغزى من القصة:

   var foo = document.createElement("elementnamehere"); 
   foo.attribute = allUserSpecifiedDataConsideredDangerousHere; 
   somenode.appendChild(foo); 

لا:

   document.write("<elementnamehere attribute=\"" 
        + ilovebrokenwebsites 
        + "\">" 
        + stringdata 
        + "</elementnamehere>");

<الفرعية> <الفرعية> جوجل بحاجة إلى أن نتعلم هذه الخدعة. حاولت إبلاغ عن المشكلة، فإنها تظهر عدم الاكتراث.

Answer 13

وكما يقول شتاين، يمكنك استخدام النموذج جافا سكريبت مكتبة من http://www.prototypejs.org . تشمل JS وأنها بسيطة جدا ثم، سوف $('formName').serialize() عودة ما تريد!

Answer 14

لأولئك منا الذين يفضلون مسج، هل استخدام النموذج المساعد: HTTP: // الإضافات. jquery.com/project/form ، والذي يحتوي على طريقة formSerialize.

Answer 15

ويمكنك القيام بذلك في الوقت الحاضر مع FormData وURLSearchParams دون الحاجة إلى حلقة أكثر من أي شيء.

const formData = new FormData(form);
const searchParams = new URLSearchParams(formData);
const queryString = searchParams.toString();

والمتصفحات القديمة سوف تحتاج إلى polyfill، وإن كان.

Answer 16

وهذه الإجابات هي مفيدة جدا، ولكن أريد أن إضافة إجابة أخرى، يمكن أن تساعدك على بناء URL الكامل. هذا يمكن أن تساعدك CONCAT قاعدة url، path، hash وparameters.

var url = buildUrl('http://mywebsite.com', {
        path: 'about',
        hash: 'contact',
        queryParams: {
            'var1': 'value',
            'var2': 'value2',
            'arr[]' : 'foo'
        }
    });
    console.log(url);

ويمكنك تنزيل عبر الآلية الوقائية الوطنية https://www.npmjs.com/package/build- رابط

وعرض توضيحي:

;(function () {
  'use strict';

  var root = this;
  var previousBuildUrl = root.buildUrl;

  var buildUrl = function (url, options) {
    var queryString = [];
    var key;
    var builtUrl;
    var caseChange; 
    
    // 'lowerCase' parameter default = false,  
    if (options && options.lowerCase) {
        caseChange = !!options.lowerCase;
    } else {
        caseChange = false;
    }

    if (url === null) {
      builtUrl = '';
    } else if (typeof(url) === 'object') {
      builtUrl = '';
      options = url;
    } else {
      builtUrl = url;
    }

    if(builtUrl && builtUrl[builtUrl.length - 1] === '/') {
      builtUrl = builtUrl.slice(0, -1);
    } 

    if (options) {
      if (options.path) {
          var localVar = String(options.path).trim(); 
          if (caseChange) {
            localVar = localVar.toLowerCase();
          }
          if (localVar.indexOf('/') === 0) {
              builtUrl += localVar;
          } else {
            builtUrl += '/' + localVar;
          }
      }

      if (options.queryParams) {
        for (key in options.queryParams) {
          if (options.queryParams.hasOwnProperty(key) && options.queryParams[key] !== void 0) {
            var encodedParam;
            if (options.disableCSV && Array.isArray(options.queryParams[key]) && options.queryParams[key].length) {
              for(var i = 0; i < options.queryParams[key].length; i++) {
                encodedParam = encodeURIComponent(String(options.queryParams[key][i]).trim());
                queryString.push(key + '=' + encodedParam);
              }
            } else {              
              if (caseChange) {
                encodedParam = encodeURIComponent(String(options.queryParams[key]).trim().toLowerCase());
              }
              else {
                encodedParam = encodeURIComponent(String(options.queryParams[key]).trim());
              }
              queryString.push(key + '=' + encodedParam);
            }
          }
        }
        builtUrl += '?' + queryString.join('&');
      }

      if (options.hash) {
        if(caseChange)
            builtUrl += '#' + String(options.hash).trim().toLowerCase();
        else
            builtUrl += '#' + String(options.hash).trim();
      }
    } 
    return builtUrl;
  };

  buildUrl.noConflict = function () {
    root.buildUrl = previousBuildUrl;
    return buildUrl;
  };

  if (typeof(exports) !== 'undefined') {
    if (typeof(module) !== 'undefined' && module.exports) {
      exports = module.exports = buildUrl;
    }
    exports.buildUrl = buildUrl;
  } else {
    root.buildUrl = buildUrl;
  }
}).call(this);


var url = buildUrl('http://mywebsite.com', {
		path: 'about',
		hash: 'contact',
		queryParams: {
			'var1': 'value',
			'var2': 'value2',
			'arr[]' : 'foo'
		}
	});
	console.log(url);

Answer 17

هل هو على الارجح بعد فوات الأوان أن أجيب على سؤالك.
كان لي نفس السؤال وأنا لم ترغب في الاحتفاظ إلحاق السلاسل إلى إنشاء URL. لذلك، بدأت باستخدام $ .param كما techhouse أوضح.
كما أنني وجدت URI.js مكتبة أن يخلق عناوين المواقع بسهولة بالنسبة لك. وهناك العديد من الأمثلة التي سوف تساعدك على: URI.js الوثائق <ر > هنا هو واحد منهم:

var uri = new URI("?hello=world");
uri.setSearch("hello", "mars"); // returns the URI instance for chaining
// uri == "?hello=mars"

uri.setSearch({ foo: "bar", goodbye : ["world", "mars"] });
// uri == "?hello=mars&foo=bar&goodbye=world&goodbye=mars"

uri.setSearch("goodbye", "sun");
// uri == "?hello=mars&foo=bar&goodbye=sun"

// CAUTION: beware of arrays, the following are not quite the same
// If you're dealing with PHP, you probably want the latter…
uri.setSearch("foo", ["bar", "baz"]);
uri.setSearch("foo[]", ["bar", "baz"]);`

Answer 18

var params = { width:1680, height:1050 };
var str = jQuery.param( params );

console.log(str)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>