If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
ReactJS में AJAX form submission एक common technique है जो user के inputs को backend server पर asynchronously send करने में help करती है।
AJAX (Asynchronous JavaScript and XML) React application को asynchronous calls करने में help करता है जिसमे page reload कि जरूरत नहीं होती। यह technique React applications को interactive और user-friendly बनाने में help करती है।
इस topic में हम देखेंगे कि React में AJAX form submission कैसे किया जाता है using fetch API और axios library के through, कैसे form data handle करते हैं और server पर send हैं।
●●●
fetch API JavaScript का built-in API है जो asynchronous HTTP requests को handle करता है। इसका use करके हम easily AJAX requests send कर सकते हैं और responses को handle कर सकते हैं।
File : src/components/ContactForm.js
import React, { useState } from 'react';
function ContactForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const [status, setStatus] = useState('');
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value
});
};
const handleSubmit = async (e) => {
e.preventDefault();
setStatus('Submitting...');
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
});
if (response.ok) {
setStatus('Form submitted successfully!');
} else {
setStatus('Form submission failed. Please try again.');
}
} catch (error) {
console.error('Error:', error);
setStatus('An error occurred. Please try again.');
}
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" name="name" value={formData.name} onChange={handleChange} />
</label>
<br />
<label>
Email:
<input type="email" name="email" value={formData.email} onChange={handleChange} />
</label>
<br />
<label>
Message:
<textarea name="message" value={formData.message} onChange={handleChange} />
</label>
<br />
<button type="submit">Submit</button>
<p>{status}</p>
</form>
);
}
export default ContactForm; Controlled Form Setup : formData state में name, email, और message fields store किये गए हैं और handleChange() function के through इन fields को update किया जाता है।
AJAX Request using fetch API : handleSubmit() function के अंदर fetch API का use करते हुए POST request भेजी जाती है और JSON data को body में stringify करके send किया जाता है।
Response Handling : Response मिलने पर success या failure के according से status update किया जाता है और user को feedback दिया जाता है।
●●●
axios एक popular HTTP client library है जो API requests को handle करने में help करती है और fetch से ज़्यादा flexible और readable syntax provide करती है।
पहले axios को अपने React project में install करें -
npm install axios
File : src/components/FeedbackForm.js
import React, { useState } from 'react';
import axios from 'axios';
function FeedbackForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
feedback: ''
});
const [status, setStatus] = useState('');
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value
});
};
const handleSubmit = async (e) => {
e.preventDefault();
setStatus('Submitting...');
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', formData);
if (response.status === 201) {
setStatus('Feedback submitted successfully!');
} else {
setStatus('Submission failed. Please try again.');
}
} catch (error) {
console.error('Error:', error);
setStatus('An error occurred. Please try again.');
}
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" name="name" value={formData.name} onChange={handleChange} />
</label>
<br />
<label>
Email:
<input type="email" name="email" value={formData.email} onChange={handleChange} />
</label>
<br />
<label>
Feedback:
<textarea name="feedback" value={formData.feedback} onChange={handleChange} />
</label>
<br />
<button type="submit">Submit</button>
<p>{status}</p>
</form>
);
}
export default FeedbackForm; axios Setup : axios.post के through form data को POST request में send किया गया है।
Error Handling : try...catch block के through errors को handle किया गया है और console.error के through error logs display किये गए हैं।
Status Update : Response के basis पर status message को update किया गया है जो user को feedback देता है।
●●●
React में form submit करते वक्त basic validation और error handling करना best practice है। ये ensure करता है कि data correct format में submit हो और user को proper feedback मिले।
File : src/components/ValidatedContactForm.js
// ValidatedContactForm.js
import React, { useState } from 'react';
import axios from 'axios';
function ValidatedContactForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const [status, setStatus] = useState('');
const [errors, setErrors] = useState({});
const validateForm = () => {
let formErrors = {};
if (!formData.name) formErrors.name = "Name is required";
if (!formData.email.includes('@')) formErrors.email = "Valid email is required";
if (!formData.message) formErrors.message = "Message cannot be empty";
return formErrors;
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value
});
};
const handleSubmit = async (e) => {
e.preventDefault();
const formErrors = validateForm();
if (Object.keys(formErrors).length > 0) {
setErrors(formErrors);
return;
}
setStatus('Submitting...');
setErrors({});
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', formData);
if (response.status === 201) {
setStatus('Form submitted successfully!');
} else {
setStatus('Form submission failed.');
}
} catch (error) {
console.error('Error:', error);
setStatus('An error occurred. Please try again.');
}
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" name="name" value={formData.name} onChange={handleChange} />
{errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
</label>
<br />
<label>
Email:
<input type="email" name="email" value={formData.email} onChange={handleChange} />
{errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
</label>
<br />
<label>
Message:
<textarea name="message" value={formData.message} onChange={handleChange} />
{errors.message && <p style={{ color: 'red' }}>{errors.message}</p>}
</label>
<br />
<button type="submit">Submit</button>
<p>{status}</p>
</form>
);
}
export default ValidatedContactForm; Form Validation: validateForm() function form inputs को validate करता है और अगर validation fail होता है तो errors display करता है।
Error Display : Errors को red color में display किया गया है, जो user को incorrect input के bare में notify करता है।
AJAX Request on Success : Validation pass होने के बाद ही axios request send कि जाती है।
●●●
AJAX form submission के साथ proper validation और error handling करना applications को user-friendly और reliable बनाता है।
I Hope, आपको अब Idea आ गया होगा कि ReactJs में forms को कैसे AJAX के through submit करते हैं ।
Happy coding! 🎉