← Back to JavaScript Course | Chapter 9: Async & Web APIs | Lesson 16 of 26

JS का AJAX PHP

PHP AJAX requests के साथ जोड़ी जाने वाली सबसे आम server-side languages में से एक है -- client side पर एक JavaScript fetch call, और server पर एक PHP script जो request पढ़ती है, उसे process करती है, और एक response return करती है, यह pattern मौजूदा websites की एक बहुत बड़ी संख्या में पाया जाता है।

In this page:

  1. एक Basic Fetch-to-PHP Round Trip
  2. JavaScript के लिए PHP से JSON Return करना
  3. PHP को POST Data भेजना
  4. PHP को JSON भेजना
  5. PHP Side पर Data Validate करना

एक Basic Fetch-to-PHP Round Trip

JavaScript का fetch() किसी .php file के URL पर ठीक वैसे ही request भेजता है जैसे किसी और endpoint पर भेजता, और PHP script उसे process करके एक response echo करती है, जिसे JavaScript फिर पढ़ता है -- client-side code में PHP-specific कुछ भी नहीं है।

Note: JavaScript fetch call जोड़ने से पहले किसी नए PHP endpoint को पहले सीधे browser में (या curl से) test करें, उसके output की पुष्टि करते हुए।
Warning: एक PHP script जो अपने intended response से पहले कुछ अतिरिक्त output करती है (जैसे कोई stray warning) उस response body को बिगाड़ देती है जिसे JavaScript पढ़ने की उम्मीद कर रहा है।

उदाहरण: A Basic Fetch-to-PHP Round Trip

javascript 
fetch("greet.php")
  .then(response => response.text())
  .then(text => console.log(text)); // PHP echoes a response back

JavaScript के लिए PHP से JSON Return करना

एक PHP endpoint header('Content-Type: application/json') सेट करके और किसी PHP array या object पर json_encode() का result echo करके ऐसा data return करता है जिसे JavaScript structural रूप से parse कर सकता है -- फिर JavaScript side बस एक usable JavaScript value वापस पाने के लिए response.json() कॉल करता है।

Note: PHP side पर हमेशा JSON content type header सेट करें, भले ही ज़्यादातर fetch code technically उसके बिना भी JSON parse कर लेगा -- यह सही और अपेक्षित practice है।
Warning: json_encode() भूल जाना और किसी raw PHP array को सीधे echo करना असली JSON के बजाय text "Array" output करता है, जिसे response.json() parse नहीं कर सकता।

उदाहरण: Returning JSON from PHP for JavaScript

javascript 
// Define the method `fetch` taking `"data.php"`
// Define the method `fetch` taking `"data.php"`
fetch("data.php")
  // On success, run this with the resolved value as `response`
  // On success, run this with the resolved value as `response`
  .then(response => response.json())
  // On success, run this with the resolved value as `data`
  // On success, run this with the resolved value as `data`
  .then(data => console.log(data));

PHP को POST Data भेजना

