的Ajax調用PDO功能在PHP類更新頁面

Question

我有一個文件列表和一個下拉框，我想用戶能夠通過各種類別等

我有一個過濾它們PHP類，它具有創建sql查詢並返回結果的功能。我非常想通過ajax來做到這一點，以防止刷新。

我被卡住了，希望得到一些幫助。

問題是我不知道下一步該怎麼做。這對我來說很新，但仍然很多外國人。如果ajax調用可以從select中運行onKeyUp，那麼更好。

感謝您的幫助：

的HTML：

<div> 
    <form action="" method="post" name="orderBy"> 
    <label for="orderBy" id="orderBy">Order By:</label> 
    <select> 
     <option class="orderByOption" value="newest">Newest First</option> 
     <option class="orderByOption" value="oldest">Oldest First</option> 
     <option class="orderByOption" value="cat">Category</option> 
     <option class="orderByOption" value="alpha">Aphabetical</option> 
     <option class="orderByOption" value="fileType">Filetype</option> 
    </select> 
    <label> &nbsp; </label> 
    <input type="submit" class="orderByTrainingButton" name="submit" value="Go!"/> 
    </form> 
</div> 

阿賈克斯：

//form for changing the ordering of items in training all docs 
$(function(){ 
    $(".orderByTrainingButton").click(function(){ 
     //validate and process 
     //get vlaue 
     var option = $(".orderByOption").val(); 


     var params = {option: option}; 

     $.ajax({ 

      type: "POST", 
      url: "../trainingOrderByAjax.php", 
      data: params, 
      dataType: 'json', 

      success: function(data){ 

       if(data.success == true){ 
        //aaaannnd. stuck/ 
       }else{ 
        // shouldn't ge there...I hope. 

       } 

      }, 
      error: function(error) { 
       console.log(error); 
      } 
     }); 
    }); 
}); 

的PHP的AJAX會調用：

<?php 

include_once('core/init.php'); 

if($_POST){ 
    $orderBy = $_POST['orderByOption']; 

    if($training->getAlFilesOrderBy($orderBy)){ 
    $data['success'] = true; 
    }else{ 
    $data['success'] = false; 
    } 
    echo json_encode($data); 
} 

啓動用desc或asc w命令應該很棒。我可以在此基礎上進行構建。

Answer 1

就是這樣。

PHP：

if($results = $training->getAlFilesOrderBy($orderBy)){ 
    $data['success'] = true; 
    $data['results'] = $results; 
}else{ 
    $data['success'] = false; 
} 
echo json_encode($data); 
} 

JS：

if(data.success){ 
     var results = data.results; 
     for (var i = 0; i < results.length; i++) { 
      // do something with results[i] 
     } 
    }else{ 
     // shouldn't ge there...I hope. 
    } 

更改您的AJAX錯誤處理程序：

error: function(xhr, status, errorMsg) { 
    console.log("AJAX error: " + errorMsg); 
}