หน้าแรก>หนังสือสอน>กวดวิชา ASP

ASP Lecture Series (15) การใช้แบบฟอร์ม HTML

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-30 19:58:48
การใช้ออบเจ็กต์คำขอ ASP คุณสามารถสร้างสคริปต์ที่เรียบง่ายแต่ทรงพลังเพื่อรวบรวมและประมวลผลข้อมูลตาราง HTML ในหัวข้อนี้ คุณจะไม่เพียงแต่เรียนรู้วิธีสร้างสคริปต์การประมวลผลตารางพื้นฐานเท่านั้น แต่คุณยังจะได้รับเทคนิคที่เป็นประโยชน์บางประการในการตรวจสอบความถูกต้องของข้อมูลตารางบนเว็บเซิร์ฟเวอร์และเบราว์เซอร์ของผู้ใช้อีกด้วย

เกี่ยวกับตาราง HTML
ตาราง HTML ซึ่งเป็นวิธีการทั่วไปในการรวบรวมข้อมูลเว็บ เป็นการจัดเรียงแท็ก HTML แบบพิเศษที่ให้การควบคุมส่วนต่อประสานกับผู้ใช้บนเว็บเพจ กล่องข้อความ ปุ่ม และกล่องกาเครื่องหมายเป็นตัวควบคุมทั่วไปที่อนุญาตให้ผู้ใช้โต้ตอบกับเว็บเพจและส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์

ตัวอย่าง HTML ต่อไปนี้สร้างแบบฟอร์มที่ผู้ใช้สามารถป้อนชื่อ อายุ และมีปุ่มที่ส่งข้อมูลนี้ไปยังเว็บเซิร์ฟเวอร์ แบบฟอร์มนี้ยังมีการควบคุมโดยนัย (ไม่แสดงโดยเว็บเบราว์เซอร์) ที่สามารถใช้เพื่อส่งข้อมูลเพิ่มเติมไปยังเว็บเบราว์เซอร์

<รูปแบบวิธีการ = "โพสต์" ACTION = "myfile.asp">
<INPUT TYPE="ข้อความ" NAME="ชื่อ">
<INPUT TYPE="ข้อความ" NAME="นามสกุล">
<INPUT TYPE="ข้อความ" NAME="อายุ">
<INPUT TYPE="hidden" NAME="userstatus" VALUE= "ใหม่">
<INPUT TYPE="ส่ง" VALUE="Enter">
</รูปแบบ>
แบบฟอร์มที่จัดการอินพุต ASP เมื่อแบบฟอร์มส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ เว็บเบราว์เซอร์ของผู้ใช้ร้องขอไฟล์ .asp ที่ระบุด้วยแอตทริบิวต์ ACTION ของแท็ก HTML <FORM> (ในตัวอย่างก่อนหน้านี้ ไฟล์ถูกเรียกว่า Myfile.asp ) . ไฟล์ .asp มีสคริปต์ที่จัดการค่าตาราง เช่น การแสดงตารางผลลัพธ์ หรือการสืบค้นข้อมูลจากฐานข้อมูล

มีสามวิธีในการรวบรวมค่าจากตาราง HTML โดยใช้ไฟล์ .asp

ไฟล์ .htm แบบคงที่สามารถมีตารางที่มีค่าถูกส่งไปยังไฟล์ .asp
ไฟล์ .asp สามารถสร้างแบบฟอร์มที่ส่งข้อมูลไปยังไฟล์ .asp อื่นได้
ไฟล์ .asp สามารถสร้างแบบฟอร์มที่ส่งข้อมูลไปยังตัวมันเอง ซึ่งเป็นไฟล์ที่มีแบบฟอร์ม
สองวิธีแรกทำงานในลักษณะเดียวกัน และเมื่อแบบฟอร์มโต้ตอบกับโปรแกรมเกตเวย์ นอกเหนือจาก ASP ก็สามารถรวมคำสั่งเพื่ออ่านและตอบสนองต่อการเลือกของผู้ใช้ได้

