jQuery Ajax POST to GET JSON and return value
Question
Ok so I have a php file that when a postcode has been posted to it it then sends a get request to retrieve some JSON data.
The JSON outputs like this:
[{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":"1","HouseNumber":"48","Postcode":"G21BP"},{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":"3","HouseNumber":"48","Postcode":"G21BP"},{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":"2","HouseNumber":"48","Postcode":"G21BP"},{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":null,"HouseNumber":"46","Postcode":"G21BP"}]
And I'm using print_r($result); on the php page to display the result
EDIT
The HTML of my output looks like so:
<html>
<head></head>
<body>
<pre>[{"AddressLine1":"Garelochhead","AddressLine2":null,"City":"Helensburgh","County":"Argyll And Bute","HouseName":null,"HouseNumber":"","Postcode":"G840EG"},{"AddressLine1":"Garelochhead","AddressLine2":null,"City":"Helensburgh","County":"Argyll And Bute","HouseName":"1","HouseNumber":"Flat 0","Postcode":"G840EG"},{"AddressLine1":"Garelochhead","AddressLine2":null,"City":"Helensburgh","County":"Argyll And Bute","HouseName":"1","HouseNumber":"Flat 1","Postcode":"G840EG"}]
</body>
</html>
My JS looks like bellow currently:
$('.btnFind').click(function() { var dataString; $.ajax({ url:baseUrl+'/postcode.php', type: 'post', datatype: "JSON", data: dataString, success: function() { //test } }).error (function() { alert('error with finding your address'); }).complete (function(data) { console.log(data); //var AddressLine1 = data[0].AddressLine1, // AddressLine2 = data[0].AddressLine2, // City = data[0].City, //County = data[0].County, // HouseName = data[0].HouseName, // HouseNumber = data[0].HouseNumber; alert(data[0].AddressLine1); }); });
but I keep getting the following error:
Uncaught TypeError: Cannot read property 'AddressLine1' of undefined
My guess is print_r isn't suitable but to be honest its been a while since I used JSON so I'm not up to scratch on it to be fair.
Also its printing on aa balnk html page if that makes any difference too.
Console Log as requested
Object
abort
:
(a)
always
:
()
complete
:
()
done
:
()
error
:
()
fail
:
()
getAllResponseHeaders
:
()
getResponseHeader
:
(a)
overrideMimeType
:
(a)
pipe
:
()
progress
:
()
promise
:
(a)
readyState
:
4
responseText
:
""
setRequestHeader
:
(a,b)
state
:
()
status
:
200
statusCode
:
(a)
statusText
:
"OK"
success
:
()
then
:
()
__proto__
:
Object
4 answers
solution1
0 2017-03-20 11:50:07
To return from your PHP to your JavaScript with a JSON use this:
header('Content-Type: application/json');
echo json_encode($data);
Edit:
Also, make sure you give access to your PHP script, I use this:
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: X-Requested-With, content-type, access-control-allow-origin, access-control-allow-methods, access-control-allow-headers');
solution2
0 2017-03-20 11:51:38
Before referring to your object, it should be welcomed to the object. try this
data = JSON.parse(data);
alert(data[0].AddressLine1);
solution3
0 2017-03-20 11:55:11
var parsed = JSON.parse(data);
var AddressLine1 = parsed[0].AddressLine1;
solution4
0 ACCPTED 2017-03-20 13:58:50
Thanks to everyone who posted and commented.
I just realised what daft mistake I made. I never serialised the form first.
I had var dataString; when I should of had var dataString = $("form").serialize();
total idiot I have wasted 4 hours of my day on something so damn stupid.
Thanks again to everyone for looking.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.