ఈ రైట్-అప్ సులభమైన ఉదాహరణల సహాయంతో జావాస్క్రిప్ట్‌లోని ఫార్మ్‌డేటా ఆబ్జెక్ట్‌ను ప్రదర్శిస్తుంది.
జావాస్క్రిప్ట్‌లో ఫార్మ్‌డేటా ఆబ్జెక్ట్ అంటే ఏమిటి?
ఫార్మ్‌డేటా ఆబ్జెక్ట్ అనేది జావాస్క్రిప్ట్‌లో డేటా సేకరణను రూపొందించడానికి ఒక ప్రసిద్ధ విధానం, దీనిని ఉపయోగించి సర్వర్‌కు పంపవచ్చు XMLHttpRequest ” లేదా తిరిగి పొందబడింది. ఇది HTML ఫారమ్ మూలకం వలె అదే విధులను నిర్వహిస్తుంది. దీనిని శ్రేణుల శ్రేణితో పోల్చవచ్చు. మేము సర్వర్‌కు ప్రసారం చేయాలనుకుంటున్న ప్రతి మూలకాన్ని ప్రత్యేక శ్రేణి సూచిస్తుంది.
వాక్యనిర్మాణం
జావాస్క్రిప్ట్‌లో ఫార్మ్‌డేటా ఆబ్జెక్ట్‌ని ఉపయోగించడానికి, కింది సింటాక్స్‌ని ఉపయోగించండి:
స్థిరంగా ఫారమ్ డేటా = కొత్త ఫారమ్‌డేటా ( ) ;
ఉదాహరణ 1: HTML ఫారమ్ లేకుండా FormData ఆబ్జెక్ట్‌ని సృష్టించండి
అన్నింటిలో మొదటిది, నిర్దిష్ట పేరుతో స్థిరాంకాన్ని ప్రారంభించండి మరియు ఆ స్థిరాంకానికి నిర్దిష్ట విలువను కేటాయించండి. ఇక్కడ, ' కొత్త FormData() ” స్థిరమైన విలువగా ఉపయోగించబడుతుంది:
కాన్స్ట్ ఫారమ్ డేటా = కొత్త ఫారమ్‌డేటా ( ) ;
తరువాత, ''లోని ఆర్గ్యుమెంట్‌లను పాస్ చేయడం ద్వారా డేటాను జోడించండి అనుబంధం() ” పద్ధతి
ఫారమ్ డేటా. జోడించు ( 'ఫ్నేమ్' , 'ఆఫీసర్' ) ;ఫారమ్ డేటా. జోడించు ( 'పేరు' , 'జావేద్' ) ;
ఫారమ్ డేటా. జోడించు ( 'వయస్సు' , 25 ) ;
ఆ తరువాత, 'ని ఉపయోగించండి console.log() 'పద్ధతి:
కన్సోల్. లాగ్ ( 'ఫారమ్ సమాచారం' ) ;
ఉపయోగించడానికి ' కోసం ” సహాయంతో కన్సోల్‌లో అవుట్‌పుట్‌ను పునరావృతం చేయడానికి మరియు ప్రదర్శించడానికి లూప్ console.log() 'పద్ధతి:
కోసం ( ఫారమ్‌డేటా యొక్క objని తెలియజేయండి ) {కన్సోల్. లాగ్ ( obj ) ;
}
ఉదాహరణ 2: HTML ఫారమ్‌తో FormData ఆబ్జెక్ట్‌ని సృష్టించండి
HTML ఫారమ్‌తో FormDataని జోడించడానికి, ముందుగా, '' సహాయంతో HTMLలో ఫారమ్‌ను సృష్టించండి <రూపం> ” మూలకం మరియు దిగువ జాబితా చేయబడిన క్రింది లక్షణాన్ని జోడించండి:
- ఫారమ్‌లో ఇన్పుట్ ఫీల్డ్‌ని జోడించడానికి, “ని ఉపయోగించండి <ఇన్పుట్> ' మూలకం.
- ఇన్పుట్ ట్యాగ్ లోపల, “ని పేర్కొనండి రకం మూలకం యొక్క డేటా రకాన్ని నిర్వచించే లక్షణం. ఈ లక్షణం కోసం అనేక సాధ్యమైన విలువలు ఉన్నాయి, వీటిలో ' వచనం ',' సంఖ్య ',' తేదీ ',' పాస్వర్డ్ ”, మరియు మరెన్నో.
- ది ' ప్లేస్‌హోల్డర్ ” ఇన్పుట్ ఫీల్డ్‌లో ప్రదర్శించడానికి విలువను జోడించడానికి ఉపయోగించబడుతుంది మరియు “పేరు” ఇన్పుట్ ఫీల్డ్ పేరును సూచిస్తుంది.
- ' క్లిక్ చేయండి ” మౌస్‌పై క్లిక్ చేయడం ద్వారా వినియోగదారు ఫంక్షనాలిటీని ప్రదర్శించినప్పుడు ఈవెంట్ ట్రిగ్గర్ అవుతుంది:
< ఇన్పుట్ రకం = 'వచనం' పేరు = 'ఫ్నేమ్' ప్లేస్‌హోల్డర్ = 'మీ మొదటి పేరును నమోదు చేయండి' >< br >< br >
< ఇన్పుట్ రకం = 'వచనం' పేరు = 'పేరు' ప్లేస్‌హోల్డర్ = 'మీ చివరి పేరును నమోదు చేయండి' >< br >< br >
< ఇన్పుట్ రకం = 'తేదీ' పేరు = 'వయస్సు' ప్లేస్‌హోల్డర్ = 'మీ వయస్సును నమోదు చేయండి' >< br >< br >
< ఇన్పుట్ రకం = 'బటన్' విలువ = 'నమోదు చేయి' క్లిక్ చేయండి = 'సమాచారం()' >
రూపం >
తర్వాత, CSSలో ఫారమ్‌ని యాక్సెస్ చేసి, ఫారమ్ చుట్టూ ఖాళీని సెట్ చేయండి:
. రూపం {మార్జిన్ : 20px ;
పాడింగ్ : 30px ;
}
ఇంకా, స్క్రిప్ట్ ట్యాగ్‌ని ఉపయోగించండి మరియు క్రింది కోడ్‌ను జోడించండి:
ఫంక్షన్ డేటా ( ) {రూపం ఉంది = పత్రం. getElementById ( 'రూపం' ) ;
constformData = కొత్తFormData ( రూపం ) ;
కన్సోల్. లాగ్ ( 'ఫారమ్ డేటా' ) ;
కోసం ( obj ఆఫ్‌ఫార్మ్‌డేటాను అనుమతించండి ) {
కన్సోల్. లాగ్ ( obj ) ;
}
}
పై కోడ్ స్నిప్పెట్‌లో:
- 'ని పిలవండి getElementById('రూపం') ” ఫారమ్ ఐడిని ఉపయోగించడం ద్వారా ఫారమ్‌ను యాక్సెస్ చేసే పద్ధతి.
- ఇప్పుడు, యాక్సెస్ చేయబడిన మూలకాన్ని కొత్త స్థిరాంకంలో నిల్వ చేయండి ' ఫారమ్ డేటా ”.
- ఉపయోగించడానికి ' కోసం ” పునరావృతం కోసం లూప్ చేయండి మరియు కన్సోల్‌లోని మూలకాలను ప్రింట్ చేయండి.
అవుట్‌పుట్
మీరు JavaScriptలో FormData ఆబ్జెక్ట్‌ని సృష్టించడం గురించి తెలుసుకున్నారు.
ముగింపు
సర్వర్‌కు పంపగలిగే JavaScriptలో డేటా సేకరణను రూపొందించడానికి FormData ఆబ్జెక్ట్ ఉపయోగించబడుతుంది. జావాస్క్రిప్ట్‌లో ఫార్మ్‌డేటా ఆబ్జెక్ట్‌ను సృష్టించడానికి, రెండు పద్ధతులు ప్రదర్శించబడతాయి. మొదటిది సాధారణ జావాస్క్రిప్ట్‌ని ఉపయోగిస్తోంది మరియు రెండవది HTMLలో ఫారమ్ క్రియేషన్ ద్వారా మరియు దానిని జావాస్క్రిప్ట్‌తో లింక్ చేయడం. ఈ పోస్ట్ జావాస్క్రిప్ట్‌లోని ఫార్మ్‌డేటా ఆబ్జెక్ట్‌ల గురించి పేర్కొంది.