Как построить строку запроса с Javascript

Question

Просто интересно, есть ли что-нибудь встроенное в Javascript, которое может взять Form и вернуть параметры запроса, например: "var1 = value & var2 = value2 & arr [] = foo & arr [] = bar ..."

Мне было интересно это годами.

Answer 1

Как говорит Стейн, вы можете использовать прототип библиотеки javascript из http://www.prototypejs.org. Включите JS, и тогда очень просто, $('formName').serialize() вернет то, что вы хотите!

Answer 2

Я сам не совсем уверен, я помню, что jQuery делал это до некоторой степени, но он вообще не обрабатывает иерархические записи, не говоря уже о php-дружественном способе.

Одна вещь, которую я точно знаю, это то, что при создании URL-адресов и размещении продукта в dom, не просто используйте для этого строковый клей, иначе вы откроете себя для удобного средства разбиения по страницам.

Например, определенное рекламное программное обеспечение вставляет строку версии из того, что запускает вашу флеш-память. Это хорошо, когда он применяет простую общую строку, но, тем не менее, это очень наивно и взрывается в смущающем беспорядке для людей, которые установили Gnash, поскольку строка версии gnash'а содержит полноразмерные лицензии на авторские права GPL с URL и теги. Использование этого в вашем генераторе рекламодателя со строковым клеем приводит к тому, что страница открывается, и в домене появляется дисбаланс HTML.

Мораль истории:

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

Не:

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

_{Google нужно изучить этот трюк. Я пытался сообщить о проблеме, они, кажется, не заботятся.}

Answer 3

Для тех из нас, кто предпочитает jQuery, вы должны использовать плагин формы: http://plugins.jquery.com/project/form,, который содержит метод formSerialize.

Answer 4

В настоящее время вы можете сделать это с FormData и URLSearchParams без необходимости зацикливаться на чем-либо.

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

Для старых браузеров потребуется полифилл.

Answer 5

Эти ответы очень полезны, но я хочу добавить еще один ответ, который может помочь вам создать полный URL. Это может помочь вам использовать базовые значения url, path, hash и parameters.

.

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

Вы можете скачать через npm https://www.npmjs.com/package/build-url

Демо-версия:

;(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 6

Я пытался найти ответ на этот вопрос некоторое время назад, но я закончил тем, что написал свою собственную функцию, которая извлекает значения из формы ..

это не идеально, но соответствует моим потребностям.

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 7

Возможно, уже слишком поздно, чтобы ответить на ваш вопрос.
У меня был тот же вопрос, и я не хотел добавлять строки для создания URL. Итак, я начал использовать $ .param, как объяснил techhouse .
Я также нашел библиотеку URI.js , которая легко создает URL-адреса для вас. Вот несколько примеров, которые помогут вам: Документация 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"]);`