Does Ajax work on Webhostapp?

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 ?

Good day!

Yes, 000webhost supports AJAX under methods GET and POST.

Please resend the request, press F12 and monitor both Console and Network Tab in order to diagnose the problem.

1 Like

Network tab indicates nothing and the console tell me that:

 SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
          onreadystatechange http://fraeng.000webhostapp.com/[...].php:146

I don’t see how to solve the problem.

Did you work this one out? @geekornolife