調用PHP類方法並使用jQuery和AJAX獲取返回值

Question

我正在爲自己創建一個小項目。我不是一個非常有經驗的程序員，所以我開始用PHP創建項目。很快，很明顯，通過HTML按鈕點擊運行PHP函數和類方法並不是最直接的任務。

我有一些測試代碼設置。首先，我創建了一個HTML表單，從中我想讀取用戶輸入值：

<form name="form" action="" method="POST"> 
    Title: <br> <input type="text" id="title"> <br> 
    Description: <br> <input type="text" id="description"> <br> 
    Priority: <br> <input type="number" id="priority"> <br> <br> 
    <input type="button" id="ajaxTest" value="Send> 
</form> 

現在，被點擊id爲#ajaxTest按鈕時，我想調用的類方法在PHP-我創建的文件。爲此，我用Google搜索周圍，並結束了與下面的jQuery：

<script type="text/javascript"> 
    $("#ajaxTest").click(function() { 

     $t = $("#title").val(); 

     $.ajax({ 
      type: "POST", 
      url: "http://www.example.com/task.php", 
      data: "t="+t 
     }).done(function(results) { 
      $("#results").html(results).hide().fadeIn(); 
     }) 
    }); 

</script> 

還擁有在HTML ID #results一個div元素，以顯示結果數據。現在

，該task.php被稱爲貌似如下（簡化了可讀性）：

<?php 
class Task { 
    private $title; 
    private $description; 

    function SetTitle($t) { 
     $this->title = $t; 
    } 

    function GetTitle() { 
     return $this->title; 
    } 

    function SetDescription($d) { 
     $this->description = $d; 
    } 

    function GetDescription() { 
     return $this->description; 
    } 
} 

我怎麼會去通過jQuery/AJAX調用這個類的不同成員函數和得到他們的回報輸入到DOM的值？我認爲我必須創建一個像TaskHandler這樣的中間類來啓動對象等，但是我完全失敗了。幾乎整整一天，但我沒有找到一個能讓我找到工作解決方案的答案。非常感謝您的幫助！

編輯：我現在已經編輯了jQuery和它看起來如下：

<script type="text/javascript"> 

    $("#ajaxTest").click(function() { 

     var t = $("#title").val(); 

     $.ajax({ 
      type: "POST", 
      url: "http://www.example.com/taskHandler.php", 
      data: {"t": t}, 
      success: function(response) { 
       $("#results").html(response); 
      } 
     }); 
    }); 

</script> 

和taskHandler.php低於

<?php 
    require_once("task.php"); 

    $t = new Task(); 
    $t->SetTitle($_POST['t']); 

    $output = $t->GetTitle(); 
    echo $output; 

還沒有得到任何東西展現出來，雖然。我在這裏做錯了什麼？

Answer 1

經過以下幾個步驟：
如果你希望調用只有一個每個請求後端方法，然後再考慮只允許輸入這些字段之一：'title'或'description'。
*** JS部分：

<script type="text/javascript"> 
    $("#ajaxTest").click(function(e) { 
     e.preventDefaut(); 
     var title, desc, type; 
     if (title = $("#title").val().trim()){ 
      type = 'title'; 
     } else if (desc = $("#description").val().trim()){ 
      type = 'description'; 
     } 

     $.ajax({ 
      type: "POST", 
      url: "http://www.example.com/task.php", 
      data: {'action': type, 'value': title || desc} // 'value' is for setting certain property, to return an existing property send only 'action' param 
     }).done(function(results) { 
      $("#results").html(results).hide().fadeIn(); 
     }) 
    }); 
</script> 

PHP的一部分： task.php

<?php 
class Task { 
    private $title; 
    private $description; 

    function SetTitle($t) { 
     $this->title = $t; 
    } 

    function GetTitle() { 
     return $this->title; 
    } 

    function SetDescription($d) { 
     $this->description = $d; 
    } 

    function GetDescription() { 
     return $this->description; 
    } 
} 

if (isset($_POST['action']) && !empty($_POST['action'])){ 
    $action = $_POST['action']; 
    $value = (isset($_POST['value']) && !empty($_POST['value']))? $_POST['value'] : null; 
    $task = new Task(); 
    $method = (($value)? 'Set' : 'Get') . ucfirst($action); 
    if method_exists($task, $method){ // BTW - method name should start with a lowercase letter 
     $result = ($value)? $task->$method($value) : $task->$method(); 
     echo ($result)? $result : ""; 
     return; 
    } 
} 

Answer 2

由於在這個問題上只有一件事長註釋名單這可能是弄亂了AJAX通話：

<form name="form" action="" method="POST"> 
    Title: <br> <input type="text" id="title"> <br> 
    Description: <br> <input type="text" id="description"> <br> 
    Priority: <br> <input type="number" id="priority"> <br> <br> 
    <input type="submit" id="ajaxTest" value="Submit"> 
</form> 

提交按鈕通常提交整個表單。由於提供了一個空行爲參數，所以後動作會轉到當前頁面。這將立即重新加載，並中斷可能發出但未完全發送的AJAX請求。

變化：

<form name="form" action="" method="POST"> 
    Title: <br> <input type="text" id="title"> <br> 
    Description: <br> <input type="text" id="description"> <br> 
    Priority: <br> <input type="number" id="priority"> <br> <br> 
    <input type="button" id="ajaxTest" value="Send"> 
</form> 

Answer 3

您有重複的getTitle方法：

class Task { 
    private $title; 
    private $description; 

    function SetTitle($t) { 
     $this->title = $t; 
    } 

    function GetTitle() { 
     return $this->title; 
    } 

    function SetDescription($d) { 
     $this->description = $d; 
    } 

    function GetTitle() { 
     return $this->description; 
    } 
} 

我建議你測試php文件作爲單獨的文件，是這樣的：

$text = "test"; 

class Task { 
    private $title; 
    private $description; 

    function SetTitle($t) { 
     $this->title = $t; 
    } 

    function GetTitle() { 
     return $this->title; 
    } 

    function SetDescription($d) { 
     $this->description = $d; 
    } 

    function GetDescription() { 
     return $this->description; 
    } 
} 

$t = new Task(); 
$t->SetTitle($text); 

$output = $t->GetTitle(); 
echo $output; 

所以你會知道如果PHP文件沒有錯誤。 同樣在html/javascript中放一個console.log(inputValue)來看看你發送了什麼。

如果一切工作，你做的AJAX請求，其網絡瀏覽器視爲跨域因爲格式的$t->SetTitle($_POST['title']);

Answer 4

的最後一個問題撒謊。其實它在同一個領域工作。

url: "http://www.example.com/taskHandler.php", 

只要我改變只是

url: "taskHandler.php" 

它開始工作。

謝謝大家的意見！我在這裏學到了很多，試圖解決這個問題。