AJAXリクエストのjQueryで文字列をURLエンコード


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 2015年

回答:


490

encodeURIComponentを試してください。

特定の文字の各インスタンスを、文字のUTF-8エンコーディングを表す1、2、3、または4つのエスケープシーケンスに置き換えることにより、Uniform Resource Identifier(URI)コンポーネントをエンコードします(2つの「代理」で構成される文字のエスケープシーケンスは4つだけになります"文字)。

例:

var encoded = encodeURIComponent(str);

2
これは私の問題を解決しました-AJAXリクエストにパラメーターとしてURLを渡したとき、URLは&の後のクエリ文字列の後にすべてを失っていました。これを追加したところ、問題は解決しました。ありがとう!
theJerm 2014

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, - _ . ! ~ * ' ( )

サーバーへの予期しない要求を回避するには、URIの一部として渡されるユーザー入力のパラメーターでencodeURIComponentを呼び出す必要があります。たとえば、ユーザーは変数コメントに「タイム&time = again」と入力できます。この変数でencodeURIComponentを使用しないと、comment = Thyme%20&time = againが返されます。アンパサンドと等号が新しいキーと値のペアをマークしていることに注意してください。したがって、「タイム&time = again」に等しいPOSTコメントキーの代わりに、2つのPOSTキーがあり、1つは「タイム」に等しく、もう1つ(時間)は等しい。

application / x-www-form-urlencoded(POST)の場合、http://www.w3.org/TR/html401/interac...m-content-typeに従って、スペースは「+」に置き換えられるため、 「%20」を「+」でさらに置き換えて、encodeURIComponentの置き換えを追跡することもできます。

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 "+".これはどのように行うのですか?
Vince Kronlein 2013

1
しかし、これを有効にするには、同等のurldecodeが必要になります
Heelis Mr Jun '

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)をパラメーターとして送信し、URL内ですべてのデータを渡す場合(encodeURIComponent)はうまく機能しますが、問題はありません(ハードコードされています)

ハードコードされたURL ie>

 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メソッド内でparamsを渡してみてください

 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
Anders Fjeldstadのソリューションははるかに優れています。スペースをプラス記号で置き換えることもできますが、他の文字(ウムラウトなど)がある場合、問題が山積みになります。
ウクロキット

1
@Uku:OPは空白を+に置き換えたかったので、その方法を彼に答えました。encodeURIComponentは彼に%20を与えます
創世記

2
@Ukuは正しいと思います。これは文字通りの質問には答えます(そしてそれは間違いなく機能します)が、@ Andersの解決策は、より大きなスキームで優れていると思います。
ブライアンD
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.