با استفاده از Fetch API یک صفحه HTML بسازید که یک فرم ساده (نام و پیام) دارد و با ارسال فرم دادهها را با روش POST به https://jsonplaceholder.typicode.com/posts بفرستد و پاسخ JSON سرور را در صفحه نمایش دهد.
7.0 بازدید آخرین ویرایش در 201 روز قبل ساعت 03:51 0.0
یک فرم HTML بسازید و در رویداد submit تابعی با event.preventDefault() بنویسید که مقادیر ورودی را گرفته و با fetch و گزینههای method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(...) به endpoint ارسال کند. از async/await و try/catch برای مدیریت پاسخ و خطا استفاده کنید، وضعیت بارگذاری و پیامهای خطا/موفقیت را در DOM نمایش دهید و قبل از نمایش نتیجه response.ok را بررسی و با response.json() داده را بخوانید؛ برای تست میتوانید از jsonplaceholder استفاده کنید و به محدودیتهای CORS دقت کنید.
1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای پیادهسازی خوب، قبل از نمایش نتیجه وضعیت loading را مدیریت کرده و با فعال/غیرفعال کردن دکمه ارسال تجربه کاربر را بهبود دهید. مطمئن شوید پاسخ فقط در صورت ok بودن با response.json() خوانده شود و در غیر این صورت پیغام خطای مناسب نشان داده شود. همچنین برای جلوگیری از مشکلات CORS، درخواست JSON را با Content-Type: application/json ارسال کرده و از سرور مورد نظر بخواهید که اجازه پاسخدهی دهد. استفاده از async/await و try/catch کد را تمیزتر کرده و خطاها را بهخوبی مدیریت میکند.
گزارش