जावास्क्रिप्ट से php फ़ंक्शन को कॉल करें

Question 1

क्या जेएस फ़ंक्शन के माध्यम से मैं एक php फ़ंक्शन चला सकता हूं?

कुछ इस तरह:

<script type="text/javascript">
function test(){
document.getElementById("php_code").innerHTML="<?php 
query("hello");       ?>";    
}
</script>

<a href="#" style="display:block; color:#000033; font-family:Tahoma; font-size:12px;"     
onclick="test(); return false;"> test </a>
<span id="php_code"> </span>

मैं मूल रूप से php फ़ंक्शन को चलाना चाहता हूं query("hello"), जब मैं "टेस्ट" नामक href पर क्लिक करता हूं, जो php फ़ंक्शन को कॉल करेगा।

Question 2

यह, संक्षेप में, AJAX के लिए क्या है । आपका पृष्ठ लोड होता है, और आप किसी ईवेंट को एक तत्व में जोड़ते हैं। जब उपयोगकर्ता इवेंट को ट्रिगर करने का कारण बनता है, तो कुछ क्लिक करके कहें, आपका जावास्क्रिप्ट सर्वर पर अनुरोध भेजने के लिए XMLHttpRequest ऑब्जेक्ट का उपयोग करता है।

सर्वर के जवाब के बाद (संभवतः आउटपुट के साथ), एक और जावास्क्रिप्ट फ़ंक्शन / ईवेंट आपको उस आउटपुट के साथ काम करने के लिए एक जगह देता है, जिसमें केवल HTML के किसी अन्य टुकड़े की तरह इसे पृष्ठ में चिपका दिया जाता है।

आप इसे सादे जावास्क्रिप्ट के साथ "हाथ से" कर सकते हैं, या आप jQuery का उपयोग कर सकते हैं। आपकी परियोजना के आकार और विशेष स्थिति के आधार पर, यह केवल सादे जावास्क्रिप्ट का उपयोग करने के लिए अधिक सरल हो सकता है।

सादा जावास्क्रिप्ट

इस बहुत ही मूल उदाहरण में, myAjax.phpजब उपयोगकर्ता किसी लिंक पर क्लिक करता है , तो हम एक अनुरोध भेजते हैं । सर्वर कुछ सामग्री उत्पन्न करेगा, इस मामले में "हैलो वर्ल्ड!"। हम आईडी के साथ HTML एलिमेंट में डालेंगे output।

जावास्क्रिप्ट

// handles the click event for link 1, sends the query
function getOutput() {
  getRequest(
      'myAjax.php', // URL for the PHP file
       drawOutput,  // handle successful request
       drawError    // handle error
  );
  return false;
}  
// handles drawing an error message
function drawError() {
    var container = document.getElementById('output');
    container.innerHTML = 'Bummer: there was an error!';
}
// handles the response, adds the html
function drawOutput(responseText) {
    var container = document.getElementById('output');
    container.innerHTML = responseText;
}
// helper function for cross-browser request object
function getRequest(url, success, error) {
    var req = false;
    try{
        // most browsers
        req = new XMLHttpRequest();
    } catch (e){
        // IE
        try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            // try an older version
            try{
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return false;
            }
        }
    }
    if (!req) return false;
    if (typeof success != 'function') success = function () {};
    if (typeof error!= 'function') error = function () {};
    req.onreadystatechange = function(){
        if(req.readyState == 4) {
            return req.status === 200 ? 
                success(req.responseText) : error(req.status);
        }
    }
    req.open("GET", url, true);
    req.send(null);
    return req;
}

HTML

<a href="#" onclick="return getOutput();"> test </a>
<div id="output">waiting for action</div>

PHP

// file myAjax.php
<?php
  echo 'hello world!';
?>

इसे आज़माएं: http://jsfiddle.net/GRMule/m8CTk/

एक जावास्क्रिप्ट लाइब्रेरी (jQuery एट अल) के साथ

यकीनन, यह जावास्क्रिप्ट कोड का एक बहुत है। आप ब्लॉक को कड़ा करके या अधिक ट्रिक लॉजिक ऑपरेटरों का उपयोग करके बेशक छोटा कर सकते हैं, लेकिन अभी भी बहुत कुछ चल रहा है। यदि आप अपने प्रोजेक्ट पर इस प्रकार की बहुत कुछ करने की योजना बनाते हैं, तो आप एक जावास्क्रिप्ट लाइब्रेरी के साथ बेहतर हो सकते हैं।

