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.

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

eric.itzhak · Accepted Answer · 2013-02-25 15:22:06Z

3

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

edited Feb 25, 2013 at 15:22

answered Feb 25, 2013 at 14:37

eric.itzhak

16.2k28 gold badges96 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

loomie Over a year ago

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 Over a year ago

@TheoTzaferis Revised answer. if you don't use keys you can use indexes ya.

loomie Over a year ago

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 Over a year ago

@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 Over a year ago

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

|

Collectives™ on Stack Overflow

Retrieve data from JSON web service with Ajax

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related