Опубликовать простую форму с 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 file:

$(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); 
      }, 
     }); 
    }); 
});