แสดง div ป๊อปอัปเมื่อพูดคุยกับเซิร์ฟเวอร์ AJAX

ฉันกำลังพยายามแสดงป๊อปอัปตรงกลางหน้าจอในขณะที่เว็บไซต์ของฉันสื่อสารกับเซิร์ฟเวอร์ AJAX ของฉัน เนื่องจากการดำเนินการบางอย่างใช้เวลาไม่กี่วินาที ฉันจึงต้องการให้ผู้ใช้เห็นภาพว่าการดำเนินการกำลังเกิดขึ้น ตัวอย่างเช่น คุณสามารถสร้างรายการเพลงบนเว็บไซต์ของฉันได้ เมื่อมีการสร้างเพลย์ลิสต์ ฉันต้องการให้ div ป๊อปอัปแจ้งว่ากำลังสร้างเพลย์ลิสต์บนเซิร์ฟเวอร์ของฉัน

ฉันสร้าง jsfiddle เพื่อแสดงฟังก์ชันที่ฉันใช้เพื่อพยายามสร้างสิ่งนี้ แต่ฉัน มีผลตรงกันข้ามเล็กน้อย ในซอ มันจะแสดงป๊อปอัปหลังจากที่พยายามพูดคุยกับเซิร์ฟเวอร์ (มันจะล้มเหลวในการพูดคุยกับเซิร์ฟเวอร์เพราะฉันปฏิเสธสิ่งอื่นใดนอกโดเมนของฉัน) แต่เนื่องจากมันล้มเหลวในการพูดคุยกับเซิร์ฟเวอร์ มันจึงไม่เคยโทร hide_popup()

บนเซิร์ฟเวอร์ของฉัน มันไม่เคยแสดงป๊อปอัปด้วยซ้ำ (เว้นแต่ฉันจะโทร alert() โดยตรงหลังการโทร show_popup())

ฉันไม่แน่ใจว่าทำไมสิ่งนี้ถึงเกิดขึ้น แต่ฉันเพียงต้องการ
1. แสดงป๊อปอัป
2. เรียกใช้ AJAX-call
3. ซ่อนป๊อปอัป

มีข้อเสนอแนะอะไรบ้าง?


javascript html jquery ajax popup
person jas7457    schedule 17.09.2013    source แหล่งที่มา
comment
คุณกำลังใช้ async = false คำถาม stackoverflow นี้ (stackoverflow.com/questions/16000803/) อาจช่วยคุณได้   -  person functionoid    schedule 17.09.2013
comment
ตัวอย่าง jsfiddle ของคุณใช้งานไม่ได้ เนื่องจากคุณกำลังทำการร้องขอข้ามโดเมน นี่อาจเป็นเหตุผลด้วยว่าทำไมคุณถึงมีผลตรงกันข้าม คุณได้รับข้อผิดพลาดที่ไม่ถูกตรวจจับ: NetworkError: DOM Exception 19 ซึ่งหยุดจาวาสคริปต์ดังนั้นจึงไม่สามารถซ่อนป๊อปอัปได้ อย่างไรก็ตาม ฉันคิดว่าแนวทางของคุณในการแก้ไขปัญหานี้ถูกต้อง   -  person Entity Black    schedule 17.09.2013
comment
@Windkiller วิธีการไม่ถูกต้องจริง ๆ   -  person Abhitalks    schedule 17.09.2013

คำตอบ (2)


arrow_upward
1
arrow_downward

มีปัญหาเล็กน้อยเกี่ยวกับวิธีการเขียนโค้ดของคุณ นี่คือบางส่วนของพวกเขา:

(1.) โทร:

var response = get_server_response("action=createPlaylist&name=" + name, false);

คุณคาดหวังการตอบกลับทันทีซึ่งจะไม่เกิดขึ้นกับการโทร AJAX ยิ่งไปกว่านั้น คุณกำลังส่ง false สำหรับพารามิเตอร์ async ซึ่งทำให้เป็นการเรียก sync ได้อย่างมีประสิทธิภาพ นี่คือเหตุผลว่าทำไมโค้ดของคุณถึงรอก่อนที่จะทำอะไรอย่างอื่น

(2.) การใช้งาน:

xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        response = xmlhttp.responseText;
    }
}
xmlhttp.open("POST", ajax_server, async);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(url);
return response;

คุณกำลังแคชผลลัพธ์ใน response เท่านั้น และไม่ได้ประมวลผลในขณะที่ติดตาม onreadystatechange คุณกำลังประมวลผลจริงหลังจากการโทร ซึ่งจะดำเนินการหลังจากการโทรและไม่ได้รับการตอบกลับ ไม่จำเป็นต้องตอบกลับที่นี่

(3.) ป๊อปอัป:

คุณไม่ได้ใช้การแสดง/ซ่อนในตำแหน่งที่เหมาะสม

วิธีแก้ปัญหา:

ฉันขอแนะนำให้คุณดำเนินการโทรกลับในขณะที่ติดตาม onreadystatechange โดยใช้ฟังก์ชัน แสดงป๊อปอัปก่อนที่คุณจะทำการโทรผ่านเครือข่าย ซ่อนไว้ในฟังก์ชันโทรกลับของคุณ ขึ้นอยู่กับ readyState และ status

นี่คือซอที่ใช้งานได้สำหรับคุณ: http://jsfiddle.net/nDNXc/549/

หวังว่าจะช่วยได้

person Abhitalks    schedule 17.09.2013
comment
ฉันคิดว่าเขาต้องการโทรแบบซิงโครนัส ตัวอย่างเช่น คุณไม่ควรอนุญาตให้ผู้เยี่ยมชมโหลดเพลย์ลิสต์อื่นในขณะที่ยังไม่ได้โหลดเพลย์ลิสต์แรก... - person Entity Black; 17.09.2013

arrow_upward
0
arrow_downward

ก่อนอื่น ฉันขอแนะนำให้คุณใช้ไลบรารีทั่วไปสำหรับการโทร Ajax ของคุณ เช่น jQuery.ajax

เรียนรู้ครั้งที่สองเกี่ยวกับ Javascript แบบอะซิงโครนัส การเรียก get_server_response() ของคุณจะกลับมาทันทีโดยไม่ต้องรอให้คำขอ Ajax ของคุณดำเนินการให้เสร็จสิ้น ดูพารามิเตอร์ที่สมบูรณ์ใน jQuery.ajax ยอมรับฟังก์ชันที่เรียกว่าเมื่อคำขอของคุณเสร็จสมบูรณ์ - สถานที่ที่เหมาะสมในการซ่อนข้อความของคุณ!

person ToniTornado    schedule 17.09.2013
comment
การเรียก get_server_response() ของฉันไม่ควรกลับมาทันทีเพราะฉันสร้างตัวแปรชื่อ 'async' และตั้งค่าเป็นเท็จ ซึ่งจะทำให้รอจนกว่าจะเสร็จสิ้นการส่งก่อนที่จะส่งกลับค่า - person jas7457; 17.09.2013
comment
เขาทำการโทรแบบซิงโครนัส จาวาสคริปต์จึงตกตะลึงจนกว่าการโทรจะได้รับการแก้ไข แต่มันเกิดข้อผิดพลาดในการล้าง นั่นคือสาเหตุที่มันใช้งานไม่ได้ แนวทางของเขาถูกต้อง - person Entity Black; 17.09.2013