URL Menyandikan string dalam jQuery untuk permintaan AJAX

217

Saya menerapkan Pencarian Instan Google di aplikasi saya. Saya ingin menjalankan permintaan HTTP saat pengguna mengetik input teks. Satu-satunya masalah yang saya alami adalah bahwa ketika pengguna mendapatkan ruang di antara nama depan dan belakang, ruang tersebut tidak dikodekan sebagai +, sehingga melanggar pencarian. Bagaimana saya bisa mengganti ruang dengan +, atau hanya dengan aman URL Menyandikan string?

$("#search").keypress(function(){       
    var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val();
    var options = {};
    $("#results").html(ajax_load).load(query);
});
Brian D
sumber
Anda bisa menggunakannya $.param.
jpaugh

Jawaban:

490

Coba komponen encodeURIC .

Mengkodekan komponen Uniform Resource Identifier (URI) dengan mengganti setiap instance karakter tertentu dengan satu, dua, tiga, atau empat sekuens escape yang mewakili pengkodean karakter UTF-8 (hanya akan empat sekuens escape untuk karakter yang terdiri dari dua "pengganti) "karakter).

Contoh:

var encoded = encodeURIComponent(str);
Anders Fjeldstad
sumber
2
Ini menyelesaikan masalah saya - ketika saya mengirimkan URL sebagai parameter untuk permintaan AJAX saya, URL kehilangan segalanya setelah & untuk setiap string kueri di dalamnya. Ketika saya menambahkan ini, itu memecahkan masalah saya. Terima kasih!
theJerm
21

komponen encodeURIC berfungsi dengan baik untuk saya. kita dapat memberikan url seperti ini di ajax call. Kode yang ditunjukkan di bawah ini:

  $.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) {
    }
  });
Praveen04
sumber
9

Cara yang lebih baik:

komponen encodeURIC lolos dari semua karakter kecuali yang berikut:alphabetic, decimal digits, - _ . ! ~ * ' ( )

Untuk menghindari permintaan yang tidak terduga ke server, Anda harus memanggil komponen encodeURICon pada parameter yang dimasukkan pengguna yang akan diteruskan sebagai bagian dari URI. Misalnya, pengguna dapat mengetik "Thyme & time = lagi" untuk komentar variabel. Tidak menggunakan komponen encodeURICon pada variabel ini akan memberikan komentar = Thyme% 20 & waktu = lagi. Perhatikan bahwa tanda dan tanda yang sama menandai pasangan kunci dan nilai baru. Jadi alih-alih memiliki kunci komentar POST sama dengan "Thyme & time = again", Anda memiliki dua kunci POST, satu sama dengan "Thyme" dan satu lagi (waktu) sama dengan lagi.

Untuk aplikasi / x-www-form-urlencoded (POST), per http://www.w3.org/TR/html401/interac...m-content-type , spasi harus diganti dengan '+', jadi orang mungkin ingin mengikuti penggantian komponen encodeURIC dengan penggantian tambahan "% 20" dengan "+".

Jika seseorang ingin lebih ketat dalam mematuhi RFC 3986 (yang mencadangkan!, ', (,), Dan *), meskipun karakter ini tidak memiliki penggunaan pembatas URI yang diformalkan, hal berikut dapat digunakan dengan aman:

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}
StackOverFlow
sumber
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 "+".Bagaimana caranya?
Vince Kronlein
1
tetapi agar ini berguna, perlu ada
kode urcode yang
5

Saya menggunakan MVC3 / EntityFramework sebagai back-end, front-end mengkonsumsi semua pengontrol proyek saya melalui jquery, memposting secara langsung (menggunakan $ .post) tidak memerlukan enkripsi data, ketika Anda mengirimkan params secara langsung selain URL yang di-hardcode. Saya sudah menguji beberapa karakter saya bahkan mengirim URL (yang ini http://www.ihackforfun.eu/index.php?title=update-on-url-crazy&more=1&c=1&tb=1&pb=1 ) sebagai parameter dan memiliki tidak ada masalah sama sekali meskipun komponen encodeURIC berfungsi dengan baik ketika Anda melewatkan semua data di dalam URL (hardcoded)

URL Hardcoded yaitu>

 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;

Kalau tidak, jangan gunakan komponen encodeURIC dan sebaliknya mencoba melewati params di dalam metode post ajax

 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) {.......});
d1jhoni1b
sumber
3
Itu mungkin akan menjadi solusi yang lebih baik pada saat itu :)
Brian D
0

coba yang ini

var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val().replace(/ /g, '+');
asal
sumber
5
Solusi Anders Fjeldstad jauh lebih baik. Mengganti spasi dengan tanda plus mungkin berhasil, tetapi jika Anda memiliki karakter lain (dengan umlauts dll), Anda akan berada dalam tumpukan masalah.
Uku Loskit
1
@Uku: OP ingin mengganti spasi dengan + jadi saya memberinya jawaban bagaimana melakukannya. komponen encodeURIC memberinya% 20
genesis
2
Saya pikir @Uku benar. Meskipun ini menjawab pertanyaan literal (dan pasti berhasil), saya pikir solusi @ Anders lebih baik dalam skema yang lebih besar.
Brian D