التعامل مع FormData و URL و URLSearchParams
اجمع مدخلات النماذج باستخدام FormData، وحلّل عناوين URL وأنشئها بأمان، وتلاعب بمعاملات الاستعلام باستخدام URLSearchParams.
التعامل مع FormData و URL و URLSearchParams درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 3 دروس في المجموع.
مقدمة
الهدف: العمل مع واجهات برمجة بيانات المتصفح: FormData وURL وURLSearchParams.
- جمع قيم النماذج
- إنشاء عناوين URL وتحليلها
- إدارة معاملات الاستعلام
أساسيات FormData
تجمع FormData المدخلات بحسب الاسم. يعطي التكرار على entries() أزواج [name, value] على شكل سلاسل نصية أو كائنات File.
const form = document.querySelector("form#login");
if (form) {
const fd = new FormData(form);
for (const [key, val] of fd.entries()) {
console.log(key, val);
}
}إضافة FormData
يمكنك إنشاء FormData يدويًا باستخدام append، بما في ذلك كائنات Blob/File لعمليات الرفع.
const fd = new FormData();
fd.append("username", "alice");
fd.append("file", new Blob(["hi"]), "greet.txt");
for (const [k,v] of fd.entries()) {
console.log(k, v);
}أجزاء URL
تحلل URL سلسلة نصية إلى أجزاء (hostname وpathname وsearch وhash). وهذا أكثر أمانًا من تقسيم السلسلة يدويًا.
const url = new URL("https://example.com/page?x=1");
console.log(url.hostname); // example.com
console.log(url.pathname); // /pageالحصول على URLSearchParams
تتيح لك URLSearchParams قراءة معاملات الاستعلام وكتابتها بسهولة. تعيد get() قيمة من النوع string | null.
const params = new URLSearchParams("?q=go&type=video");
console.log(params.get("q")); // go
console.log(params.get("missing")); // nullتحديث المعلمات
حدّث المعلمات باستخدام set، وأضف إليها باستخدام append، واحذفها باستخدام delete. استخدم toString() لتسلسلها.
const params = new URLSearchParams();
params.set("page", "1");
params.set("q", "typescript");
console.log(params.toString()); // page=1&q=typescriptالتحقق من الحصول على المعلمات
تحقق سريع: ماذا تُرجع URLSearchParams.get("key") عند عدم العثور على المفتاح؟
مراجعة
مراجعة: تجمع FormData أسماء وقيم حقول الإدخال. يحلل URL العناوين بأمان. تدير URLSearchParams معلمات الاستعلام.
الأسئلة الشائعة
هل درس «التعامل مع FormData و URL و URLSearchParams» مجاني؟
نعم — نص درس «التعامل مع FormData و URL و URLSearchParams» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 3 دروس في المجموع.
ماذا ستتعلم في «التعامل مع FormData و URL و URLSearchParams»؟
اجمع مدخلات النماذج باستخدام FormData، وحلّل عناوين URL وأنشئها بأمان، وتلاعب بمعاملات الاستعلام باستخدام URLSearchParams. تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟
لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «التعامل مع FormData و URL و URLSearchParams»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟
نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أنواع lib DOM و querySelector (التحقق الصارم من null)
- أنواع الأحداث والأحداث المخصصة؛ تضييق أنواع HTMLElement الفرعية
- التعامل مع FormData و URL و URLSearchParams