JavaScript से एक POST request अपना data form-encoded (वह traditional format जिसे PHP का $_POST अपने आप पढ़ता है) के रूप में या एक JSON body (जिसे PHP को php://input के ज़रिए manually पढ़ना पड़ता है) के रूप में भेज सकता है -- दोनों काम करते हैं, पर form-encoding को सबसे कम अतिरिक्त PHP code चाहिए।

Note: जब आप खासतौर पर चाहें कि $_POST बिना अतिरिक्त parsing code के अपने आप भर जाए, तो form-encoded body content इस्तेमाल करें (Content-Type: application/x-www-form-urlencoded से मेल खाता हुआ)।
Warning: form data की उम्मीद कर रही एक साधारण PHP script को एक JSON body भेजना $_POST को खाली छोड़ देता है, क्योंकि PHP form-encoded data की तरह एक JSON body को अपने आप $_POST में parse नहीं करता।

उदाहरण: Sending POST Data to PHP

javascript 
// Declare the constant `formData` as a new `FormData` instance
// Declare the constant `formData` as a new `FormData` instance
const formData = new FormData();
// Call `formData.append("name", "Sam")`
// Call `formData.append("name", "Sam")`
formData.append("name", "Sam");
fetch("save.php", { method: "POST", body: formData }).then(r => r.json()).then(data => console.log(data));

PHP को JSON भेजना

जब request body form-encoded के बजाय JSON हो, तो PHP को इसे manually पढ़ना होगा: file_get_contents('php://input') raw request body लाता है, और json_decode() इसे एक PHP array या object में बदल देता है, क्योंकि एक JSON-formatted body के लिए $_POST खाली ही रहता है।

Note: PHP side पर एक JSON request body पढ़ने के standard pattern के रूप में json_decode(file_get_contents('php://input'), true) इस्तेमाल करें।
Warning: json_decode() के दूसरे true argument को भूल जाना एक associative array के बजाय एक PHP object return करता है, जो यह बदल देता है कि आप fields को -> से access करते हैं या []।

उदाहरण: Sending JSON to PHP

javascript 
// Send a POST request with a JSON body to save.php
fetch("save.php", {
  method: "POST",
  headers: { "Content-Type": "application/json" }, // tell the server we're sending JSON
  body: JSON.stringify({ name: "Sam" }), // convert the JS object into a JSON string
}).then(r => r.json()).then(data => console.log(data)); // parse and log the server's JSON reply

PHP Side पर Data Validate करना

एक regular form submission की तरह ही, किसी AJAX request से आने वाले किसी भी data को भरोसा किए जाने या store होने से पहले server-side validation चाहिए -- required fields, सही formats, और appropriate types जांचना, और validation fail होने पर एक साफ JSON error response return करना।

Note: AJAX endpoints के लिए वही ठीक PHP validation functions और rules दोबारा इस्तेमाल करें जो आप पहले से regular form submissions के लिए इस्तेमाल करते हैं।
Warning: AJAX-submitted data को form data से अंतर्निहित रूप से ज़्यादा safe मानना (क्योंकि यह "आपके अपने JavaScript से आई") इस बात को नज़रअंदाज़ करता है कि किसी भी endpoint को सीधे कॉल किया जा सकता है, JavaScript को पूरी तरह bypass करते हुए।

उदाहरण: Validating Data on the PHP Side

javascript 
fetch("register.php", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email: "" }),
})
  // On success, run this with the resolved value as `r`
  // On success, run this with the resolved value as `r`
  .then(r => r.json())
  // On success, run this with the resolved value as `data`
  // On success, run this with the resolved value as `data`
  .then(data => console.log(data.error));
Live Example
Related Topics

JS का AJAX XML · JS AJAX डेटाबेस · JS AJAX रिस्पॉन्स · JS AJAX रिक्वेस्ट

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. यह मान लेना कि कोई PHP endpoint Content-Type: application/json header explicitly set किए बिना और response data पर json_encode() कॉल किए बिना automatically JSON return करता है।
  2. यह भूल जाना कि एक PHP script GET data को $_GET के ज़रिए और POST data को $_POST के ज़रिए पढ़ती है -- गलत method से data भेजने पर PHP script गलत जगह देखती रह जाती है।
  3. PHP side पर JavaScript से भेजा गया data validate या sanitize न करना, क्योंकि client-side data AJAX से आते हुए भी बिल्कुल उतना ही untrustworthy है जितना किसी regular HTML form से।
चैप्टर सारांश
  • एक PHP AJAX endpoint incoming data को $_GET या $_POST से पढ़ता है, बिल्कुल वैसे ही जैसे वह किसी regular page request के लिए करता।
  • PHP side पर json_encode() किसी PHP array या object को एक JSON string में convert करता है जिसे JavaScript fetch call response.json() से parse कर सकता है।
  • JavaScript से PHP को भेजा गया data किसी regular form से आए data जितना ही untrusted है, और उसे same validation और sanitization चाहिए।
ब्राउज़र सपोर्ट

AJAX requests किसी PHP backend के साथ किसी भी दूसरी server-side language की तरह ही समान रूप से काम करते हैं, क्योंकि browser side पूरी तरह language-agnostic है।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS AJAX XML Next Lesson → JS AJAX Database

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.