JSON is not loading from server - javascript

I have a JSON file which i want to load end it is working fine when I am trying to load that file locally from my hard drive.
function save(){
$.ajax({
type: "GET",
url: 'cameras.json',
dataType: "JSON",
async : false,
success: function(data) {
var output = data.result["0"].Address;
alert(output);
},
error: function(data) {
alert("Error")
}
});
}
When i want to get access to this JSON file from my server:
function save(){
$.ajax({
type: "GET",
url: 'http://192.168.0.21:8080/json.html?type=cameras',
dataType: "JSON",
async : false,
success: function(data) {
var output = data.result["0"].Address;
alert(output);
},
error: function(data) {
alert("Error")
}
});
}
It's not working and I am getting error script.
What can be issue with that ?

I had the same problem.
Unfortunately, I think that remote (i.e. away from localhost) ajax calls are forbidden - or something similar - for security reasons.
Depending on your purposes, you can resolve the problem with a 2-steps action:
You can call - via ajax - a local server class which loads the remote file via REST web service.I solved this way...

Related

How to return data from PHP to a ajax function

Hi I am currently learning php and I am trying to get data from php file using the below script but i am not getting any response
$.ajax({
type: 'POST',
url: "mark_mod.php",
data: data_set,
dataType: "JSON",
success: function(data) {
alert("Response : " ); // not triggering
}
});
my php return stmt
There might be problems with File URL or file access. You can use complete callback to check request for errors like that:
$.ajax({
type: 'POST',
url: "mark_mod.php",
data: data_set,
dataType: "JSON",
success: function(data) {
alert("Response : " );
},
// This method will be fired when request completes
complete: function(xxhr, status) {
alert("Status code: " + status);
}
});
If the status code is not success that means there is something wrong with your request.
You can check more callback options here.
It doesn't matter whether you use return or echo in your PHP file.
The success method must get a call if it's fine. However, if you use
return instead of echo, nothing will append to your request's data.
On the other hand, The PHP response will include in your 'data' variable in the function success.
You need use data in the assync function success
success: function(data) {
alert("Response : " + data);
},
Thanks for your Responses. I got the Solution to my problem. It seems since Ajax is asynchronous... its taking time to receive the resultant echo value from my php file. so I had to synchronize my Jquery using async : False.
$(function(){
$('#formID').on('submit',function(){
const data_set={
name:"Nipu chakraborty",
"phone":"01783837xxx"
}
$.ajax({
type: 'POST',
url: "mark_mod.php",
data: data_set,
dataType: "JSON",
success: function(data) {
alert(data);
}
});
});
});

javascript getting failed after the ajax request is failing

I am trying to fetch data from local network IP. It works fine if I am in the local network. It fails when accessed from outside, which is understandable. But the jquery error block is not getting executed, it just breaks the code and the page is stuck forever. Here is the code:
var url = "http://10.0.0.1:8080/status";
$.ajax({
url: url,
dataType:"jsonp",
crossDomain: true,
data : {},
success: function(response){
var clientState = response.clientState;
$(".clientstate-input").val(clientState);
document.loginform.submit();
},
error: function(response){
console.error(response);
$(".clientstate-input").val("0");
document.loginform.submit();
}
});
Error:
Try converting it to use a Promise:
var url = "http://10.0.0.1:8080/status";
$.ajax({
url: url,
dataType:"jsonp",
crossDomain: true,
data : {}
})
.then(response => {
var clientState = response.clientState;
$(".clientstate-input").val(clientState);
document.loginform.submit();
})
.catch(response => {
console.error(response);
$(".clientstate-input").val("0");
document.loginform.submit();
});
The issue was because of using older version of jQuery. Updated the library and everything was working fine.

How to send & retrieve JSON Array to different JSP page using URL in Java Script

