Просто интересно, есть ли что-нибудь встроенное в Javascript, которое может принимать форму и возвращать параметры запроса, например: "var1=value&var2=value2&arr[]=foo&arr[]=bar..."
Я думал об этом годами.
javascript
string
forms
get
Liam
источник
источник
Ответы:
Я пытался найти ответ на этот вопрос некоторое время назад, но в итоге я написал свою собственную функцию, которая извлекает значения из формы.
это не идеально, но это соответствует моим потребностям.
form_params возвращает (ключ -> значение) отображение параметров. вход является элементом формы (элемент DOM)
Он не обрабатывает поля, которые допускают множественный выбор.
источник
new Array()
для инициализации словаря. Но опять же, код выглядит намного чище, чем та чушь, которую я бы написал в эти дни!Обновление 2k20: используйте решение Джоша с URLSearchParams.toString () .
Старый ответ:
Без jQuery
Для браузеров, которые не поддерживают синтаксис функции стрелки, для которой требуется ES5, измените
.map...
строку наисточник
Если вы используете JQuery, вы можете проверить
jQuery.param()
http://api.jquery.com/jQuery.param/Пример:
источник
$.param($('#myform').serializeArray())
.$('#myform').serialize()
jQuery !== JavaScript
jQuery.param()
здесь github.com/jquery/jquery/blob/master/src/serialize.js :)someStr=value1&someObj[a]=5&someObj[b]=6&someArr[]=1&someArr[]=2
API URLSearchParams доступен во всех современных браузерах. Например:
источник
params.append(key, value)
позже для добавления новых параметров поиска в более сложных сценариях.x=null&y=undefined
const url = new URL("https://stackoverflow.com")
), вы можете установить его строки запросаurl.search = new URLSearchParams({foo: "bar"})
илиurl.searchParams.append("foo", "bar")
Это не дает прямого ответа на ваш вопрос, но вот общая функция, которая создаст URL, содержащий параметры строки запроса. Параметры (имена и значения) безопасно экранируются для включения в URL.
источник
new Array
время, когда вы фактически используете ее как объект? о, оС помощью jQuery вы можете сделать это
$.param
источник
ES2017 (ES8)
Использование
Object.entries()
, которое возвращает массив[key, value]
пар объекта . Например, для{a: 1, b: 2}
него вернутся[['a', 1], ['b', 2]]
. Это не поддерживается (и не будет) только IE.Код:
Пример:
Результат:
источник
Нет, я не думаю, что в стандартном JavaScript это встроено, но в Prototype JS есть эта функция (конечно, в большинстве других сред JS тоже есть, но я их не знаю), они называют ее сериализацией. .
Я могу порекомендовать Prototype JS, он работает вполне нормально. Единственный недостаток, который я действительно заметил, это его размер (несколько сотен килобайт) и объем (много кода для ajax, dom и т. Д.). Таким образом, если вам нужен только сериализатор форм, это излишне, и, строго говоря, если вы хотите, чтобы это была только функциональность Ajax (в основном это то, для чего я его использовал), это излишне. Если вы не будете осторожны, вы можете обнаружить, что он делает слишком много «магии» (например, расширяет каждый элемент dom, которого он касается, с помощью функций Prototype JS просто для поиска элементов), делая его медленным в крайних случаях.
источник
Строка запроса может помочь.
Так что вы можете
источник
Если вы не хотите использовать библиотеку, это должно охватывать большинство / все одинаковые типы элементов формы.
источник
Вам на самом деле не нужна форма, чтобы сделать это с Prototype. Просто используйте функцию Object.toQueryString :
источник
Вы можете сделать это в настоящее время с
FormData
иURLSearchParams
без необходимости зацикливаться на чем-либо.Тем не менее, в старых браузерах потребуется полифилл.
источник
Я не совсем уверен, я помню, что jQuery делал это до некоторой степени, но он вообще не обрабатывает иерархические записи, не говоря уже о php-дружественном способе.
Я точно знаю одну вещь: когда вы создаете URL-адреса и вставляете продукт в dom, не просто используйте для этого строковый клей, иначе вы откроете себя для удобного средства разбиения страниц.
Например, определенное рекламное программное обеспечение вставляет строку версии из того, что запускает вашу флеш-память. Это хорошо, когда он использует общую простую строку, но, тем не менее, это очень наивно и взрывается в смущающем беспорядке для людей, которые установили Gnash, поскольку строка версии gnash'а содержит полную лицензию на авторские права GPL с URL-адресами. и <a href> теги. Использование этого в генераторе рекламодателя со связыванием строк приводит к тому, что страница открывается, и в домене появляется неуравновешенный HTML.
Мораль этой истории:
Не:
Google нужно научиться этому трюку. Я пытался сообщить о проблеме, они, кажется, не волнует.
источник
Как говорит Стейн, вы можете использовать библиотеку прототипов javascript с http://www.prototypejs.org . Включите JS, и это очень просто,
$('formName').serialize()
вернет, что вы хотите!источник
Для тех из нас, кто предпочитает jQuery, вы можете использовать плагин формы: http://plugins.jquery.com/project/form , который содержит метод formSerialize.
источник
Может быть, немного излишним, но самый чистый способ, который я нашел, основывается на некоторых из ответов здесь:
Источник
источник
Эти ответы очень полезны, но я хочу добавить еще один ответ, который может помочь вам создать полный URL. Это может помочь вам CONCAT базы
url
,path
,hash
иparameters
.Вы можете скачать через npm https://www.npmjs.com/package/build-url
Демо-версия:
источник
Я знаю, что это очень поздний ответ, но работает очень хорошо ...
примечание: object.entries вернет ключ, пары значений
Надеюсь, это поможет кому-то.
Удачного кодирования ...
источник
Возможно, уже слишком поздно, чтобы ответить на ваш вопрос.
У меня был тот же вопрос, и я не хотел добавлять строки для создания URL. Итак, я начал использовать $ .param, как объяснил techhouse .
Я также нашел библиотеку URI.js, которая легко создает URL-адреса для вас. Есть несколько примеров, которые помогут вам: URI.js Документация .
Вот один из них:
источник
источник