การสร้างไฟล์ .asp ที่มีข้อกำหนดของตารางและส่งข้อมูลไปยังตัวมันเองเป็นวิธีที่ซับซ้อนกว่าแต่มีประสิทธิภาพในการทำงานกับตาราง กระบวนการนี้แสดงให้เห็นในการตรวจสอบความถูกต้องของอินพุตแบบฟอร์ม

รับอินพุตแบบฟอร์ม
ออบเจ็กต์คำขอ ASP มีสองคอลเลกชันที่ช่วยลดความยุ่งยากในการดึงข้อมูลแบบฟอร์มที่แนบมากับคำขอ URL

คอลเลกชัน QueryString
คอลเลกชัน QueryString ได้รับค่าที่ส่งผ่านไปยังเว็บเซิร์ฟเวอร์เป็นข้อความที่ตามหลังเครื่องหมายคำถามใน URL ที่ร้องขอ ค่าตารางสามารถต่อท้าย URL ที่ร้องขอได้โดยใช้วิธี HTTP GET หรือเพิ่มค่าตารางลงใน URL ด้วยตนเอง

ตัวอย่างเช่น หากตัวอย่างตารางก่อนหน้านี้ใช้เมธอด GET (ACTION = "GET") และผู้ใช้พิมพ์ Jeff, Smith และ 30 คำขอ URL ต่อไปนี้จะถูกส่งไปยังเซิร์ฟเวอร์:

http://scripts/Myfile.asp?firstname=Jeff&lastname=Smith&age=30&userstatus=new
Myfile.asp มีสคริปต์การประมวลผลตารางต่อไปนี้:

สวัสดี <%= Request.QueryString("firstname") %> <%= Request.QueryString("lastname") %>
คุณอายุ <%= Request.QueryString("age") %> ปี


-
ถ้า Request.QueryString("userstatus") = "ผู้ใช้ใหม่" แล้ว
ตอบกลับเขียน"นี่คือการเข้าชมเว็บไซต์นี้ครั้งแรกของคุณ!"
จบถ้า
-
ในกรณีนี้ เว็บเซิร์ฟเวอร์จะส่งคืนข้อความต่อไปนี้ไปยังเว็บเบราว์เซอร์ของผู้ใช้:

สวัสดี Jeff Smith คุณอายุ 30 ปี นี่เป็นครั้งแรกที่คุณเยี่ยมชมเว็บไซต์นี้!
คอลเลกชัน QueryString มีพารามิเตอร์ทางเลือกที่สามารถใช้เพื่อเข้าถึงค่าใดค่าหนึ่งจากหลายค่าที่ปรากฏในเนื้อหาคำขอ คุณยังสามารถใช้คุณสมบัติ Count เพื่อนับจำนวนครั้งของค่าชนิดใดชนิดหนึ่งได้

ตัวอย่างเช่น แบบฟอร์มที่มีกล่องรายการหลายรายการสามารถส่งคำขอต่อไปนี้:

http://list.asp?food=apples&food=olives&food=bread
คุณยังสามารถใช้คำสั่งต่อไปนี้เพื่อนับหลายค่าได้:

Request.QueryString("อาหาร").นับ
หากคุณต้องการแสดงค่าหลายประเภท List.asp ควรมีสคริปต์ต่อไปนี้

<%Total = Request.QueryString("food").Count%>
<%สำหรับ i = 1 ถึงผลรวม%>
<%= Request.QueryString("food")(i) %> <BR>
<%ถัดไป%>
สคริปต์ด้านบนจะแสดง:
แอปเปิ้ล
มะกอก
ขนมปัง
การรวบรวมแบบฟอร์ม เมื่อใช้วิธีการ HTTP GET เพื่อส่งค่าแบบฟอร์มที่ยาวและซับซ้อนไปยังเว็บเซิร์ฟเวอร์ ข้อมูลอาจสูญหายได้ เว็บเซิร์ฟเวอร์ส่วนใหญ่มีแนวโน้มที่จะควบคุมความยาวของสตริงการสืบค้น URL อย่างเข้มงวดเพื่อให้ค่าตารางที่มีความยาวที่ส่งผ่านโดยใช้วิธี GET ถูกตัดทอน หากคุณต้องการส่งข้อมูลจำนวนมากจากแบบฟอร์มไปยังเว็บเซิร์ฟเวอร์ คุณต้องใช้วิธีการ HTTP POST วิธีการนี้ใช้เพื่อส่งข้อมูลตารางในส่วนเนื้อหาคำขอ HTTP และจำนวนอักขระที่ส่งสามารถไม่จำกัดจำนวน คุณยังสามารถใช้การรวบรวมแบบฟอร์มของวัตถุคำขอ ASP เพื่อดึงค่าที่ส่งโดยใช้วิธี POST

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

