URL Кодуйте рядок у jQuery для запиту AJAX


217

Я впроваджую Миттєвий пошук Google у своїй програмі. Я хотів би вимкнути HTTP-запити, як користувачі вводять текст. Єдина проблема, яка виникає у мене, полягає в тому, що, коли користувач потрапляє до пробілу між іменем та прізвищем, простір не кодується як a +, таким чином порушуючи пошук. Як я можу або замінити пробіл на +, або просто безпечно URL-кодувати рядок?

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

Можна використовувати $.param.
jpaugh

Відповіді:


490

Спробуйте encodeURIComponent .

Кодує компонент Уніфікованого ідентифікатора ресурсу (URI), замінюючи кожен екземпляр певних символів одним, двома, трьома або чотирма послідовностями, що представляють собою кодування UTF-8 символу (буде лише чотири послідовності виходу для символів, що складаються з двох "сурогатних" "символів".

Приклад:

var encoded = encodeURIComponent(str);

2
Це вирішило мою проблему - коли я передавав URL як параметр мого запиту AJAX, URL втрачав усе після & для будь-яких рядків запиту в ньому. Коли я додав це, це вирішило мою проблему. Дякую!
theJerm

21

encodeURIComponent добре працює для мене. ми можемо надати такий URL у call 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. Наприклад, користувач може ввести "Чебрець і час = знову" для змінного коментаря. Якщо не використовувати encodeURIComponent для цієї змінної, ви дасте коментар = Чебрець% 20 ​​& time = ще раз. Зауважте, що амперсанд та знак рівності означають нову пару ключів та значень. Отже, замість того, щоб мати ключ коментаря POST, рівний "Чебрець та час = знову", у вас є два ключі POST, один дорівнює "Чебрецю", а інший (час), рівний знову.

Для application / x-www-form-urlencoded (POST), за http://www.w3.org/TR/html401/interac...m-content-type , пробіли слід замінити на "+", так можна побажати заміни кодуURIComponent додатковою заміною "% 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 як бек-енд, front-end споживає всі мої контролери проектів через 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
Це, мабуть, було б кращим рішенням на той час :)
Брайан Д

0

спробуйте це

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

5
Рішення Андерса Фельдстада набагато краще. Заміна пробілів знаками плюс може спрацювати, але якщо у вас є інші символи (з умлаутами тощо), ви зіткнетеся з купою проблем.
Уку Лоскіт

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

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