URL Кодировать строку в jQuery для запроса AJAX


217

Я внедряю мгновенный поиск Google в своем приложении. Я хотел бы отключить HTTP-запросы, когда пользователь вводит текст. Единственная проблема, с которой я сталкиваюсь, заключается в том, что, когда пользователь попадает в пробел между именем и фамилией, пробел не кодируется как +, тем самым нарушая поиск. Как я могу заменить пробел на +, или просто безопасно URL кодировать строку?

$("#search").keypress(function(){       
    var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val();
    var options = {};
    $("#results").html(ajax_load).load(query);
});

Вы можете использовать $.param.
jpaugh

Ответы:


490

Попробуйте кодировать URIComponent .

Кодирует компонент универсального идентификатора ресурса (URI), заменяя каждый экземпляр определенных символов одной, двумя, тремя или четырьмя escape-последовательностями, представляющими кодировку символа UTF-8 (будет только четыре escape-последовательности для символов, состоящих из двух «суррогатов» " персонажи).

Пример:

var encoded = encodeURIComponent(str);

2
Это решило мою проблему - когда я передавал URL-адрес в качестве параметра для моего AJAX-запроса, он терял все после символа & для всех строк запроса в нем. Когда я добавил это, это решило мою проблему. Спасибо!
Джерм

21

у меня отлично работает encodeURIComponent . мы можем дать URL-адрес, как это в вызове ajax. Код, показанный ниже:

  $.ajax({
    cache: false,
    type: "POST",
    url: "http://atandra.mivamerchantdev.com//mm5/json.mvc?Store_Code=ATA&Function=Module&Module_Code=thub_connector&Module_Function=THUB_Request",
    data: "strChannelName=" + $('#txtupdstorename').val() + "&ServiceUrl=" + encodeURIComponent($('#txtupdserviceurl').val()),
    dataType: "HTML",
    success: function (data) {
    },
    error: function (xhr, ajaxOptions, thrownError) {
    }
  });

9

Лучший способ:

encodeURIComponent экранирует все символы, кроме следующих:alphabetic, decimal digits, - _ . ! ~ * ' ( )

Чтобы избежать неожиданных запросов к серверу, вы должны вызывать encodeURIComponent для любых введенных пользователем параметров, которые будут переданы как часть URI. Например, пользователь может ввести «Thyme & time = again» для комментария к переменной. Если вы не используете encodeURIComponent для этой переменной, вы получите комментарий = Thyme% 20 & time = снова. Обратите внимание, что амперсанд и знак равенства обозначают новую пару ключ и значение. Таким образом, вместо того, чтобы иметь ключ комментария POST, равный «Thyme & time = again», у вас есть два ключа POST, один из которых равен «Thyme», а другой (time) - снова.

Для application / x-www-form-urlencoded (POST), согласно http://www.w3.org/TR/html401/interac...m-content-type , пробелы должны быть заменены на «+», поэтому Можно выполнить замену encodeURIComponent с дополнительной заменой «% 20» на «+».

Если кто-то хочет быть более строгим в соблюдении RFC 3986 (который резервирует!, ', (,) И *), даже если эти символы не имеют формализованного использования с разделителями URI, можно безопасно использовать следующее:

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

1
For application/x-www-form-urlencoded (POST), per http://www.w3.org/TR/html401/interac...m-content-type, spaces are to be replaced by '+', so one may wish to follow a encodeURIComponent replacement with an additional replacement of "%20" with "+".Как это сделать?
Винс Кронляйн

1
но для того, чтобы это было полезно, должен быть эквивалент urldecode
Мистер Хилис

5

Я использую MVC3 / EntityFramework в качестве бэкэнда, интерфейс использует все мои контроллеры проекта через jquery, для публикации напрямую (с использованием $ .post) не требуется указание данных, когда вы передаете параметры напрямую, а не URL, жестко закодированные. Я уже протестировал несколько символов, я даже отправил URL (этот http://www.ihackforfun.eu/index.php?title=update-on-url-crazy&more=1&c=1&tb=1&pb=1 ) в качестве параметра и имел нет проблем вообще, хотя encodeURIComponent прекрасно работает, когда вы передаете все данные в URL (жестко закодированы)

URL в жестком коде, т.е.>

 var encodedName = encodeURIComponent(name);
 var url = "ControllerName/ActionName/" + encodedName + "/" + keyword + "/" + description + "/" + linkUrl + "/" + includeMetrics + "/" + typeTask + "/" + project + "/" + userCreated + "/" + userModified + "/" + status + "/" + parent;; // + name + "/" + keyword + "/" + description + "/" + linkUrl + "/" + includeMetrics + "/" + typeTask + "/" + project + "/" + userCreated + "/" + userModified + "/" + status + "/" + parent;

В противном случае не используйте encodeURIComponent и попробуйте передать параметры в методе ajax post

 var url = "ControllerName/ActionName/";   
 $.post(url,
        { name: nameVal, fkKeyword: keyword, description: descriptionVal, linkUrl: linkUrlVal, includeMetrics: includeMetricsVal, FKTypeTask: typeTask, FKProject: project, FKUserCreated: userCreated, FKUserModified: userModified, FKStatus: status, FKParent: parent },
 function (data) {.......});

3
Это было бы, вероятно, лучшим решением в то время :)
Brian D

0

Попробуй это

var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val().replace(/ /g, '+');

5
Решение Андерса Фьелдстада намного лучше. Замена пробелов со знаком плюс может сработать, но если у вас есть другие символы (с умляутами и т. Д.), У вас будет куча неприятностей.
Uku Loskit

1
@Uku: OP хотел заменить пробел на +, поэтому я дал ему ответ, как это сделать. encodeURIComponent дает ему% 20
генезис

2
Я думаю, что @Uku прав. Хотя это действительно отвечает на буквальный вопрос (и это определенно работает), я думаю, что решение @ Anders лучше в более широком смысле.
Брайан Д
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.