用ajax和Json發佈簡單表單

Question

我正在嘗試使用Ajax和json工作，但似乎無法工作:( 如果有人能幫忙，我會非常感激！這麼多不同的教程，但在另一個文件中沒有得到它的權利。

• 在我的index.php我有一個表格只，它作爲一個按鈕圖像。

• 然後（allFunctions.php）我有一堂課，在那堂課裏我有一個叫做 giveCandy()的功能，它連接到按鈕。

• 然後我有一個js文件，現在我正在嘗試使用它。但是，當我點擊按鈕的頁面仍然刷新，我得到值true打印出來。

UPDATE：與頁面清爽不過問題......

index.php文件：

<form action="index.php" method="POST"> 
<input type="hidden" name="candy" /> 
<input type="image" id="button_candy" class="four columns" src="views/img/candy.png"/> 
</form> 

然後在我的函數文件：

function giveCandy() 
    { 
     if (isset($_POST['candy'])) 
     { 

     $db = Database::getInstance(); 
     $classUser = new user(); 
     $userId = $classUser->getUserData($_SESSION['id']); 
     $user = $userId['id']; 

     $candyPiece = 10; 

     $query = $db->prepare("SELECT fullness, lastfed FROM userdata WHERE id = ?"); 
     $query->bindValue(1, $user); 

     $query->execute(); 
     $data = $query->fetch(); 

     $newFullness = $candyPiece + $data['fullness']; 

     try 
      { 
     $query = $db->prepare("UPDATE userdata SET fullness = $newFullness, lastfed = CURRENT_TIMESTAMP WHERE id = ?"); 
     $query->bindValue(1, $user); 

     $query->execute(); 
     //$this->calculateFullness(); 
     echo json_encode($query); 
      } 
     catch (PDOException $e) 
      { 
       echo 'Sorry iti could not eat at this time';   
      } 
     } 
    } 

然後js文件：

$(document).ready(function() { 
    $('#button_candy').click(function (event) { 
     event.preventDefault(); 
     $.ajax({ 
      url: 'index.php', 
      method: 'POST', 
      data: $(this).serialize(), // your formdata (this refers to the form element) 
      dataType: 'json', 
      success: function (data) { // data is what your allFunctions.php php echos 
       $('#query').fadeOut(function() { 
        $('#query').html(data).fadeIn(); 
       }); 
       console.log('Ajax request returned successfully.'); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       console.log('Ajax request failed: ' + textStatus + ', ' + errorThrown); 
      }, 
     }); 
    }); 
}); 

Answer 1

allFunctions.php：

if ($_POST['candy']) { 
    allFunctions::giveCandy(); 
} 

class allFunctions { 

    static function giveCandy() 
    { 
     $db = Database::getInstance(); 
     // .... 

JS：

$(document).ready(function() { 
    $('#button_candy').submit(function (event) { 
     event.preventDefault(); 
     $.ajax({ 
      url: '../model/allFunctions.php', 
      method: 'POST', 
      data: $(this).serialize(), // your formdata (this refers to the form element) 
      dataType: 'json', 
      success: function (data) { // data is what your allFunctions.php php echos 
       $('#result').fadeOut(function() { 
        $('#result').html(data).fadeIn(); 
       }); 
       console.log('Ajax request returned successfully.'); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       console.log('Ajax request failed: ' + textStatus + ', ' + errorThrown); 
      }, 
     }); 
    }); 
});