Gọi hàm php từ JavaScript

Question 1

Có cách nào tôi có thể chạy một hàm php thông qua một hàm JS không?

một cái gì đó như thế này:

<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>

Về cơ bản tôi muốn chạy hàm php query("hello"), khi tôi nhấp vào href có tên "Kiểm tra" sẽ gọi hàm php.

Question 2

Về bản chất, đây là mục đích của AJAX . Trang của bạn tải và bạn thêm một sự kiện vào một phần tử. Khi người dùng làm cho sự kiện được kích hoạt, giả sử bằng cách nhấp vào một cái gì đó, Javascript của bạn sử dụng đối tượng XMLHttpRequest để gửi yêu cầu đến máy chủ.

Sau khi máy chủ phản hồi (có thể là với đầu ra), một hàm / sự kiện Javascript khác cung cấp cho bạn một nơi để làm việc với đầu ra đó, bao gồm việc chỉ cần dán nó vào trang như bất kỳ đoạn HTML nào khác.

Bạn có thể làm điều đó "bằng tay" với Javascript đơn giản hoặc bạn có thể sử dụng jQuery. Tùy thuộc vào quy mô dự án của bạn và tình huống cụ thể, có thể đơn giản hơn nếu chỉ sử dụng Javascript thuần túy.

Javascript thuần túy

Trong ví dụ rất cơ bản này, chúng tôi gửi một yêu cầu myAjax.phpkhi người dùng nhấp vào một liên kết. Máy chủ sẽ tạo ra một số nội dung, trong trường hợp này là "hello world!". Chúng tôi sẽ đưa vào phần tử HTML với id output.

Javascript

// 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!';
?>

Hãy dùng thử: http://jsfiddle.net/GRMule/m8CTk/

Với thư viện javascript (jQuery et al)

Có thể cho rằng, đó là rất nhiều mã Javascript. Tất nhiên, bạn có thể rút ngắn điều đó bằng cách thắt chặt các khối hoặc sử dụng các toán tử logic ngắn gọn hơn, nhưng vẫn còn rất nhiều điều xảy ra ở đó. Nếu bạn có kế hoạch thực hiện nhiều việc kiểu này trong dự án của mình, bạn có thể tốt hơn với thư viện javascript.

Sử dụng cùng một HTML và PHP ở trên, đây là toàn bộ tập lệnh của bạn (với jQuery được bao gồm trên trang). Tôi đã thắt chặt mã một chút để phù hợp hơn với phong cách chung của jQuery, nhưng bạn có ý tưởng:

// 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;
}

Hãy dùng thử: http://jsfiddle.net/GRMule/WQXXT/

Đừng vội sử dụng jQuery: việc thêm bất kỳ thư viện nào vẫn đang thêm hàng trăm hoặc hàng nghìn dòng mã vào dự án của bạn chắc chắn như thể bạn đã viết chúng. Bên trong tệp thư viện jQuery, bạn sẽ tìm thấy mã tương tự như mã trong ví dụ đầu tiên, cộng với nhiều mã khác . Đó có thể là một điều tốt, nó có thể không. Lập kế hoạch và xem xét quy mô hiện tại của dự án và khả năng mở rộng trong tương lai và môi trường hoặc nền tảng mục tiêu.

Nếu đây là tất cả những gì bạn cần làm, hãy viết javascript thuần túy một lần và bạn đã hoàn tất.

Tài liệu

AJAX trên MDN - https://developer.mozilla.org/en/ajax
XMLHttpRequesttrên MDN - https://developer.mozilla.org/en/XMLHttpRequest
XMLHttpRequesttrên MSDN - 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 được đánh giá tại máy chủ; javascript được đánh giá tại máy khách / trình duyệt, do đó bạn không thể gọi trực tiếp một hàm PHP từ javascript . Nhưng bạn có thể đưa ra một yêu cầu HTTP tới máy chủ sẽ kích hoạt một hàm PHP, với AJAX.

Question 4

Cách duy nhất để thực thi PHP từ JS là AJAX. Bạn có thể gửi dữ liệu đến máy chủ (ví dụ: GET /ajax.php?do=someFunction) sau đó trong ajax.php bạn viết:

function someFunction() {
    echo 'Answer';
}

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

và sau đó, bắt câu trả lời với JS (tôi đang sử dụng jQuery để thực hiện các yêu cầu AJAX)

Có lẽ bạn sẽ cần một số định dạng câu trả lời. Xem JSON hoặc XML, nhưng JSON rất dễ sử dụng với JavaScript. Trong PHP, bạn có thể sử dụng hàm json_encode ($ array); lấy mảng làm đối số.

Question 5

Gần đây tôi đã xuất bản một plugin jQuery cho phép bạn thực hiện các lệnh gọi hàm PHP theo nhiều cách khác nhau: https://github.com/Xaxis/jquery.php

Cách sử dụng ví dụ đơn giản:

// 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/"]