how to get data from the given json file - javascript

[This][1] is the link of my json file and i want to access its data into my ajax success function. tell me how can i do this?
$.ajax({
type: "GET",
url: "abc" + imageId,
dataType: "json",
success: function (d) {
alert(imageId);
var storyImage = d.data;
alert(storyImage);
}
})

Problem is that the object response is:
{
"http://www.livemint.com/template/features/webapps/encodeImage?loid=2.1.1521199245": {
"data":"data:image/jpg;base64,/9j/4AAQSk..."}
}
So you can't say d.data you will have to do d["http://www.livemint.com/template/..."]
But you can do something like this:
var imageId = "2.1.1521199245"
var url = "http://www.livemint.com/template/features/webapps/encodeImage?loid=" + imageId;
$.ajax({
type: "GET",
url: url,
dataType: "json",
success: function (d) {
alert(imageId);
var storyImage = d[url].data;
alert(storyImage);
}
})
Here is a working fiddle: http://jsfiddle.net/cA396/

You need parse JSON into Object
http://www.json.org/js.html
If you do a crossdomain request $.ajax will be not work. See
jQuery AJAX cross domain

Related

Call JSON inside AJAX success

I want to call a json data inside my AJAX success. I'm still new on manipulating json and AJAX. Can somebody help me on how to access my json data which is from another URL? And I want to compare the id to the JSON data. Here's my code so far:
function getCard(id){
$.ajax({
type: "GET",
data: "id=" + id,
success: function(data){
#call JSON data here from another URL
# Is it possible to call another AJAX here?
}
});
}
This code will work for you
$.ajax({
url: "url",
method: "post",
data: "id=" + id,
success:function(data) {
// success goes here
$.ajax({
url: "url",
async:false,
method: "post",
data: "id=" + id,
success:function(json) {
JSON.parse(json);
// compare data and json here
},
error: function(){
// error code goes here
}
});
},
error: function(){
// error code goes here
}
});
yes Zuma you can call another Ajax inside Success function of Ajax call. Below is the example:
$.ajax({
type: "post",
url: url1,
data: data1,
success: function(data){
$.ajax({
type: "post",
url: url2,
data: data2,
success: function(data){
});
});
});
function getCard(id){
$.ajax({
type: "Get",
url: "发送请求的地址",
data: "id=" + id,
success: function(data){
#call JSON data here from another URL
# if success,you can call another AJAX.
# Is it possible to call another AJAX here?
# yes!
}
});
}

How to call json object from AJAX?

Here is my script:
$.ajax({
type: "Get",
url: "Sample.js",
datatype: 'json',
data: JSON.stringify({ key:key }),
success: function (data) {
var sample = data.name;
$("#html").html(sample);
},
error: function () {
alert("Error");
}
});
This is my Sample.js file:
{ "name": "user" }
When I run this code I get a blank screen. This is my script using getJSON():
$.getJSON("Sample.js", function (data) {
var sample = data.name;
$("#html").html(sample);
})
This produces "user" perfectly. What is the problem with $.ajax code?
In the getJSON version your don't send any data. Could this be the reason why that works? To me it looks like this could be sth. on the server side that delivers an empty JSON object when you pass the key parameter.
As the jQuery documentation states:
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
Try modifying the dataType param.
change your datatype to dataType. Its case sensitive. Refer http://api.jquery.com/jQuery.getJSON/
Remove JSON.Stringify and change Get to GET
$.ajax(
{ type: "GET",
url: "Sample.js",
dataType: "json",
data: {key:key },
success: function (data)
{ var sample = data.name; $("#html").html(sample); },
error: function () { alert("Error"); }}
);

Jquery set HTML via ajax

