เปลี่ยน URL และเปลี่ยนเส้นทางโดยใช้ jQuery

132

ฉันมีรหัสแบบนี้

<form id="abc">
  <input type="text" id="txt" />
</form>

และตอนนี้ฉันต้องการเปลี่ยนเส้นทางเช่นนี้

var temp = $("#txt").val();
url = "http://example.com/" + temp;
window.location.replace(url);
// or window.location(url);

มีอยู่แล้วใน jQuery เพื่อแก้ปัญหานี้หรือไม่? url = http://example.comมันก็ยังคงช่วยให้ฉันมี

— เกคอน
แหล่งที่มา

ขอบคุณมากทุกท่าน! ตอนนี้ฉันยังไม่รู้ว่า window.location และ window.location.replace ต่างกันอย่างไร ในตัวอย่างของฉันฉันต้องโพสต์ url ไปที่หน้าของฉันเช่นนั้น: abc.com/abcเพื่อให้ abc ค้นหาในฐานข้อมูลของฉันด้วย abc คือสิ่งที่ผู้ใช้พิมพ์ใส่และกดปุ่ม enter หรือ แต่พวกเขาจะกลับabc.comเสมอ? name = abcดังนั้นฉันคิดว่าฉันสามารถทริกเกอร์ในเหตุการณ์ submit เพื่อเปลี่ยนเส้นทางและเปลี่ยน url เป็นสิ่งที่ฉันต้องการ แต่มันก็ยังไม่ทำอะไรเลย นั่นคือทั้งหมดที่ขอขอบคุณอีกครั้ง!

— gacon

3

ฉันอธิบายความแตกต่างระหว่าง window.location และ window.location.replace ที่นี่: stackoverflow.com/questions/846954/…

— Mathias Bynens

344

ดังที่กล่าวไว้ในคำตอบอื่น ๆ คุณไม่จำเป็นต้องใช้ jQuery เพื่อทำสิ่งนี้ คุณสามารถใช้คุณสมบัติมาตรฐานได้

แต่ดูเหมือนว่าคุณดูเหมือนจะไม่ทราบความแตกต่างระหว่างและwindow.location.replace(url)window.location = url

window.location.replace(url)แทนที่ตำแหน่งปัจจุบันในแถบที่อยู่ด้วยตำแหน่งใหม่ หน้าที่เรียกใช้ฟังก์ชันจะไม่รวมอยู่ในประวัติเบราว์เซอร์ ดังนั้นในตำแหน่งใหม่การคลิกปุ่มย้อนกลับในเบราว์เซอร์ของคุณจะทำให้คุณกลับไปที่หน้าที่คุณกำลังดูก่อนที่คุณจะเข้าชมเอกสารที่มี JavaScript ที่เปลี่ยนเส้นทาง
window.location = urlเปลี่ยนเส้นทางไปยังตำแหน่งใหม่ ในหน้าใหม่นี้ปุ่มย้อนกลับในเบราว์เซอร์ของคุณจะชี้ไปที่หน้าเดิมที่มี JavaScript ที่เปลี่ยนเส้นทาง

แน่นอนว่าทั้งคู่มีกรณีการใช้งาน แต่สำหรับฉันแล้วในกรณีนี้คุณควรยึดติดกับสิ่งหลัง

PS: คุณอาจลืมเครื่องหมายทับสองตัวหลังจากhttp:บรรทัดที่ 2 ของ JavaScript ของคุณ:

url = "http://abc.com/" + temp;

— Mathias Bynens
แหล่งที่มา

5

แต่เพื่อให้ถูกต้องคุณควรตั้งค่า window.location.href แทน window.location ในขณะที่ทั้งสองทำงานในปัจจุบันสิ่งหลังเป็นวัตถุ (และแน่นอนว่าไม่รองรับการกำหนดสตริงใน IE เวอร์ชันโบราณ ... )

— วิกเตอร์

1

@Victor [ต้องการอ้างอิง]

— Mathias Bynens

1

@ วิกเตอร์นั่นไม่ได้ระบุเวอร์ชัน IE โบราณใด ๆ ที่สิ่งนี้แตกออกความคิดเห็นของ

— @bobince

ลบ 1. jQuery ไม่พอ

41

บอกความจริงฉันยังไม่ได้รับสิ่งที่คุณต้องการ แต่

window.location(url);

ควรจะเป็น

window.location = url;

การค้นหาในการอ้างอิงwindow.locationจะบอกคุณว่า

— balexandre
แหล่งที่มา

18

jQuery ไม่มีตัวเลือกสำหรับสิ่งนี้และไม่ควรมี นี่เป็น javascript ที่ถูกต้องอย่างสมบูรณ์และไม่มีเหตุผลที่ jQuery จะจัดเตรียมฟังก์ชัน wrapper สำหรับสิ่งนี้

