URL เข้ารหัสสตริงใน jQuery สำหรับคำขอ AJAX


217

ฉันกำลังใช้การค้นหาทันใจของ Google ในแอปพลิเคชันของฉัน ฉันต้องการปิดการร้องขอ HTTP เนื่องจากผู้ใช้พิมพ์ในการป้อนข้อความ ปัญหาเดียวที่ฉันมีคือเมื่อผู้ใช้เข้าถึงช่องว่างระหว่างชื่อและนามสกุลช่องว่างไม่ได้เข้ารหัสเป็น a +จึงเป็นการทำลายการค้นหา ฉันจะแทนที่พื้นที่ด้วย 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

เข้ารหัส Uniform Resource Identifier (URI) ส่วนประกอบโดยการแทนที่แต่ละอินสแตนซ์ของตัวละครบางตัวด้วยหนึ่ง, สอง, สามหรือสี่ลำดับหนีแทนการเข้ารหัส UTF-8 ของตัวละคร (จะเป็นสี่ลำดับหนีสำหรับตัวละครประกอบด้วยสอง "ตัวแทน "ตัวอักษร)

ตัวอย่าง:

var encoded = encodeURIComponent(str);

2
วิธีนี้ช่วยแก้ไขปัญหาของฉัน - เมื่อฉันส่งผ่าน URL เป็นพารามิเตอร์ไปยังคำขอ AJAX ของฉัน URL สูญเสียทุกอย่างหลังจาก & สำหรับสตริงการสืบค้นใด ๆ เมื่อฉันเพิ่มสิ่งนี้นั่นก็แก้ปัญหาของฉันได้ ขอบคุณ!
theJerm

21

การเข้ารหัสอุปกรณ์ทำงานได้ดีสำหรับฉัน เราสามารถให้ URL เช่นนี้ใน ajax call รหัสที่แสดงด้านล่าง:

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

เพื่อหลีกเลี่ยงการร้องขอที่ไม่คาดคิดไปยังเซิร์ฟเวอร์คุณควรเรียกใช้ encodeURIC ประกอบด้วยพารามิเตอร์ที่ผู้ใช้ป้อนซึ่งจะถูกส่งผ่านเป็นส่วนหนึ่งของ URI ตัวอย่างเช่นผู้ใช้สามารถพิมพ์ "Thyme & time = อีกครั้ง" สำหรับความคิดเห็นตัวแปร การไม่ใช้ encodeURIComponent กับตัวแปรนี้จะให้ความเห็น = Thyme% 20 & time = อีกครั้ง โปรดทราบว่าเครื่องหมายและเครื่องหมายเท่ากับเครื่องหมายคู่ใหม่ของคีย์และค่า ดังนั้นแทนที่จะมีคีย์ความคิดเห็น POST เท่ากับ "Thyme & time = อีกครั้ง" คุณจะมีสองคีย์ POST หนึ่งอันเท่ากับ "Thyme" และอีกอัน (เวลา) เท่ากับอีกครั้ง

สำหรับแอปพลิเคชัน / x-www-form-urlencoded (POST) ต่อhttp://www.w3.org/TR/html401/interac...m-content-typeช่องว่างจะถูกแทนที่ด้วย '+' ดังนั้น หนึ่งอาจต้องการที่จะปฏิบัติตามการเปลี่ยน encodeURIC ประกอบกับการแทนที่ "% 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 "+".คนเราจะทำสิ่งนี้ได้อย่างไร
Vince Kronlein

1
แต่สำหรับสิ่งนี้จะเป็นประโยชน์จะต้องมีการเทียบเท่า urldecode
Mr Heelis

5

ฉันใช้ MVC3 / EntityFramework เป็นแบ็คเอนด์ส่วนหน้าใช้ตัวควบคุมโครงการทั้งหมดของฉันผ่าน jquery การโพสต์โดยตรง (โดยใช้ $. post) ไม่ต้องการการบังคับใช้ข้อมูลเมื่อคุณผ่าน params อื่นนอกเหนือจาก URL hardcoded โดยตรง ฉันทดสอบตัวอักษรหลายตัวฉันได้ส่ง 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 และลองส่ง params ภายในวิธีการ 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
ที่จะได้รับอาจเป็นทางออกที่ดีในเวลา :)
ไบรอัน D

0

ลองอันนี้

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

5
วิธีแก้ปัญหาของ Anders Fjeldstad นั้นดีกว่ามาก การเปลี่ยนช่องว่างด้วยเครื่องหมายบวกอาจใช้งานได้ แต่ถ้าคุณมีตัวละครอื่น ๆ (ที่มีเครื่องหมายบนอุ้งมือ ฯลฯ ) คุณจะต้องเจอกับปัญหามากมาย
Uku Loskit

1
@Uku: OP ต้องการแทนที่ช่องว่างด้วย + ดังนั้นฉันให้เขาตอบว่าจะทำอย่างไร encodeURIComponent ให้เขา% 20
แหล่งกำเนิด

2
ฉันคิดว่า @Uku ถูกต้อง ในขณะนี้จะตอบคำถามตามตัวอักษร (และได้ผลแน่นอน) ฉันคิดว่าวิธีแก้ปัญหาของ @ Anders ดีกว่าในรูปแบบที่ใหญ่กว่าของสิ่งต่าง ๆ
Brian D
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.