<% สำหรับ i = 1 ถึง Request.Form.Count %>
<% =Request.Form("ชื่อ")(i) %>
<% ถัดไป %>
การตรวจสอบอินพุตแบบฟอร์ม สคริปต์การประมวลผลแบบฟอร์มที่ดีควรตรวจสอบว่าข้อมูลที่ป้อนลงในแบบฟอร์มนั้นถูกต้องก่อนที่จะประมวลผลข้อมูล สคริปต์ตรวจสอบสามารถตรวจสอบได้ว่าประเภทของข้อมูลที่ผู้ใช้กรอกลงในแบบฟอร์มนั้นถูกต้อง ตัวอย่างเช่น หากเว็บไซต์ของคุณมีแบบฟอร์มที่อนุญาตให้ผู้ใช้สามารถคำนวณข้อมูลทางการเงิน ก่อนที่จะประมวลผลผลลัพธ์ คุณต้องตรวจสอบว่าผู้ใช้ป้อนข้อมูลตัวเลขจริง ๆ ไม่ใช่ข้อความ

วิธีที่สะดวกมากในการตรวจสอบความถูกต้องของการป้อนข้อมูลในแบบฟอร์มคือการสร้างแบบฟอร์มที่ส่งข้อมูลไปยังตัวมันเอง ในกรณีนี้ ไฟล์ .asp จะมีตารางที่สามารถรับข้อมูลได้ ตัวอย่างเช่น สคริปต์ต่อไปนี้ตรวจสอบว่าผู้ใช้ป้อนค่าในฟิลด์ตาราง "อายุ" โดยส่งข้อมูลไปยังตัวมันเอง:

<% ถ้าเป็นตัวเลข (Request.QueryString("Age")) แล้ว %>
<p>สวัสดี คุณอายุ <%=Request.QueryString("age")%>
<%อื่น ๆ%>
<p>กรุณากรอกอายุที่เป็นตัวเลข
<%สิ้นสุดถ้า %>

<รูปแบบวิธีการ= "โพสต์" ACTION="verify.asp" >
ชื่อ: <INPUT TYPE="text" NAME="ชื่อ" >
อายุ: <INPUT TYPE="text" NAME="อายุ" >
<INPUT TYPE="ส่ง" VALUE="Enter">
</รูปแบบ>
ในตัวอย่างนี้ สคริปต์ยังอยู่ในไฟล์ Verify.asp เดียวกันกับที่ประกอบด้วยตาราง แบบฟอร์มส่งข้อมูลไปยังตัวเองโดยการระบุ Verify.asp ในแอตทริบิวต์ ACTION

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

<ภาษาสคริปต์="VBScript">
-
ย่อย btnEnter_OnClick
ดิมเดอะฟอร์ม
ตั้งค่า TheForm = Document.MyForm
ถ้า IsNumeric(TheForm.Age.Value) แล้ว
TheForm.ส่ง
อื่น
Msgbox "กรุณาระบุอายุเป็นตัวเลข"
จบถ้า
จบหมวดย่อย
-
</สคริปต์>

<รูปแบบวิธีการ= "โพสต์" NAME= MyForm ACTION="myfile.asp" >
ชื่อ: <INPUT TYPE="text" NAME="ชื่อ" >
อายุ: <INPUT TYPE="text" NAME="อายุ" >
<INPUT TYPE="ปุ่ม" NAME="btnEnter" VALUE="Enter">
</รูปแบบ>
บทความที่เกี่ยวข้อง