jQuery เป็นเพียงไลบรารีที่อยู่ด้านบนของจาวาสคริปต์แม้ว่าคุณจะใช้ jQuery คุณก็ยังสามารถใช้จาวาสคริปต์ปกติได้

Btw window.location ไม่ใช่ฟังก์ชัน แต่เป็นคุณสมบัติที่คุณควรตั้งค่าดังนี้:

window.location = url;

— พิมพ์เจอเกอร์
แหล่งที่มา

ลงคะแนนสำหรับการอ้างสิทธิ์ jQuery ไม่มีวิธีการนี้ (แม้ว่าจะเป็นการ overkill ที่ไม่จำเป็นและไม่ควรแนะนำ) $ jq (window) .attr ("location", " yourdomain.com" ); หรือ $ (location) .attr ('href', url);

— ปล้น

9

โหวตให้เลิกทำการโหวตนั้น คำตอบของพิมสามารถอ่านได้อย่างง่ายดายว่า "ไม่มีวิธีการเฉพาะใน jQuery สำหรับสิ่งนี้" การลดคะแนนความหมายเชิงศัพท์ถือเป็นการใช้สิทธิพิเศษนั้นในทางที่ผิด

— Nigel Angel

โหวตขึ้นเพราะคุณรู้ว่า ... ถูกต้อง "ไม่มีวิธีการเฉพาะใน jQuery สำหรับสิ่งนี้" ทำไมคุณถึงต้องการวิธีแก้ปัญหาที่น่าเกลียดเช่น: $ jq (window) .attr ("location", "yourdomain. com "); เมื่อคุณสามารถมีบางอย่างเช่น window.location = url;

— Rodolfo Abarca

11

var temp="/yourapp/";
$(location).attr('href','http://abcd.com'+temp);

ลองทำตามนี้ ... ใช้เป็นทางเลือก

3

ลองนี่ ...

$("#abc").attr("action", "/yourapp/" + temp).submit();

ความหมาย:

ค้นหาแบบฟอร์มid"abc" เปลี่ยนattributeชื่อ "action" แล้วส่ง ...

งานนี้ผม ... !!!

— Amouat
แหล่งที่มา

1

ฮ่า ๆ นั่นคือ S ที่ตลก! ฉันชอบไอเดียนี้ คะแนนความคิดสร้างสรรค์!

— Eric Bishard

-2

คุณสามารถทำได้ง่ายขึ้นโดยไม่ต้องใช้ jquery

location = "https://example.com/" + txt.value

แสดงข้อมูลโค้ด

function send() {
  location = "https://example.com/" + txt.value;
}

<form id="abc">
  <input type="text" id="txt" />
</form>

<button onclick="send()">Send</button>

ขยายข้อมูลโค้ด

— Kamil Kiełczewski
แหล่งที่มา

มันใช้ไม่ได้และฉันไม่เห็นว่ามันทำได้อย่างไร สถานที่ตั้งไม่ใช่ทั่วโลก window.location คือ. แก้ไข: ใช่ยืนยันแล้ว มันใช้งานไม่ได้อย่างน้อยก็ไม่ใช่ในโครเมี่ยม พิจารณาอัปเดตตัวอย่างของคุณเป็น window.location

— Shayne

แปลก - ใน chrome, firefox, safari ของฉันมันใช้งานได้ - ตำแหน่งที่ตั้งเป็นทรัพย์สินทั่วโลก - เช่นเมื่อฉันพิมพ์ใน chrome console location = 'https://google.com'แล้วมันเปลี่ยนหน้า - คุณลองใช้เบราว์เซอร์อื่นไหม

— Kamil Kiełczewski

@Shayne เมื่อคุณพิมพ์thisและthis.locationในคอนโซลคุณเห็นอะไร?

— Kamil Kiełczewski

this.location ใช้งานได้ก็ต่อเมื่อ "this" อ้างถึงหน้าต่าง ซึ่งแทบจะไม่เกิดขึ้นเลย Explicit ดีกว่า Implicit เสมอโดยเฉพาะอย่างยิ่งถ้าคุณไม่ต้องการแปลกใจเมื่อโค้ดของคุณไม่สามารถพกพาหรือใช้ซ้ำได้

— Shayne

ใช่คุณพูดถูก - แต่ฉันสงสัยว่าทำไมในเบราว์เซอร์ของคุณthisไม่อ้างถึงwindowวัตถุ (และข้อมูลโค้ดด้านบนไม่ทำงาน) (ในบริบททั่วโลกของเบราว์เซอร์ควรตั้งค่าเป็นวัตถุ windows )

— Kamil Kiełczewski