Retrieve data from JSON web service with Ajax

Question

I have a web service which works fine, when I open it manually and type the parameters in manually. For example:

When I navigate to url.url/webservice.php?region=NY it gives me all the data I need from my database. Now I want to type in a city in an input field and let ajax do the rest.

<form>
<input type="text" value="NY" name="myText" id="input">
<input type="submit" value="Submit" name="mySubmit" id="submit" onClick="changeView()">
</form>

So now, when I type something in the input field Ajax should send an request to my webservice and get the data.

My web service looks like this:

<?php
header("Content-type: application/json"); 
$mysqli = new mysqli('localhost','root','','ttzaferis');
$array = array();
$region = $_GET['region'];
if($result = $mysqli->query("SELECT lon, lat FROM pointsofinterest WHERE region = '".$region."'")){
 $tempArray = array();
 while($row = $result->fetch_assoc()){
 $tempArray = $row;
 array_push($array, $tempArray); 
 }
 echo json_encode($array);
}
?>

I have now only problems on the Ajax-part. I can't understand how to make it work. I tried the following

function changeView(){
 var region = document.getElementById('input').value;
 alert(region);
 $j.ajax({
 type: 'GET',
 url: 'webservice.php',
 data: region,
 success: function(response, textStatus, XMLHttpRequest) { 
 alert("test");
 }
});
}

I don't understand what the problem is and how to solve it.

• eric.itzhak: You're submiting the form and the ajax never happens. change submit to button and it'll work.
• Broncha: Is the client page and REST server in same domain?
• loomie: @eric.itzhak - I did this <input type="button" onClick="changeView()" name="mySubmit"> and it doesn't change anything
• loomie: @Broncha - Everything is on the same server(local) and in the same dierctory. So there shouldn't be any problem with paths
• eric.itzhak: Does your console show anything? what's being sent in the network tab?

Answer 1

I usually send get data like this :

 $j.ajax({
 url: 'webservice.php?region='+region,
 success: function(response, textStatus, XMLHttpRequest) { 
 alert("test");
}
});

Which according to your comments should solve this. I don't know if it's possible sending via data, but if it is then you should do something like this :

 $j.ajax({
 url: 'webservice.php',
 dataType: "json",
 data: {region : region},
 success: function(response, textStatus, XMLHttpRequest) { 
 alert(response.somekey);
}
});

Or seirlizing it, But yet again, i'm not sure if it'll work. Note that i added dataType, though jQuery usually tries to find out what the dataType will be, won't hurt to add it

• loomie: I did the second one! That works. May I ask how I now get the data from the JSON-Request in my alert window? It should be something like var example = data[0].example; alert(example); right?
• eric.itzhak: @TheoTzaferis Revised answer. if you don't use keys you can use indexes ya.
• loomie: I'm sorry to tell you this but this is totally beyond my skill level and I have absolutely no idea what to do now. What I've done is googling a bit, and I found this part here: $.each(data, function(key, val) { alert(key); });; But, this doesn't alert me anything. I thought I can somehow get the data with data.fieldname, but when I type in data. dreamweaver just suggests me protype or region, what is not what I'm looking for.
• eric.itzhak: @TheoTzaferis each is in cases you wanna loop through the data, and ofcourse looping through data won't give you anything, since you called the result response so you should $.each(response, function(key,val)
• loomie: Seems about right, now when I click the ok button I get $.each(response, function(key, val) { alert(key+ " and " +val); });; 0 and [object Object] I'm sorry, I would like to upvote you, but my reputation is not high enough yet. You are a really big help