ऊपर से एक ही HTML और PHP का उपयोग करना, यह आपकी पूरी स्क्रिप्ट (पेज पर jQuery के साथ) है। मैंने jQuery की सामान्य शैली के साथ अधिक सुसंगत होने के लिए कोड को थोड़ा कस दिया है, लेकिन आपको यह विचार मिलता है:

// handles the click event, sends the query
function getOutput() {
   $.ajax({
      url:'myAjax.php',
      complete: function (response) {
          $('#output').html(response.responseText);
      },
      error: function () {
          $('#output').html('Bummer: there was an error!');
      }
  });
  return false;
}

इसे आज़माएं: http://jsfiddle.net/GRMule/WQXXT/

अभी तक jQuery के लिए जल्दी मत करो: किसी भी लाइब्रेरी को जोड़ना अभी भी आपके प्रोजेक्ट के लिए कोड के सैकड़ों या हजारों लाइनों को जोड़ रहा है जैसे कि आपने उन्हें लिखा था। JQuery लाइब्रेरी फ़ाइल के अंदर, आपको पहले उदाहरण में समान कोड मिलेगा, साथ ही पूरी तरह से अधिक । यह एक अच्छी बात हो सकती है, यह नहीं हो सकता है। योजना, और विस्तार और लक्ष्य पर्यावरण या मंच के लिए अपनी परियोजना के वर्तमान आकार और भविष्य की संभावना पर विचार करें।

यदि यह सब आपको करना है, तो एक बार सादे जावास्क्रिप्ट लिखें और आपका काम पूरा हो जाएगा।

प्रलेखन

AJAX MDN पर - https://developer.mozilla.org/en/ajax
XMLHttpRequestMDN पर - https://developer.mozilla.org/en/XMLHttpRequest
XMLHttpRequestMSDN पर - http://msdn.microsoft.com/en-us/library/ie/ms535874%28v=vs.85%29.aspx
jQuery - http://jquery.com/download/
jQuery.ajax- http://api.jquery.com/jQuery.ajax/

Question 3

सर्वर पर PHP का मूल्यांकन किया जाता है; जावास्क्रिप्ट का मूल्यांकन क्लाइंट / ब्राउज़र पर किया जाता है, इस प्रकार आप जावास्क्रिप्ट फ़ंक्शन को सीधे जावास्क्रिप्ट से कॉल नहीं कर सकते । लेकिन आप सर्वर को एक HTTP अनुरोध जारी कर सकते हैं जो AJAX के साथ PHP फ़ंक्शन को सक्रिय करेगा।

Question 4

JS से PHP को निष्पादित करने का एकमात्र तरीका AJAX है। आप सर्वर को डेटा भेज सकते हैं (उदाहरण के लिए, GET /ajax.php?do=someFunction) तो ajax.php में आप लिखें:

function someFunction() {
    echo 'Answer';
}

if ($_GET['do'] === "someFunction") {
    someFunction();
}

और फिर, JS के साथ उत्तर को पकड़ लें (मैं AJAX अनुरोध करने के लिए jQuery का उपयोग कर रहा हूं)

संभवतः आपको उत्तर के कुछ प्रारूप की आवश्यकता होगी। JSON या XML देखें, लेकिन JSON का उपयोग जावास्क्रिप्ट के साथ करना आसान है। PHP में आप function json_encode ($ array) का उपयोग कर सकते हैं; जो तर्क के रूप में सरणी हो जाता है।

Question 5

मैंने हाल ही में एक jQuery प्लगइन प्रकाशित किया है जो आपको विभिन्न तरीकों से PHP फ़ंक्शन कॉल करने की अनुमति देता है: https://github.com/Xaxis/jquery.php

सरल उदाहरण उपयोग:

// Both .end() and .data() return data to variables
var strLenA = P.strlen('some string').end();
var strLenB = P.strlen('another string').end();
var totalStrLen = strLenA + strLenB;
console.log( totalStrLen ); // 25

// .data Returns data in an array
var data1 = P.crypt("Some Crypt String").data();
console.log( data1 ); // ["$1$Tk1b01rk$shTKSqDslatUSRV3WdlnI/"]