質問

JSの関数を経由して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関数を呼び出すだろう"Test"をクリックします。

どのように解決するのですか？

これは、要するに AJAX は に対して . ページが読み込まれ、ある要素にイベントが追加されます。ユーザが何かをクリックするなどしてイベントを発生させると、Javascript が XMLHttpRequest オブジェクト を使用して、サーバーにリクエストを送信します。

サーバーが応答した後 (おそらく出力)、別の Javascript 関数/イベントが、他の HTML の部分のように単純にページに貼り付けることも含めて、その出力を扱う場所を提供します。

これは、プレーンなJavascriptで手作業で行うこともできますし、jQueryを使用することもできます。プロジェクトの規模や特定の状況によっては、プレーンな Javascript を使用する方がより簡単かもしれません。

プレーンなJavascript

この非常に基本的な例では、リクエストを myAjax.php にリクエストを送ります。サーバーは何らかのコンテンツ、この場合は "hello world!" を生成します。私たちは HTML 要素に 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!';
?>

試しに使ってみてください。 http://jsfiddle.net/GRMule/m8CTk/

javascriptライブラリ(jQuery等)を使用する場合。

議論の余地なく、これは大量のJavascriptコードです。もちろん、ブロックをきつくしたり、より簡潔な論理演算子を使用したりすることで短縮することはできますが、それでもまだ多くのことが行われています。プロジェクトでこの種のことをたくさんするつもりなら、Javascriptライブラリを使用したほうがよいかもしれません。

上記と同じ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ライブラリファイルの内部には、最初の例と同様のコードに加えて より多くの . それは良いことかもしれませんし、そうでないかもしれません。計画を立て、プロジェクトの現在の規模と将来の拡張の可能性、およびターゲットとなる環境またはプラットフォームを考慮してください。

これだけなら、プレーンなjavascriptを一度書けば終わりです。

ドキュメンテーション

• AJAX MDN で - https://developer.mozilla.org/en/ajax
• XMLHttpRequest MDN で - https://developer.mozilla.org/en/XMLHttpRequest
• XMLHttpRequest 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/