از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
هنگام کار با برنامه های کاربردی وب، معمولاً نیاز به ارسال یا دریافت داده از یک سرور وجود دارد. این داده ها اغلب به شکل یک شی JSON هستند. در این بایت، روش سریال‌سازی داده‌ها به فرمت JSON با استفاده از jQuery، یک کتابخانه محبوب جاوا اسکریپت را بررسی خواهیم کرد.
چرا سریال برای AJAX؟
ما می‌توانیم داده‌ها را به‌صورت ناهمزمان (در پس‌زمینه) ارسال و دریافت کنیم، برنامه‌های وب با استفاده از AJAX، که می‌توانند با سرور بعد از page بارگذاری کرده است و بنابراین به صورت پویا و بدون بارگیری مجدد کل آن را به روز می کند page.
برای ارسال داده ها به سرور، AJAX به آن ها در قالبی نیاز دارد که قابل درک باشد. به همین دلیل است که ما باید داده های خود را سریال کنیم. سریال سازی زمانی است که یک شی JS را به یک رشته تبدیل می کنیم که بعداً می توانیم از آن برای بازیابی استفاده کنیم. JSON یک فرمت تبادل داده سبک وزن است که خواندن و نوشتن آن برای ما آسان است و تجزیه و تولید آن برای ماشین ها آسان است. به لطف این، یکی از محبوب ترین فرمت ها برای تبادل داده است روی وب.
روش سریال سازی به JSON
سریال سازی به JSON به لطف وجود ساده است JSON.stringify() تابع. این تابع یک مقدار جاوا اسکریپت، معمولاً یک شی یا آرایه را می گیرد و آن را به یک رشته JSON تبدیل می کند.
در اینجا یک مثال اساسی است:
let employee = {
name: "John Doe",
age: 30,
department: "HR"
};
let jsonStr = JSON.stringify(employee);
console.log(jsonStr);
$.ajax({
type: "POST",
url: "/api/employee",
data: jsonStr,
// ...
});
این خروجی خواهد داشت:
'{"name":"John Doe","age":30,"department":"HR"}'
همانطور که می بینید، JSON.stringify() شی جاوا اسکریپت ما را به یک رشته JSON تبدیل کرده است. سپس می توانیم آن رشته را از طریق به سرور ارسال کنیم .ajax() زنگ زدن.
مثال: سریال سازی داده های ساده
بیایید نگاهی به یک مثال ساده از سریال سازی داده ها برای درخواست AJAX با استفاده از jQuery بیندازیم. فرض کنید یک فرم در HTML خود داریم:
<form id="myForm">
<input type="text" name="firstName" value="John">
<input type="text" name="lastName" value="Doe">
</form>
ما می توانیم داده های فرم را با استفاده از jQuery به یک رشته JSON سریال کنیم serializeArray() تابع ترکیب شده با JSON.stringify():
let formData = $('#myForm').serializeArray();
let jsonData = JSON.stringify(formData);
console.log(jsonData);
$.ajax({
type: "POST",
url: "/api/form",
data: jsonData,
// ...
});
این خروجی خواهد داشت:
'({"name":"firstName","value":"John"},{"name":"lastName","value":"Doe"})'
متوجه خواهید شد که $('#myForm').serializeArray() آرایه ای از اشیا (جفت نام و مقدار) برای هر فیلد ورودی در فرم ایجاد می کند. سپس، JSON.stringify() آرایه را به یک رشته JSON تبدیل می کند. اکنون می توان این رشته را با استفاده از درخواست AJAX به سرور ارسال کرد.
مثال: سریال سازی داده های پیچیده
شما فکر می کنید که سریال سازی داده های پیچیده حداقل کمی پیچیده تر از داده های ساده است، اما هنوز هم بسیار ساده است. بیایید مثالی از یک شی جاوا اسکریپت که شامل اشیاء و آرایه های تودرتو است را در نظر بگیریم.
var complexData = {
name: "John Doe",
age: 30,
cars: (
{ brand: "Ford", models: ("Fiesta", "Focus", "Mustang") },
{ brand: "BMW", models: ("320", "X3", "X5") },
{ brand: "Fiat", models: ("500", "Panda") }
)
};
درست مانند داده های ساده، می توانیم استفاده کنیم JSON.stringify() برای سریال سازی این داده های پیچیده
var jsonString = JSON.stringify(complexData);
console.log(jsonString);
با این کار یک رشته JSON که شیء اصلی جاوا اسکریپت را نشان می دهد، خروجی می دهد.
{"name":"John Doe","age":30,"cars":({"brand":"Ford","models":("Fiesta","Focus","Mustang")},{"brand":"BMW","models":("320","X3","X5")},{"brand":"Fiat","models":("500","Panda")})}
پس همانطور که می بینید همین طور است process مثل قبل، حداقل از نظر انجام سریال سازی. JSON.stringify می تواند تقریباً هر شیء JS را مدیریت کند، حتی آنهایی که دارای اشیاء تو در تو هستند.
مشکلات رایج و روش رفع آنها
در حالی که پخش سریال به JSON در jQuery به طور کلی ساده است، ممکن است با مشکلاتی روبرو شوید. بیایید در مورد برخی از موارد رایج و روش رفع آنها بحث کنیم.
توجه داشته باشید: این راه حل ها جامع نیستند و برخی از مشکلات ممکن است نیاز به درک عمیق تری از زمینه خاص داشته باشند.
-
خطای مقدار شیء چرخه ای: این خطا زمانی رخ می دهد که ارجاعات دایره ای در داده های شما وجود داشته باشد. به عنوان مثال، اگر ویژگی یک شی به خود شی اشاره کند، با این مشکل مواجه خواهید شد. راه های مختلفی برای رفع این مشکل وجود دارد، اما یک روش رایج استفاده از یک تابع جایگزین در آن است
JSON.stringify()که خاصیتی را که باعث مشکلات می شود نادیده می گیرد. -
از دست رفتن داده ها: هنگام سریال سازی، برخی از انواع داده ها، مانند توابع یا
undefined، هستند حفظ نشده است. اگر نیاز به نگهداری از این موارد دارید، باید از کتابخانه ای مانند استفاده کنید json5 که پشتیبانی می کندundefined،NaN، بی نهایت مثبت/منفی و غیره -
مجموعه داده های بزرگ: اگر مجموعه داده‌های بزرگی را سریال‌سازی می‌کنید، ممکن است با مشکلات عملکردی مواجه شوید. در چنین مواردی، سریال و ارسال داده ها به صورت تکه ای یا استفاده از a را در نظر بگیرید جریان رمزگذار JSON.
موضوعات پیشرفته در سریال سازی JSON
چند موضوع پیشرفته در سریال سازی JSON وجود دارد که می تواند در شرایط خاص مفید باشد.
-
سریال سازی سفارشی: با تعریف a می توانید روش سریال سازی اشیاء خود را کنترل کنید
toJSON()روش در شی شما این متد باید مقداری را برگرداند کهJSON.stringify()سریال خواهد شد. -
چاپ زیبا: برای اینکه خروجی JSON خود را خواناتر کنید، می توانید از
spaceاستدلال درJSON.stringify(). این آرگومان تعداد فضاهای استفاده شده برای تورفتگی را مشخص می کند.
var jsonString = JSON.stringify(myData, null, 2);
console.log(jsonString);
// {
// "name": "John",
// "age": 30,
// "isActive": true,
// "skills": (
// "Java",
// "JavaScript"
// )
// }
- استفاده از عملکرد جایگزین: را
replacerتابع را می توان برای فیلتر کردن مقادیر قبل از سریال سازی استفاده کرد. این تابع، در صورت ارائه، برای هر آیتم فراخوانی می شود و می توان از آن برای تبدیل خروجی رشته JSON استفاده کرد.
نتیجه
در این بایت، روش سریال‌سازی داده‌های پیچیده به JSON در jQuery، برخی از مشکلات رایجی که ممکن است با آنها مواجه شوید و راه‌حل‌های آنها و چند موضوع پیشرفته در سریال‌سازی JSON را توضیح داده‌ایم. درک این مفاهیم به شما کمک می کند تا داده ها را در تماس های AJAX خود به طور موثرتری مدیریت کنید.
(برچسب ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1402-12-30 04:40:03
