jQuery variable to php not working - php

Question

I need pass jQuery variable to PHP variable, so I made simple code to test and it doesn't work.
It's only a testing files. Finally, I have to do something more advanced but i can't make it works!
I have 3 files
In character.html I have:
SAVE
and in character.js (it's external javascript for character.html)
$(document).ready(function() {
$('.saved').click( function () {
var avatarID = 123;
$ajax({
url :'character-save.php',
data:{"avatarID":avatarID},
type: 'post',
dataType: 'json',
});
});
});
in character-save.php i try this:
<?php
header('Content-type: application/json');
$result = $_POST['avatarID'];
$result = htmlentities($result, UTF-8);
echo json_encode($result);
exit();
?>
And it doesn't print 123

Answer 1

In your php file, you have a mistaks with UTF-8, it should be included with parentheses.
<?php
header('Content-type: application/json');
$result = $_POST['avatarID'];
$result = htmlentities($result, 'UTF-8'); // It should be 'UTF-8'
echo json_encode($result);
exit();
?>

Answer 2

Your syntax is wrong its not $ajax its $.ajax don't forget the . dot.
Also you need some way of checking response so either update your html by adding ajax callback and necessary jquery, use alert or log reponse to console. Something like this should give you a good indication.
$.ajax({
url :'character-save.php',
data:{"avatarID":avatarID},
type: 'post',
dataType: 'json'
}).done(function(response) {
alert(response.data);
});
In your PHP change $result = htmlentities($result, UTF-8); to $result = htmlentities($result); also validate your json by putting result in an array then encode that array as json and echo it like this:
<?php
header('Content-type: application/json');
$result = $_POST['avatarID'];
$result = htmlentities($result);
$return["data"] = $result;
echo json_encode($return);
exit();
?>

Answer 3

In your javascript you have to add e.preventDefault(); to prevent the page redirecting to character-save.php
And inside the click function add e
see the updated javascript section below
$(document).ready(function() {
$('.saved').click( function (e) {
e.preventDefault();
var avatarID = 123;
$.ajax({
url :'character-save.php',
data:{"avatarID":avatarID},
type: 'post',
dataType: 'json',
success: function(msg){
alert(msg);
}
});
});
});

Answer 4

Try this,
$(document).ready(function() {
$('.saved').click( function () {
var avatarID = 123;
$ajax({
type:"POST",
url: 'character-save.php&avatarID='+avatarID ,
success:function(response){
alert(response);
});
});
});
In character-save.php try this:
<?php echo $_GET['avatarID'];
?>