Why does my AJAX call return <\/button> instead of </button>? - ajax

Question

my AJAX call is
function xml_getsitepage($idsite){
$.ajax({
url: 'public/xml/xml_getsitehtml.php',
dataType: 'JSON',
data: {
"id":$idsite
},
type: 'POST',
success: function (response) {
$("#nav").html(response.nav);
}
});
return;
}
The last few lines of 'public/xml/xml_getsitehtml.php' are
$arr['htmlnav']=$htmlnav;
$arr['htmlcontain']=$htmlcontain;
$arr['isOK']="Is OK";
}else{
$arr['htmlnav']='Failed1';
$arr['htmlcontain']='Failed1';
}
}else{
$arr['htmlnav']='Failed2';
$arr['htmlcontain']='Failed2';
}
echo json_encode($arr);
exit;
The firebug response tab shows all as "</button>"
where the JSON tab shows them correctly
I have search the web but cannot find anything to help me.
I cannot "see" the data in my browser and the #nav remains blank but if I manually place the html with the \ removed it displays OK.

Answer 1

By default, PHP's json_encode will escape / characters in strings.
This:
Does not change the data. "\/" and "/" are two different, but valid, and equal, JSON representations of a / character.
Lets you use the output as a JavaScript literal, inline in an HTML document, without </script> ending the script element in the middle of the string.
Whatever your problem is, it has nothing to do with the escaped slashes.
If it was, then your generated HTML would have some invalid end tags in it, which would be ignored or treated as text. So you would get more text content in your button then you intended.
Your problem is this mismatch:
$arr['htmlnav']=$htmlnav;
response.nav
You are writing to htmlnav but trying to read from nav.

Answer 2

Slashes are being escaped. Simply unescape the string once you receive it on the front-end.
Or if you're feeling lazy, you can disable the escaping function in the PHP script:
echo json_encode($arr, JSON_UNESCAPED_SLASHES);