I need to post data and display it also. I am using ajax post method. I am able to get the event Id where data is saved, but not able to display the data. I searched a lot and got some answer also. I tried it in my code, but didn't got the result. My code is:
<!DOCTYPE html>
<html>
<head>
<title>POST API</title>
<script type="text/javascript" src="http://ajax.googleapis.com /ajax/libs /jquery/1.2.6/jquery.js"></script>
</head>
<body>
<button id="btn1">Check HTTP POST</button>
<p>Display sample output from POST API:</p>
<p id="one" />wEventId :
<p id="two" />
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$.ajax({
url: 'url',
dataType: 'json',
type: 'POST',
crossDomain: true,
contentType: 'application/json',
data: {},
success: function(data) {
console.log(data);
document.getElementById("two").innerHTML = data.result.wEventId;
},
failure: function(errMsg) {
console.log(errMsg);
}
var myData = data;
myData = new Array;
});
});
});
</script>
</body>
</html>
Anyone please help me how to modify the code to print the data saved. I have not given the url as it is an internal server and supposed not to disclose it. Thanks in advance.
First I need to know, what is the structure of your json data.
Assuming that it is in a format like given below:
{"field_A":"value_a","field_b":"value_b"}
your code where you are trying to print as innerHTML should be like this:
success: function(data)
{
console.log(data);
document.getElementById("two").innerHTML = data.field_A;
},
Try to adjust accordingly.
I am still surprised from where are you getting the result of data.result.wEventId
Related
If this is a re-post of an already existing. I looked a bunch of different issue already posted about this but didn't feel any matched my issue. If there is one please link it.
I'm trying to learn AJAX and have a form that takes two inputs a serverName, and a isLive. As well as a button to add a server to the list. I already made a json file that has two servers in it and when I GET info from it to update the list it lists the server's serverName and isLive fine. When I go to POST information all I get back when the list is updated is undefined.
Using console logs I know that the information is being passed from the form to Object to be sent by AJAX and that it seems to trigger the success function, but when I look there is nothing added to the Json and it says the fields are undefined.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
</head>
<body>
<h1>Server List</h1>
<ul id="servers">
</ul>
<h4>Add a Server</h4>
<p>Server Name: <input type="text" id="serverName"></p>
<p>Offline or Online: <input type="text" id="isLive"></p>
<button id="add-server">Add!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
$(function() {
var $servers = $('#servers');
var $serverName = $('#serverName');
var $isLive = $('#isLive');
$.ajax({
type : 'GET',
url: 'servers.json',
success: function(servers) {
$.each(servers, function(i, server) {
$servers.append('<li>Server: '+ server.serverName +', Status: '+server.isLive+'<li>');
});
},
error: function() {
alert('Error loading server status!');
}
});
$('#add-server').on('click', function() {
var server = {
serverName: $serverName.val(),
isLive: $isLive.val(),
};
console.log(server);
$.ajax({
type: 'POST',
url: 'servers.json',
data: server,
success: function(newServer) {
$servers.append('<li>Server: '+ newServer.serverName +', Status: '+newServer.isLive+'<li>');
},
error: function(){
alert('error saving server');
}
});
});
});
servers.json
[{"serverName":"vanilla","isLive":"offline"}, {"serverName":"SkyFactory","isLive":"Online"}]
You can't modify a file in the server with JavaScript. Check this may help:
Use JQuery to Modify external JS File
I am learning how to load json data into .js file. I have created a employee.json file. I saved my js and json file and on the desktop. What I trying to do is to put all the id in json files into an array in the js. I do not know what could be wrong. Hope someone could help me out. Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON with jQuery</title>
</head>
<body>
<p id="demo"></p>
<h1><h2>
<script src = "<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var res = [];
$.ajax({
url: 'employee.json',
dataType: 'json',
type: 'get',
cache: false,
success: function(data) {
$(data.people).each(function(index, value) {
res.push(value.id);
});
}
});
document.getElementById("demo").innerHTML = res.toString();
</script>
</body>
</html>
{
"person": [
{
"id" : 1,
"firstName" : "Lokesh"
},
{
"id" : 2,
"firstName" : "bryant"
}
{
"id" : 3,
"firstName" : "kobe"
}
]
}
Error 1: Typing error. <script src = "<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>. You mistyped the src of the script, accidentally adding another another <script> start tag.
Error 2: Misplaced statement. document.getElementById("demo").innerHTML = res.toString(); should be placed in the success callback function, so it will be executed only after the server responds. If it executes prematurely, res will still be [].
Error 3: type: 'GET' should be method: 'GET', according to the docs (though 'GET' is default so you don't need to explicitly write this).
Use this:
<p id="demo"></p>
<h1><h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var res = [];
$.ajax({
url: 'employee.json',
dataType: 'json',
method: 'get',
cache: false,
success: function(data) {
$(data.people).each(function(index, value) {
res.push(value.id);
});
document.getElementById("demo").innerHTML = res.toString();
}
});
</script>
You can't use the local json to read. it gives cross origin request failure. so deploy both the files (html and json) into a we server and execute. or place the json data onto some web url(http://somesite/myjson) and then request that url and see.
First of all, the JSON shouldn't be existed as in physical "file". It has to be generated by a backend language / web service etc. The JSON tags inside a manually created "file" have high chance of data invalidity upon parsing.
Solution
Use a Web Service to generate valid JSON output. And from Javascript end, use:
JSON.stringify( data );
I am trying to render this url http://online.wsj.com/xml/rss/3_7085.xml to fetch all the xml information using jquery but i came across something on jsonp thats giving me a callback ,how do i handle that callback to render each node in the html.
I tried the below code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>RSS Feed testing</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var result;
function jsonparser1() {
$.ajax({
type: "GET",
url: "http://online.wsj.com/xml/rss/3_7085.xml",
dataType: "jsonp",
success: function (result) {
$("div").html(result);
},
});
}
$(document).ready(function(e) {
jsonparser1();
});
</script>
</script>
</head>
<body>
<div></div>
</body>
</html>
I googled, about jsonp ,its quite confusing to me.
Rss feed in xml format. Use datatype = json.
function jsonparser1() {
$.ajax({
type: "GET",
url: "http://online.wsj.com/xml/rss/3_7085.xml",
dataType: "xml",
success: function (result) {
$("div").html(result);
},
});
}
This is not doable directly. You need to use a service like Superfeedr's Feed API or Google's.
These services will serve your the content of the feed in JSON using JSONP so that you can easily integrate any feed into any page.
So im trying to make a jquery request to kimono to get information from the api. I'm getting "unexpected token o" when i inspect element in the console in chrome.
Basically im way out of my depth here, I'm trying to get the text field pulled into a table The closest i got was pulling the whole json into the webpage.
Sam
<?php header('Access-Control-Allow-Origin: true'); ?>
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td>Title</td>
<td>Link</td>
</tr>
</table>
</body>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$.ajax({
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
url: 'https://www.kimonolabs.com/api/ca266cam?apikey=zdRSeNfI0Nnr8GJ9KgSbc6awtvvSyOYh',
success: function (data) {
var json = $.parseJSON(data);
for(var i =0;i < json.results.collection1.length;i++) {
var title = json.results.collection1[i].EventsUK.text;
var href = json.results.collection1[i].EventsUK.href;
$("table").append("<tr><td>"+title+"</td><td>"+href+"</td></tr>");
}
}
});
</script>
</html>
Thats my main php file! The Url link if clicked will show the json. Any ideas would be great. Pleas say its something simple.
Just change your ajax call like below,it worked for me.The problem seems to be related to $.parseJSON(data) line.The response you are receiving from server is already a javaScript Object,So no need to parse that.
$.ajax({
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
url: 'https://www.kimonolabs.com/api/ca266cam?apikey=zdRSeNfI0Nnr8GJ9KgSbc6awtvvSyOYh',
success: function (json) {
//var json = $.parseJSON(data);
for(var i =0;i < json.results.collection1.length;i++) {
var title = json.results.collection1[i].EventsUK.text;
var href = json.results.collection1[i].EventsUK.href;
$("table").append("<tr><td>"+title+"</td><td>"+href+"</td></tr>");
}
},
error: function(error){
console.log(error);
}
});
I search for a method to get plain xml(with tags ect.) from a file and save it so the localStorage.
I found a few opportunities, but every one of them returns the xml without tags. I prefer jQuery to do this...
I tried $.get, $("").load() and AJAX but I don't get it. I just want to save the whole xml as string into the localStorage and read it out later (and work with it).
Does anyone have a idea?
Regards
You can use:
$.ajax({
url: 'http://example.com',
dataType: 'text',
success: function (data) {
localStorage.setItem('xml-content', data);
}
});
This will provide you the XML document as plain text and save it to the localStorage.
Here is a full solution:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre id="output">
</pre>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function setXML() {
$.ajax({
url: 'test.xml',
dataType: 'text',
success: function (data) {
localStorage.setItem('xml-content', data);
getXML();
}
});
}
function getXML() {
var xml = localStorage.getItem('xml-content');
$('#output').text(xml);
}
setXML();
</script>
</body>
</html>