मैं PHP से जावास्क्रिप्ट में चर और डेटा कैसे पास करूं?
मेरे पास PHP में एक चर है, और मुझे अपने जावास्क्रिप्ट कोड में इसके मूल्य की आवश्यकता है। मैं PHP से जावास्क्रिप्ट में अपना चर कैसे प्राप्त कर सकता हूं?
मेरे पास कोड है जो इस तरह दिखता है:
<?php
...
$val = $myService->getValue(); // Makes an API and database call
?>
मेरे पास जावास्क्रिप्ट कोड है जिसकी आवश्यकता है val
और इसकी तर्ज पर दिखता है:
<script>
myPlugin.start($val); // I tried this, but it didn't work
<?php myPlugin.start($val); ?> // This didn't work either
myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
</script>
जवाब
ऐसा करने के लिए वास्तव में कई दृष्टिकोण हैं। कुछ को दूसरों की तुलना में अधिक उपरि की आवश्यकता होती है, और कुछ को दूसरों की तुलना में बेहतर माना जाता है।
किसी विशेष क्रम में नहीं:
- सर्वर से अपनी जरूरत का डेटा प्राप्त करने के लिए AJAX का उपयोग करें।
- कहीं पेज में डेटा इको, और डोम से जानकारी प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करें।
- सीधे जावास्क्रिप्ट पर डेटा इको।
इस पोस्ट में, हम उपरोक्त विधियों में से प्रत्येक की जांच करेंगे, और प्रत्येक के पेशेवरों और विपक्षों को देखेंगे, साथ ही उन्हें कैसे लागू करेंगे।
1. सर्वर से आपको आवश्यक डेटा प्राप्त करने के लिए AJAX का उपयोग करें
इस विधि को सबसे अच्छा माना जाता है, क्योंकि आपके सर्वर साइड और क्लाइंट साइड स्क्रिप्ट पूरी तरह से अलग हैं ।
पेशेवरों
- परतों के बीच बेहतर जुदाई - यदि कल आप PHP का उपयोग करना बंद कर देते हैं, और एक सर्वलेट, एक REST API, या कुछ अन्य सेवा में जाना चाहते हैं, तो आपको जावास्क्रिप्ट कोड में ज्यादा बदलाव नहीं करना पड़ेगा।
- अधिक पठनीय - जावास्क्रिप्ट जावास्क्रिप्ट है, PHP PHP है। दोनों को मिलाए बिना, आपको दोनों भाषाओं पर अधिक पठनीय कोड मिलता है।
- अतुल्यकालिक डेटा स्थानांतरण की अनुमति देता है - PHP से जानकारी प्राप्त करना समय / संसाधन महंगा हो सकता है। कभी-कभी आप केवल जानकारी के लिए इंतजार नहीं करना चाहते हैं, पृष्ठ लोड करते हैं, और जब भी जानकारी पहुंचती है।
- डेटा सीधे मार्कअप पर नहीं मिलता है - इसका मतलब है कि आपके मार्कअप को किसी भी अतिरिक्त डेटा से साफ रखा गया है, और केवल जावास्क्रिप्ट इसे देखता है।
विपक्ष
- विलंबता - AJAX एक HTTP अनुरोध बनाता है, और HTTP अनुरोध नेटवर्क पर किया जाता है और नेटवर्क विलंबता है ।
- राज्य - एक अलग HTTP अनुरोध के माध्यम से लाए गए डेटा में HTML दस्तावेज़ को लाने वाले HTTP अनुरोध से कोई जानकारी शामिल नहीं होगी। आपको इस जानकारी की आवश्यकता हो सकती है (उदाहरण के लिए, यदि HTML डॉक्यूमेंट किसी फॉर्म सबमिट करने की प्रतिक्रिया में उत्पन्न होता है) और, यदि आप ऐसा करते हैं, तो इसे किसी भी तरह ट्रांसफर करना होगा। यदि आपने पृष्ठ में डेटा एम्बेड करने से इनकार कर दिया है (जो आपके पास यदि आप इस तकनीक का उपयोग कर रहे हैं) तो वह आपको कुकीज़ / सत्रों तक सीमित करता है जो कि दौड़ की स्थिति के अधीन हो सकता है।
कार्यान्वयन उदाहरण
AJAX के साथ, आपको दो पृष्ठों की आवश्यकता होती है, एक वह स्थान है जहाँ PHP आउटपुट उत्पन्न करता है, और दूसरा वह है जहाँ जावास्क्रिप्ट को वह आउटपुट मिलता है:
मिल-data.php
/* Do some operation here, like talk to the database, the file-session
* The world beyond, limbo, the city of shimmers, and Canada.
*
* AJAX generally uses strings, but you can output JSON, HTML and XML as well.
* It all depends on the Content-type header that you send with your AJAX
* request. */
echo json_encode(42); // In the end, you need to echo the result.
// All data should be json_encode()d.
// You can json_encode() any value in PHP, arrays, strings,
//even objects.
index.php (या वास्तविक पृष्ठ जैसा भी नाम दिया गया है)
<!-- snip -->
<script>
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest(); // New request object
oReq.onload = function() {
// This is where you handle what to do with the response.
// The actual data is found on this.responseText
alert(this.responseText); // Will alert: 42
};
oReq.open("get", "get-data.php", true);
// ^ Don't block the rest of the execution.
// Don't wait until the request finishes to
// continue.
oReq.send();
</script>
<!-- snip -->
42
जब फ़ाइल लोड हो रही हो तो दो फ़ाइलों का उपरोक्त संयोजन सतर्क हो जाएगा ।
कुछ और पढ़ने की सामग्री
- XMLHttpRequest का उपयोग करना - MDN
- XMLHttpRequest ऑब्जेक्ट संदर्भ - MDN
- मैं एसिंक्रोनस कॉल से प्रतिक्रिया कैसे लौटाऊं?
2. कहीं डेटा को पेज में इको करें, और DOM से जानकारी प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करें
यह विधि AJAX के लिए कम बेहतर है, लेकिन इसके फायदे अभी भी हैं। यह अभी भी PHP और जावास्क्रिप्ट के बीच अपेक्षाकृत अलग है इस अर्थ में कि जावास्क्रिप्ट में कोई PHP सीधे नहीं है।
पेशेवरों
- फास्ट - DOM ऑपरेशन अक्सर जल्दी होते हैं, और आप बहुत अधिक डेटा को अपेक्षाकृत जल्दी स्टोर और एक्सेस कर सकते हैं।
विपक्ष
- संभावित रूप से Unsemantic Markup - आमतौर पर, क्या होता है कि आप
<input type=hidden>
सूचना को संग्रहीत करने के लिए किसी प्रकार का उपयोग करते हैं, क्योंकि जानकारी को बाहर निकालना आसान हैinputNode.value
, लेकिन ऐसा करने का अर्थ है कि आपके HTML में एक अर्थहीन तत्व है। HTML में<meta>
दस्तावेज़ के बारे में डेटा के लिए तत्व है, और HTML 5data-*
विशेष रूप से जावास्क्रिप्ट के साथ पढ़ने के लिए डेटा के लिए विशेषताओं का परिचय देता है जो विशेष तत्वों से जुड़ा हो सकता है। - स्रोत की गंदगी - डेटा जो PHP उत्पन्न करता है, उसे सीधे HTML स्रोत में आउटपुट किया जाता है, जिसका अर्थ है कि आपको एक बड़ा और कम केंद्रित HTML स्रोत मिलता है।
- संरचित डेटा प्राप्त करने के लिए कठिन - संरचित डेटा को मान्य HTML होना होगा, अन्यथा आपको स्वयं तार को बचकर निकलना होगा।
- आपके डेटा लॉजिक के लिए कसकर कपल PHP - क्योंकि PHP का इस्तेमाल प्रेजेंटेशन में किया जाता है, आप दोनों को साफ़-साफ़ अलग नहीं कर सकते।
कार्यान्वयन उदाहरण
इसके साथ, विचार कुछ प्रकार के तत्व बनाने का है जो उपयोगकर्ता को प्रदर्शित नहीं किया जाएगा, लेकिन जावास्क्रिप्ट को दिखाई देगा।
index.php
<!-- snip -->
<div id="dom-target" style="display: none;">
<?php
$output = "42"; // Again, do some operation, get the output.
echo htmlspecialchars($output); /* You have to escape because the result
will not be valid HTML otherwise. */
?>
</div>
<script>
var div = document.getElementById("dom-target");
var myData = div.textContent;
</script>
<!-- snip -->
3. डेटा को सीधे जावास्क्रिप्ट पर इको करें
यह समझना शायद सबसे आसान है।
पेशेवरों
- बहुत आसानी से लागू - इसे लागू करने में बहुत कम समय लगता है, और समझ में आता है।
- गंदा स्रोत नहीं है - चर को सीधे जावास्क्रिप्ट में आउटपुट किया जाता है, इसलिए डोम प्रभावित नहीं होता है।
विपक्ष
- आपके डेटा लॉजिक के लिए कसकर कपल PHP - क्योंकि PHP का इस्तेमाल प्रेजेंटेशन में किया जाता है, आप दोनों को साफ़-साफ़ अलग नहीं कर सकते।
कार्यान्वयन उदाहरण
कार्यान्वयन अपेक्षाकृत सरल है:
<!-- snip -->
<script>
var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->
सौभाग्य!
मैं एक सरल उत्तर की कोशिश करने जा रहा हूं:
समस्या का स्पष्टीकरण
पहले, आइए घटनाओं के प्रवाह को समझते हैं जब एक पेज हमारे सर्वर से परोसा जाता है:
- पहले PHP चलाया जाता है, यह क्लाइंट को दी जाने वाली HTML उत्पन्न करता है।
- फिर, क्लाइंट को HTML डिलीवर कर दिया जाता है, इसके बाद PHP के साथ किया जाता है, मैं इस बात पर जोर देना चाहता हूं कि एक बार कोड सर्वर को छोड़ देगा - PHP इसके साथ किया जाता है और अब इसे एक्सेस नहीं कर सकता है।
- फिर, जावास्क्रिप्ट के साथ HTML क्लाइंट तक पहुंचता है, जो उस HTML पर जावास्क्रिप्ट को निष्पादित कर सकता है।
तो वास्तव में, यहाँ याद रखने वाली मुख्य बात यह है कि HTTP स्टेटलेस है । एक बार सर्वर के अनुरोध के बाद, सर्वर इसे छू नहीं सकता है। तो, यह हमारे विकल्प छोड़ता है:
- प्रारंभिक अनुरोध किए जाने के बाद क्लाइंट से अधिक अनुरोध भेजें ।
- शुरुआती अनुरोध में सर्वर को जो कहना था उसे एनकोड करें।
समाधान
यही मूल प्रश्न है जो आपको खुद से पूछना चाहिए:
क्या मैं वेबसाइट या एप्लिकेशन लिख रहा हूं?
वेबसाइटें मुख्य रूप से पृष्ठ आधारित हैं, और पृष्ठ लोड समय को यथासंभव तेज़ होना चाहिए (उदाहरण के लिए - विकिपीडिया)। वेब एप्लिकेशन अधिक AJAX के भारी होते हैं और क्लाइंट फास्ट जानकारी (उदाहरण के लिए - एक स्टॉक डैशबोर्ड) प्राप्त करने के लिए बहुत सारी गोल यात्राएं करते हैं।
वेबसाइट
प्रारंभिक अनुरोध किए जाने के बाद क्लाइंट से अधिक अनुरोध भेजना धीमा है क्योंकि इसके लिए अधिक HTTP अनुरोधों की आवश्यकता होती है जिनके लिए महत्वपूर्ण ओवरहेड है। इसके अलावा, AJAX अनुरोध करने के लिए इसे अतुल्यकालिकता की आवश्यकता होती है जब इसे पूरा करने के लिए हैंडलर की आवश्यकता होती है।
जब तक आपकी साइट सर्वर से उस जानकारी को प्राप्त करने के लिए एक आवेदन नहीं है, मैं एक और अनुरोध करने की सिफारिश नहीं करूंगा ।
आप तेजी से प्रतिक्रिया समय चाहते हैं जिसका रूपांतरण और लोड समय पर भारी प्रभाव पड़ता है। इस मामले में प्रारंभिक अपटाइम के लिए अजाक्स अनुरोध करना धीमा है और अनावश्यक है।
आपके पास समस्या से निपटने के दो तरीके हैं
- कुकी सेट करें - कुकीज़ HTTP अनुरोधों में भेजे गए हेडर हैं जो सर्वर और क्लाइंट दोनों पढ़ सकते हैं।
- चर को JSON के रूप में एन्कोड करें - JSON जावास्क्रिप्ट ऑब्जेक्ट्स के बहुत करीब दिखता है और अधिकांश JSON ऑब्जेक्ट्स मान्य JavaScript वैरिएबल हैं।
कुकी सेट करना वास्तव में बहुत मुश्किल नहीं है, आप बस इसे एक मूल्य प्रदान करते हैं:
setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
// Set it with HTTP only to true.
फिर, आप जावास्क्रिप्ट का उपयोग करके इसे पढ़ सकते हैंdocument.cookie
:
यहाँ एक छोटा हाथ रोल किया गया पार्सर है, लेकिन मैं इसके ठीक ऊपर से जुड़ा हुआ उत्तर बेहतर परीक्षण किया है:
var cookies = document.cookie.split(";").
map(function(el){ return el.split("="); }).
reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});
cookies["MyCookie"] // Value set with PHP.
कुकीज़ थोड़े डेटा के लिए अच्छी हैं। यह वही है जो ट्रैकिंग सेवाएं अक्सर करती हैं।
एक बार जब हमारे पास अधिक डेटा होता है, तो हम इसे JSON के साथ जावास्क्रिप्ट चर के अंदर एनकोड कर सकते हैं:
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
मान लिया जाए कि $value
यह json_encode
PHP की तरफ है (यह आमतौर पर है)। यह तकनीक वह है जो स्टैक ओवरफ्लो उदाहरण के लिए अपनी चैट के साथ करता है (केवल PHP के बजाय .NET का उपयोग करके)।
आवेदन
यदि आप एक एप्लिकेशन लिख रहे हैं - अचानक प्रारंभिक लोड समय हमेशा अनुप्रयोग के चल रहे प्रदर्शन के रूप में महत्वपूर्ण नहीं होता है, और यह डेटा और कोड को अलग-अलग लोड करने के लिए भुगतान करना शुरू कर देता है।
मेरा उत्तर यहां बताता है कि जावास्क्रिप्ट में AJAX का उपयोग करके डेटा को कैसे लोड किया जाए:
function callback(data){
// What do I do with the response?
}
var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState === 4) { // Request is done
if (httpRequest.status === 200) { // successfully
callback(httpRequest.responseText); // We're calling our method
}
}
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();
या jQuery के साथ:
$.get("/your/url").done(function(data){
// What do I do with the data?
});
अब, सर्वर को केवल एक /your/url
रूट / फ़ाइल शामिल करने की आवश्यकता है जिसमें कोड है जो डेटा को पकड़ता है और आपके मामले में इसके साथ कुछ करता है:
<$php
...
$val = myService->getValue(); // Makes an API and database call
echo json_encode($val); // Write it to the output
$>
इस तरह, हमारी जावास्क्रिप्ट फ़ाइल डेटा मांगती है और कोड या लेआउट के लिए पूछने के बजाय इसे दिखाती है। यह क्लीनर है और आवेदन अधिक होने के कारण भुगतान करना शुरू कर देता है। यह चिंताओं का बेहतर पृथक्करण भी है और यह क्लाइंट साइड कोड को बिना किसी सर्वर साइड तकनीक के परीक्षण के अनुमति देता है जो कि एक और प्लस है।
पोस्टस्क्रिप्ट: जब आप PHP से जावास्क्रिप्ट में कुछ भी इंजेक्ट करते हैं तो आपको XSS अटैक वैक्टर के बारे में बहुत जागरूक होना चाहिए । यह बहुत मान ठीक से बचने के लिए कठिन है और यह संदर्भ संवेदनशील है। यदि आप XSS से निपटने के बारे में अनिश्चित हैं, या इससे अनजान हैं - कृपया इस OWASP लेख , इस एक और इस प्रश्न को पढ़ें ।
मैं आमतौर पर HTML में डेटा- * विशेषताओं का उपयोग करता हूं।
<div class="service-container" data-service="<?php echo $myService->getValue(); ?>">
</div>
<script>
$(document).ready(function() {
$('.service-container').each(function() {
var container = $(this);
var service = container.data('service');
// Variable "service" now contains the value of $myService->getValue();
});
});
</script>
यह उदाहरण jQuery का उपयोग करता है, लेकिन इसे किसी अन्य लाइब्रेरी या वेनिला जावास्क्रिप्ट के लिए अनुकूलित किया जा सकता है।
आप डेटासेट प्रॉपर्टी के बारे में यहां और अधिक पढ़ सकते हैं: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
<script>
var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>
json_encode () की आवश्यकता है:
- PHP 5.2.0 या अधिक
$PHPVar
UTF-8, यूनिकोड के रूप में एन्कोडेड।
बस निम्न विधियों में से एक का उपयोग करें।
<script type="text/javascript">
var js_variable = '<?php echo $php_variable;?>';
<script>
या
<script type="text/javascript">
var js_variable = <?php echo json_encode($php_variable); ?>;
</script>
मुझे काफी पसंद है जिस तरह से वर्डप्रेस अपने enqueue और स्थानीय कार्यों के साथ काम करता है , इसलिए उस मॉडल का अनुसरण करते हुए, मैंने स्क्रिप्ट पर निर्भरता के अनुसार एक स्क्रिप्ट को पेज में डालने के लिए और स्क्रिप्ट के लिए अतिरिक्त डेटा उपलब्ध कराने के लिए एक सरल वर्ग लिखा।
class mHeader {
private $scripts = array();
/**
* @param string $id Unique script identifier
* @param string $src Script src attribute
* @param array $deps An array of dependencies ( script identifiers ).
* @param array $data An array, data that will be json_encoded and available to the script.
*/
function enqueue_script($id, $src, $deps = array(), $data = array()) {
$this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
}
private function dependencies($script) {
if ($script['deps']) {
return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
}
}
private function _unset($key, &$deps, &$out) {
$out[$key] = $this->scripts[$key];
unset($deps[$key]);
}
private function flattern(&$deps, &$out = array()) {
foreach($deps as $key => $value) {
empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
}
}
function print_scripts() {
if (!$this->scripts)
return;
$deps = array_map(array($this, 'dependencies'), $this->scripts);
while ($deps)
$this->flattern($deps, $js);
foreach($js as $key => $script) {
$script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
}
}
}
enqueue_script()
फ़ंक्शन के लिए कॉल स्क्रिप्ट जोड़ने, अन्य स्क्रिप्ट पर स्रोत और निर्भरता सेट करने और स्क्रिप्ट के लिए आवश्यक अतिरिक्त डेटा के लिए है।
$header = new mHeader();
$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));
$header->print_scripts();
और, print_scripts()
उपरोक्त उदाहरण की विधि इस आउटपुट को भेज देगी:
<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>
इस तथ्य के बावजूद कि 'jquery-ui' के बाद 'jquery' की लिपि की व्याख्या की जाती है, इसे पहले मुद्रित किया जाता है क्योंकि इसे 'jquery-ui' में परिभाषित किया गया है कि यह 'jquery' पर निर्भर करता है। 'कस्टम-स्क्रिप्ट' के लिए अतिरिक्त डेटा एक नई स्क्रिप्ट ब्लॉक के अंदर हैं और इसे सामने रखा गया है, इसमें ऐसी mydata
वस्तु है जो अतिरिक्त डेटा रखती है, जो अब 'कस्टम-स्क्रिप्ट' के लिए उपलब्ध है।
इसे इस्तेमाल करे:
<?php
echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>
-
-थोड़ी देर तक यही कोशिश करते रहे
यद्यपि यह काम करता है, हालांकि यह प्रदर्शन को धीमा कर देता है। चूंकि PHP एक सर्वर-साइड स्क्रिप्ट है, जबकि जावास्क्रिप्ट एक उपयोगकर्ता पक्ष है।
myPlugin.start($val); // Tried this, didn't work
यह काम नहीं करता है क्योंकि $val
जहाँ तक जावास्क्रिप्ट का संबंध नहीं है, अपरिभाषित है, अर्थात PHP कोड ने इसके लिए कुछ भी आउटपुट नहीं किया है $val
। अपने ब्राउज़र में स्रोत को देखने का प्रयास करें और यहां वह है जो आप देखेंगे:
myPlugin.start(); // I tried this, and it didn't work
तथा
<?php myPlugin.start($val); ?> // This didn't work either
यह काम नहीं करता है क्योंकि PHP myPlugin
एक स्थिर के रूप में इलाज करने की कोशिश करेगा और जब वह विफल हो जाएगा तो वह इसे स्ट्रिंग के रूप में 'myPlugin'
मानने की कोशिश करेगा जिसे यह PHP फ़ंक्शन के आउटपुट के साथ समेटने की कोशिश करेगा start()
और चूंकि यह अपरिभाषित है, इसलिए यह एक घातक उत्पादन करेगा त्रुटि।
तथा
myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
हालांकि, यह काम करने की सबसे अधिक संभावना है, क्योंकि PHP कोड अपेक्षित तर्कों के साथ वैध जावास्क्रिप्ट का उत्पादन कर रहा है, अगर यह विफल रहता है, तो संभावना है कि यह myPlugin
अभी तक खो गया है। अपने आदेश का निष्पादन करें।
इसके अलावा, आपको ध्यान देना चाहिए कि PHP कोड आउटपुट असुरक्षित है और इसे फ़िल्टर किया जाना चाहिए json_encode()
।
संपादित करें
क्योंकि मुझे लापता कोष्ठक में ध्यान नहीं दिया गया myPlugin.start(<?=$val?>
: - \
जैसा कि @ सैकंड रिकूडो बताते हैं, इसे सही ढंग से काम $val
करने के लिए समापन कोष्ठक को शामिल करना होगा, उदाहरण के लिए:$val="42);"
इसका मतलब है कि PHP अब myPlugin.start(42);
जावास्क्रिप्ट कोड द्वारा निष्पादित होने पर अपेक्षित रूप से उत्पादन और काम करेगा।
मैं PHP का उपयोग करके जावास्क्रिप्ट चर असाइन करने के लिए एक आसान विधि के साथ आया हूं।
यह PHP चर को स्टोर करने के लिए एचटीएमएल 5 डेटा विशेषताओं का उपयोग करता है और फिर इसे पेज लोड पर जावास्क्रिप्ट को सौंपा गया है।
एक पूर्ण ट्यूटोरियल यहां पाया जा सकता है ।
उदाहरण:
<?php
$variable_1 = "QNimate";
$variable_2 = "QScutter";
?>
<span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php
यहाँ जावास्क्रिप्ट कोड है
var variable_1 = undefined;
var variable_2 = undefined;
window.onload = function(){
variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}
- JSON में डेटा परिवर्तित करें
- JSON फ़ाइल प्राप्त करने के लिए AJAX को कॉल करें
- JSON को जावास्क्रिप्ट ऑब्जेक्ट में कन्वर्ट करें
उदाहरण:
चरण 1
<?php
$servername = "localhost";
$username = "";
$password = "";
$dbname = "";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, image FROM phone";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()){
$v[] = $row;
}
echo json_encode($v);
$conn->close();
?>
चरण 2
function showUser(fnc) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// STEP 3
var p = JSON.parse(this.responseText);
}
}
}
यहाँ एक है जिसे मैं एक विकल्प के रूप में पोस्ट नहीं करता हूं। यह अजाक्स का उपयोग करने के समान है, लेकिन स्पष्ट रूप से अलग है।
सबसे पहले, स्क्रिप्ट के स्रोत को सीधे PHP फ़ाइल में सेट करें।
<script type="text/javascript" src="url_to_your_php_file.php" /></script>
आप इस तरह के उदाहरण के रूप में PHP फ़ाइल के लिए एक चर वापस पारित कर सकते हैं:
<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>
फिर "your_php_file.php" में:
<?php
// THIS IS A SIMPLE EXAMPLE
// it demonstrates one method of using the src attribute to link
// to a PHP file which can generate JavaScript code dynamically
// and share data between PHP and JavaScript
// you may take this learning example and develop it further
// relying on your own coding skills for validating data
// and avoiding errors, of course
header('content-type: text/javascript');
// If you pass a $_GET variable from the JavaScript
// you should add code to validate your $_GET variable(s)
// You can add code to query a database
// using $_GET['var1'] or some other criteria
// You can add simple variable assignments
$value = 'some value';
// For the OP's needs (assumes the class object has been defined)
$val = $myService->getValue();
?>
function name() {
// Pay attention because you need to use quotes properly
// and account for possible quotes in the variable strings
// to avoid both PHP and JavaScript errors
// example assumes $val has been returned as a string
// validate $val as needed using your method of choice
var example1 = <?php echo '"' . $val . '"'; ?>;
var example2 = <?php echo '"' . $value . '"'; ?>;
var example3 = <?php echo '"some other data"'; ?>;
alert( example1 + ' / ' + example2 );
}
<?php
// You may even want to include additional files (.php or .js, etc.)
@include 'local_path_to_some_other_js_file.js';
@include 'local_path_to_some_other_php_file.php';
exit;
?>
यहाँ इस चाल है:
यहाँ उस चर का उपयोग करने के लिए आपका 'PHP' है:
<?php $name = 'PHP variable'; echo '<script>'; echo 'var name = ' . json_encode($name) . ';'; echo '</script>'; ?>
अब आपके पास एक जावास्क्रिप्ट चर है
'name'
, और यहां उस चर का उपयोग करने के लिए आपका जावास्क्रिप्ट कोड है:<script> console.log("I am everywhere " + name); </script>
मान लीजिए कि आपका चर हमेशा पूर्णांक है। उस मामले में यह आसान है:
<?PHP
$number = 4;
echo '<script>';
echo 'var number = ' . $number . ';';
echo 'alert(number);';
echo '</script>';
?>
आउटपुट :
<script>var number = 4;alert(number);</script>
मान लीजिए कि आपका वैरिएबल पूर्णांक नहीं है, लेकिन यदि आप उपरोक्त विधि को आजमाते हैं तो आपको कुछ इस तरह मिलेगा:
<script>var number = abcd;alert(number);</script>
लेकिन जावास्क्रिप्ट में यह एक सिंटैक्स त्रुटि है।
तो PHP में हमारे पास एक फ़ंक्शन कॉल है json_encode
जो स्ट्रिंग को JSON ऑब्जेक्ट में एन्कोड करता है।
<?PHP
$number = 'abcd';
echo '<script>';
echo 'var number = ' . json_encode($number) . ';';
echo 'alert(number);';
echo '</script>';
?>
चूंकि abcd
JSON है "abcd"
, यह इस तरह दिखता है:
<script>var number = "abcd";alert(number);</script>
आप सरणियों के लिए एक ही विधि का उपयोग कर सकते हैं:
<?PHP
$details = [
'name' => 'supun',
'age' => 456,
'weight' => '55'
];
echo '<script>';
echo 'var details = ' . json_encode($details) . ';';
echo 'alert(details);';
echo 'console.log(details);';
echo '</script>';
?>
और आपका जावास्क्रिप्ट कोड इस तरह दिखता है:
<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>
कंसोल आउटपुट
बहुत शोध के बाद, मैंने पाया कि सबसे आसान तरीका सभी प्रकार के चर को आसानी से पार करना है।
सर्वर स्क्रिप्ट में, आपके पास दो चर हैं, और आप उन्हें क्लाइंट स्क्रिप्ट में भेजने का प्रयास कर रहे हैं:
$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';
आपके किसी भी जावास्क्रिप्ट कोड को पृष्ठ पर बुलाया जाता है, बस उन चरों को कहते हैं।
मुझे लगता है कि संचारित करने के लिए डेटा एक स्ट्रिंग है।
जैसा कि अन्य टिप्पणीकारों ने कहा है, AJAX एक संभव समाधान है, लेकिन विपक्ष पेशेवरों से आगे निकल जाता है: इसकी एक विलंबता है और इसे प्रोग्राम करना कठिन है (यह सर्वर और क्लाइंट-साइड दोनों मान प्राप्त करने के लिए कोड की आवश्यकता है), जब एक सरल बच निकलने का कार्य पर्याप्त होना चाहिए।
इसलिए, हम बच कर वापस आ रहे हैं। यदि आप पहले से ही यूटीएफ -8 के रूप में स्रोत स्ट्रिंग को एनकोड करते हैं तो यहjson_encode($string)
काम करता है क्योंकि यह पहले से ही नहीं है, क्योंकि इसके लिए यूटीएफ -8 डेटा की आवश्यकता होती है। यदि स्ट्रिंग आईएसओ-8859-1 में है, तो आप बस उपयोग कर सकते हैं ; अन्यथा आप हमेशा पहले रूपांतरण करने के लिए उपयोग कर सकते हैं ।json_encode
json_encode(utf8_encode($string))
iconv
लेकिन एक बड़ा गेटा है। यदि आप इसे घटनाओं में उपयोग कर रहे हैं, तो आपको htmlspecialchars()
इसे सही कोड बनाने के लिए परिणाम पर चलाने की आवश्यकता है । और फिर आपको या तो घटना को घेरने के लिए दोहरे उद्धरण चिह्नों का उपयोग करने के लिए सावधान रहना होगा, या हमेशा ENT_QUOTES
htmlspecialchars में जोड़ना होगा। उदाहरण के लिए:
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Fails:
//echo '<body onload="alert(', json_encode($myvar), ');">';
// Fails:
//echo "<body onload='alert(", json_encode($myvar), ");'>";
// Fails:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";
// Works:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
// Works:
echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';
echo "</body>";
हालाँकि, आप htmlspecialchars
नियमित जावास्क्रिप्ट कोड (कोड <script>
... </script>
टैग्स में संलग्न ) का उपयोग नहीं कर सकते । htmlspecialchars
इवेंट कोड लिखते समय परिणाम को भूलकर इस फ़ंक्शन का उपयोग गलतियों से होने का खतरा होता है ।
ऐसा फ़ंक्शन लिखना संभव है जिसमें वह समस्या न हो, और जब तक कि आप अपनी घटनाओं को हमेशा एकल उद्धरणों में, या हमेशा दोहरे उद्धरण चिह्नों में संलग्न करते हैं, दोनों घटनाओं और नियमित रूप से जावास्क्रिप्ट कोड में उपयोग किया जा सकता है। यहाँ मेरा प्रस्ताव है, उन्हें दोहरे उद्धरण चिह्नों में होना चाहिए (जो मुझे पसंद हैं):
<?php
// Optionally pass the encoding of the source string, if not UTF-8
function escapeJSString($string, $encoding = 'UTF-8')
{
if ($encoding != 'UTF-8')
$string = iconv($encoding, 'UTF-8', $string);
$flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
$string = substr(json_encode($string, $flags), 1, -1);
return "'$string'";
}
फ़ंक्शन को PHP 5.4+ की आवश्यकता है। उदाहरण उपयोग:
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Note use of double quotes to enclose the event definition!
echo '<body onload="alert(', escapeJSString($myvar), ');">';
// Example with regular code:
echo '<script>alert(', escapeJSString($myvar), ');</script>';
echo '</body>';
अपने कोड के अनुसार
<$php
$val = $myService->getValue(); // Makes an API and database call
echo '<span id="value">'.$val.'</span>';
$>
अब आप DOM का उपयोग करके मूल्य प्राप्त कर सकते हैं, इनर आईडी के HTML का उपयोग कर सकते हैं, इस मामले में आपको सर्वर, या अजाक्स या किसी अन्य चीज के लिए कोई कॉल करने की आवश्यकता नहीं है।
आपका पेज PHP का उपयोग करके इसे प्रिंट करेगा, और आप DOM का उपयोग करके जावास्क्रिप्ट प्राप्त करेंगे।
<?php
$val = $myService->getValue(); // Makes an API and database call
echo "
<script>
myPlugin.start({$val});
</script> ";
?>