আপনি কতবার এই সত্যটির সম্মুখীন হয়েছেন যে আপনি ভুল ডেটা প্রবেশ করেছেন, যার কারণে পৃষ্ঠাটি পুনরায় লোড হয়েছে এবং ক্ষেত্রগুলিতে প্রবেশ করা অক্ষরগুলি সম্পূর্ণরূপে মুছে ফেলা হয়েছে৷ এটি ঠিক করার জন্য, একটি ব্যবহারকারী ইন্টারফেস তৈরি করার জন্য একটি মোটামুটি জনপ্রিয় পদ্ধতি রয়েছে এবং এর নাম হল Ajax। এটি অনেক প্রকল্পে প্রদর্শিত হয় এবং বিভিন্ন উপায়ে ব্যবহৃত হয়৷
একটি AJAX ফর্ম পাঠানো: লাইব্রেরি সংযোগ করা
index.php-এ jquery লাইব্রেরি অন্তর্ভুক্ত করুন।
একটি নথিতে jquery অন্তর্ভুক্ত করার আরেকটি উপায় আছে। আপনাকে jquery অফিসিয়াল সাইট থেকে লাইব্রেরিটি ডাউনলোড করতে হবে, এটিকে সঠিক ফোল্ডারে রাখতে হবে এবং এর লিঙ্কটি এভাবে পেস্ট করতে হবে:
সংযুক্ত করা এবং নথি সেট আপ করা
1. ফোল্ডারে একটি.php ডকুমেন্ট তৈরি করুন আপনার জন্য সুবিধাজনক যে কোনো নাম দিয়ে - এটি AJAX php ফর্ম পাঠাবে। এটিতে আপনি বার্তা সহ পাঠ্যটি কী বিন্যাসে প্রদর্শিত হবে তা লিখতে পারেন। উদাহরণস্বরূপ, form1.php.
2. আপনার জাভাস্ক্রিপ্ট ফাইল ফোল্ডারে, একটি.js ফাইল তৈরি করুনকোনো সুবিধাজনক নাম। উদাহরণস্বরূপ, form.js.
৩. এই ফোল্ডারটিকে আপনার নথিতে সংযুক্ত করুন।
৪. নিম্নলিখিত প্যারামিটার সহ একটি ফর্ম তৈরি করুন:
এতে, আপনার ডেটা প্রবেশের জন্য ক্ষেত্র তৈরি করতে ভুলবেন না।
৫. সাইটের সাথে ডিরেক্টরির ফর্ম1.php ফাইলে যান, যেখানে লিখুন:
এখন, ফর্ম জমা দেওয়ার সময়, ব্রাউজার ডেটা সম্পর্কিত তথ্য প্রদর্শন করবে।
একই ফাইলে, আপনি লিখতে পারেন ঠিক কী প্রদর্শিত হবে বা কীভাবে হবে। এছাড়াও আপনি এখানে চক্র বা অ্যালগরিদম লিখতে পারেন৷
AJAX jquery ফর্ম পাঠানো হচ্ছে
1. তৈরি করা form.js ফাইলে, সাইটের পৃষ্ঠাটি সম্পূর্ণ লোড হওয়ার পরে ফাইলটি কাজ করার জন্য দায়ী কোডটি আপনাকে লিখতে হবে৷
$(ডকুমেন্ট)।রেডি(ফাংশন(){ //আমাদের পরবর্তী কোড এখানে চলবে });
2. তারপর আপনাকে সাবমিট বোতামটি কাস্টমাইজ করতে হবে। সব একই ফাইলে করুন।
$("form").submit(function(event) { event.preventDefault(); //নিম্নলিখিত কোডটি এখানে লেখা হবে });
কোডের প্রথম অংশটি পৃষ্ঠার উপাদান নির্বাচন করার জন্য দায়ী এবং দ্বিতীয়টি ডিফল্ট ক্রিয়া প্রতিরোধ করার জন্য দায়ী৷
৩. তারপর, উদাহরণস্বরূপ, সাফল্যের জন্য একটি AJAX ফর্ম জমা দিন।
$.ajax({ type: $(this).attr('method'), url: $(this).attr('Action'), ডেটা: নতুন FormData(এটি), বিষয়বস্তুর প্রকার: মিথ্যা, ক্যাশে: মিথ্যা, প্রক্রিয়া ডেটা: মিথ্যা, সাফল্য: ফাংশন(ফলাফল){ সতর্কতা(ফলাফল); } });
নিম্নে প্রতিটি সেটিংসের বিশদ বিবরণ রয়েছে৷
- প্রকার -এটি ফর্মে জমা দেওয়া অনুরোধের ধরন; যেহেতু এটি POST খরচ করে, অনুরোধের ধরনটি উপযুক্ত হবে;
- এই - গঠনের ভিতরে উপাদান নির্বাচন;
- attr - আকর্ষনের জন্য সংক্ষিপ্ত (আকর্ষণ), অর্থাৎ, নির্বাচিত লক্ষ্যের (ফর্ম) একটি নির্দিষ্ট প্যারামিটার আকৃষ্ট হয়;
- url - যেখানে অনুরোধ পাঠানো হবে তার জন্য দায়ী প্যারামিটার; এই ক্ষেত্রে, ফর্ম প্যারামিটারে কি লেখা আছে (form1.php);
- ডেটা - ফর্ম ডেটা নির্দিষ্ট করে;
- contentType - সার্ভারে হেডার পাঠানোর জন্য দায়ী; এই ক্ষেত্রে এটির প্রয়োজন নেই;
- ক্যাশে - ব্যবহারকারীর ক্যাশে সংরক্ষণের জন্য দায়ী;
- processData - একটি স্ট্রিংয়ে ডেটা রূপান্তরের জন্য দায়ী;
- সফল - একটি সফল ডেটা জমা দেওয়ার ফলাফল প্রদর্শন করে; অতএব, যদি ডেটা পাঠানো সফল হয়, তাহলে ফাংশনের ক্রিয়াগুলি কার্যকর করা হয়৷
৪. সম্পন্ন, এখন AJAX ফর্ম জমা দেওয়ার সময়, আপনি পৃষ্ঠাটি রিফ্রেশ না করেই ডেটা পাবেন৷
ফর্ম1.php ফাইল ব্যবহার করে ফলাফল পরিবর্তন করা যেতে পারে, যেখানে আপনি নির্দিষ্ট করতে পারেন ফলাফল হিসেবে ঠিক কী প্রদর্শিত হবে। উদাহরণস্বরূপ, আপনি পরীক্ষা করতে পারেন এবং নির্দিষ্ট ডেটা প্রবেশের সঠিকতার জন্য একটি চেক তৈরি করতে পারেন: যদি ডেটা সঠিক না হয়, তবে পছন্দসই বার্তাটি প্রদর্শিত হয়, অন্যথায় এটি সঠিক পৃষ্ঠায় পুনঃনির্দেশিত হয়। আরও অনেক কিছু সম্ভব, আপনার মন যা চায়।
এছাড়াও অ্যাসিঙ্ক্রোনাসভাবে সার্ভারে ডেটা পাঠানো হচ্ছে। এটি যখন ব্যবহারকারী পাঠ্য প্রবেশ করে, এবং এটি অবিলম্বে লাল রঙে হাইলাইট করা হয়, যা নির্দেশ করে যে প্রবেশ করা ডেটা সঠিক নয়। এটা সম্পর্কেইন্টারনেটে অনেক ম্যানুয়াল রয়েছে, যেখানে সবকিছু স্পষ্টভাবে ব্যাখ্যা করা হয়েছে এবং উদাহরণ সহ দেখানো হয়েছে।
উপসংহার
নিঃসন্দেহে, Ajax ওয়েবসাইট তৈরির জন্য একটি দরকারী টুল। উচ্চ-মানের পৃষ্ঠা এবং ইন্টারফেস তৈরি করতে, এটি কেবল প্রয়োজনীয়। এটি লক্ষণীয় যে ছবি এবং কোডে কী লেখা আছে তা সম্পূর্ণরূপে বোঝার জন্য jQuery জানা খুবই গুরুত্বপূর্ণ, কারণ একটি সাধারণ কপি-পেস্ট সবসময় আপনাকে কোড বুঝতে সাহায্য করতে এবং শেখাতে পারে না। এটি সর্বদা মনে রাখা মূল্যবান যে ভাষার সংস্করণগুলি আপডেট করা হয়েছে এবং কিছু বৈশিষ্ট্য কেবল অদৃশ্য হয়ে যেতে পারে। অতএব, সমস্ত সমাধান প্রাসঙ্গিক নাও হতে পারে, প্রায়শই লিখিত কোড কেবল কাজ করে না বা আপনি আপনার স্ক্রিনে দেখতে চান এমন ফলাফল তৈরি করে না।