This is my code in A.jsp
$.ajax({
method: "GET",
url: "getMilestone",
data: {"projectId" : projectId},
traditional: true,
success:
function(jsonArry){
alert(jsonArry);
window.location.href = "<%=request.getContextPath()%>/B.jsp?jsonArry="+jsonArry;
},
error:
function(){
alert("fail");
}
});
It gives below alert
The fact I want want to know is How can I retrieve this JSON array in B.jsp?

How to add local json file in jsfiddle?

How can I add a JSON file in jsfiddle? I have a JSON file but I am not able to attach it in jsfiddle. I can make a JSON object and use it, but is there any way to add an external JSON file to a fiddle?
Myjson.com provides api, which runs in Jsfiddle.net.
Custom my myjson:
// Loading JSON with CROS
var url = 'https://api.myjson.com/bins/3ko1q';
$.ajax({
type: 'GET',
url: url,
async: false,
contentType: "application/json",
dataType: 'json',
success: function (data) {
alert('success');
console.log(data);
},
error: function (e) {
alert('error');
console.log(e);
}
});
Myjson GET Example:
// 1. Create valid uri via POST
// 2. GET using newly created uri
var obj = {
"key": "value",
"key2": "value2"
};
var data = JSON.stringify(obj);
$("#clickMe").click(function () {
$.ajax({
url: "https://api.myjson.com/bins",
type: "POST",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, textStatus, jqXHR) {
// load created json
$.get(data.uri, function (data, textStatus, jqXHR) {
var json = JSON.stringify(data);
$("#data").val(json);
});
}
});
});
You can harness the power of Cross-Origin Resource Sharing (CORS) to achieve your task.
Basically how CORS works is that if the Access-Control-Allow-Orign header is set in the HTTP response, then the content loaded by AJAX can be used in our script regardless of the fact it is on the same domain or some other.
Now for your purpose, you can upload your local JSON file to Dropbox's Public folder and get a Public URL, that you can load by a simple AJAX call.
The AJAX call will succeed in this case because Dropbox sets the following value in the response Access-Control-Allow-Orign:* which means any domain can use the loaded content.
Jquery code will be something like this(you can even use pure JavaScript if you prefer ).
var url = 'https://dl.dropboxusercontent.com/u/94145612/example.json';
var myJsonData= {};
$.ajax({
type: 'GET',
url: url,
async: false,
contentType: "application/json",
dataType: 'json',
success: function (data) {
alert('success');
console.log(data);
myJsonData= data;
},
error: function (e) {
alert('error');
console.log(e);
}
});
Example JSFiddle
Based on your comment, you want to use a pure JSON file as an external resource in a jsFiddle. You can't do this, because pure JSON is not JavaScript. Say you try to include http://example.com/foo.json as an external resource, and that file contains the following:
{"foo":"bar"}
This will result in Uncaught SyntaxError: Unexpected token :, because the JSON object is not valid JavaScript by itself.
But if you assign the JSON object to a variable, like so:
var foo = {"foo":"bar"};
then no problem.
Solution: use a modified version of your file to initialize a variable for use in the jsFiddle.

I can't get my JSON request to work

I have created a url that I need to pass to police data API.
var api_url="http://policeapi2.rkh.co.uk/api/locate-neighbourhood?q="+latlon;
document.write(api_url);
The URL works when you manually input it into a browser, but I need some JavaScript that sends the API request and spits it onto the page. My JavaScript is ok but I have no knowledge of jQuery.
Thank you in advance, please keep it simple brainy folk.
try the following.. its is working
JS Fiddle http://jsfiddle.net/9AZyZ/
function abc(latLong){
$.ajax({
url: 'http://query.yahooapis.com/v1/public/yql',
data: {
q: "select * from json where url ='http://policeapi2.rkh.co.uk/api/locate-neighbourhood?q="+latLong+"'",
format: "json"
},
dataType: "jsonp",
success: function (data) {
alert(JSON.stringify(data));
},
error: function (result) {
alert("Sorry no data found.");
}
});
}

Categories

Resources