I have the following span:
<span class='username'> </span>
to populate this i have to get a value from PHP therefor i use Ajax:
$('.username').html(getUsername());
function getUsername(){
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
document.write(data);
}
})
}
Now when i debug i see that the returned data (data) is the correct value but the html between the span tags stay the same.
What am i doing wrong?
Little update
I have tried the following:
function getUsername(){
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
$('.username').html('RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRr');
}
})
}
getUsername();
Still there is no html between the tags (no text) but when i look at the console the method is completed and has been executed.
Answer to the little update
The error was in my Ajax function i forgot to print the actual response! Thank you for all of your answers, for those of you who are searching for this question here is my Ajax function:
public function ajax_getUsername(){
if ($this->RequestHandler->isAjax())
{
$this->autoLayout = false;
$this->autoRender = false;
$this->layout = 'ajax';
}
print json_encode($this->currentClient['username']);
}
Do note that i am using CakePHP which is why there are some buildin methods. All in all just remember print json_encode($this->currentClient['username']);
The logic flow of your code is not quite correct. An asynchronous function cannot return anything as execution will have moved to the next statement by the time the response is received. Instead, all processing required on the response must be done in the success handler. Try this:
function getUsername() {
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: { },
success: function(data){
$('.username').html(data); // update the HTML here
}
})
}
getUsername();
Replace with this
success: function(data){
$('.username').text(data);
}
In success method you should use something like this:
$(".username").text(data);
You should set the html in callback
function getUsername() {
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
$('.username').html(data);
}
})
}
Add a return statement for the function getUsername
var result = "";
$('.username').html(getUsername());
function getUsername(){
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
document.write(data);
result = data;
}
})
return result;
}
You can use .load()
Api docs: http://api.jquery.com/load/
In your case:
$('.username').load(myBaseUrl + 'Profiles/ajax_getUsername',
{param1: value1, param2: value2});

POST a JSON data on a Server URL using Javascript

I have prepared a JSON data and I need to post it on the server so that a service can be called. URL to the server is available and I am making an AJAX call for the same to
POST the data.
But I dont know where to place the JSON string that is generated.
My Code is as Follows:
function postJSONData(JSONData, localMode)
{
var localJSONData = JSONData;
var postMode = localMode;
$.ajax({
type: 'POST',
url: 'https://tt.s2.com/tmobile/subscribe-service/uid=ankit_bharat_tanna',
dataType: 'xml',
success: function(data){
alert("SECOND POST JSON DATA");
} // Success Function
}); // AJAX Call
alert("POST JSON ------------> "+localJSONData +" "+postMode);
}
I want to post JSON data to the server URL. any Parameters to be used?
Thanks,
Ankit.
You should pass the values with data parameter $.ajax() jquery doc link
function postJSONData(JSONData, localMode)
{
var localJSONData = JSONData;
var postMode = localMode;
$.ajax({
type: 'POST',
url: 'https://tt.s2.com/tmobile/subscribe-service/uid=ankit_bharat_tanna',
contentType:"application/json; charset=utf-8",
dataType:"json"
data: JSONData
success: function(data){
alert("SECOND POST JSON DATA");
} // Success Function
}); // AJAX Call
alert("POST JSON ------------> "+localJSONData +" "+postMode);
}
You are missing the data parameter. Moreover you need to send json data so dataType parameter should be set to json. Below is an Example
function postJSONData(JSONData, localMode)
{
var localJSONData = JSONData;
var postMode = localMode;
$.ajax({
data: localJSONData,
type: 'POST',
url: 'https://tt.s2.com/tmobile/subscribe-service/uid=ankit_bharat_tanna',
dataType: 'json',
success: function(data){
alert("SECOND POST JSON DATA");
} // Success Function
}); // AJAX Call
alert("POST JSON ------------> "+localJSONData +" "+postMode);
}

Can I send the value of html like this $("#id").html() to code behind?

I have already tried it via ajax but it doesn't work so Help me please !!!!!!
And i tried it into cookie but in code behind didnt see it
var datah = $(“#currid”).html()
var data = {
id: currid,
html: datah
};
$.ajax({
type: "POST",
url: url,
data: data,
success: function(msg){
alert( "return back" );
}
});
Try this
You must encode the html content before transmitting . You can use escape in java script for this.And you can decode back it from server
var encodedData= escape($(“#id”).html()) ;
var postData = { htmlData:encodedData};
$.ajax({
type: "POST",
url: url,
data: postData,
success: function(msg){
// do your operation
}
});

Categories