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);
});

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);

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) {
    }
  });

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");
}

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) {.......});

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, '+');

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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.