I have a Ajax script who works on localhost but not on Webhostapp. When I click on a button, it’s supposed to show me a text but nothing append. This line is the problem.
var data = JSON.parse(this.responseText);
This is the message of the browser:
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
This is the ajax script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
//call ajax
$('#mot-deu').keypress(function(e){
var deu = $('#mot-deu').val();
var reponse = document.getElementById('tchiki').innerHTML;
if(e.which == 13){
if($('#mot-deu').val()==""){
Response.Charset="utf8";
var dataType = 'json';
var contentType = "text/json;charset=utf8";
var ajax = new XMLHttpRequest();
var method = "GET";
var url = "data.php";
var asynchronous = true;
ajax.open(method, url, asynchronous);
ajax.send();
//receiving response from data.php
ajax.onreadystatechange = function(){
if (this.readyState == 4 && this.status ==200)
{
//converting JSON back to array
var dataType = 'json';
var data = JSON.parse(this.responseText);
console.log(data);//for debbuging
// html value for <tbody>
var html = "";
var html2 = "";
//looping through the date
for (var a = 0; a < data.length; a++)
{
var fra = data[a].fra;
html += fra;
}
for (var b = 0; b < data.length; b++)
{
var deu = data[b].deu;
html2 += deu;
}
document.getElementById("mot-fra").innerHTML =html;
document.getElementById("tchiki").innerHTML =html2;
}}
document.getElementById("correction").innerHTML ="";
//alert("null");
}else{
if (deu==reponse) {//Enter key pressed
document.getElementById("correction").innerHTML = "Yes";
//return true;
} else {
document.getElementById("correction").innerHTML = "No" + reponse;
//return false;
}
$('#mot-deu').val('');
}
}
});
$('input#fra-submit').on('click',function(){
document.getElementById("correction").innerHTML ="";
var ajax = new XMLHttpRequest();
var method = "GET";
var url = "data.php";
var asynchronous = true;
ajax.open(method, url, asynchronous);
ajax.send();
ajax.onreadystatechange = function(){
if (this.readyState == 4 && this.status ==200)
{
//converting JSON back to array
var data = JSON.parse(this.responseText);
console.log(data);//for debbuging
// html value for <tbody>
var html = "";
var html2 = "";
//looping through the date
for (var a = 0; a < data.length; a++)
{
var fra = data[a].fra;
html += fra;
}
for (var b = 0; b < data.length; b++)
{
var deu = data[b].deu;
html2 += deu;
}
//replacing the <tbody> of <table>
document.getElementById("mot-fra").innerHTML =html;
document.getElementById("tchiki").innerHTML =html2;
}}
});
$('input#deu-submit').on('click',function(){
var deu = $('#mot-deu').val();
var reponse2 = $('#tchiki').val();
var reponse = document.getElementById('tchiki').innerHTML;
if (deu==reponse) {
document.getElementById("correction").innerHTML = "yes it's true";
return true;
} else {
document.getElementById("correction").innerHTML = reponse;
return false;
}
if(reponse2=deu){
alert(reponse2);
return true;
}else{
alert(deu);
return false;
}
});
Does anyone have a solution ?