ERROR when accessing TFGM API - javascript

https://developer.tfgm.com/
I was trying to access data from the TFGM api using the sample javascript code which is using ajax.
And I try to fix the CORS problem using jsonp. But then it gives me 401 error. Here's my code
<!DOCTYPE html>
<html>
<head>
<title>JSSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$.ajax({
url: "https://api.tfgm.com/odata/Accidents?$top=10",
beforeSend: function (xhrObj) {
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "d6bba5f0e3f244bc97b7c5aa4745aae2");
},
type: "GET",
// Request body
data: "{body}",
dataType: "jsonp"
})
.done(function (data) {
console.log("success");
})
.fail(function () {
console.log("error");
});
});
</script>
</body>
</html>

Related

JSON parsing problems jquery, ajax

I have a little problem with a test program I wrote with Javascript,Jquery and ajax.
This is my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="script.js"></script>
</head>
<body>
<button> Push here </button>
</body>
</html>
JS
$(document).ready(function(){
$('button').on('click',function(e){
callPage()
})
});
function callPage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
succes: function (response) {
var data = response;
console.log("hey");
console.log(data.title);
},
error: function(error){
console.log("the page was not loaded", error);
},
});
}
However if I check the network, I see that I got the request, but
I don't get the the succes, so the console does not log anything.
How is this possible?
Use .done() instead success
function callPage(){
$.ajax({
url: "http://events.restdesc.org/",
type: "GET",
dataType:'json',
error: function(error){
console.log("the page was not loaded", error);
},
}).done(function(response) {
var data = response;
console.log("hey");
console.log(data.title);
});
}

jQuery Ajax Post with data

why it isn't working. Am trying to call a php file when onclick of a button occurs with some parameters. It is getting executed till alert statement in jsfile.js. After that the ajax part is not getting executed.. Help me out.. Thanks in advance..
main.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jsfile.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<button onclick="cart(0)"> hi </button>
<p id="disp"></p>
</body>
</html>
jsfile.js
function cart(id1)
{
var id=id1;
alert("enterd "+id);
document.getElementById("disp").innerHTML ="hi";
$.ajax({
url:"/add.php ",
type:"POST",
data:{
item_id: id,
},
success:function(response) {
//document.getElementById("total_items").value=response;
document.getElementById("disp").innerHTML =response;
},
error:function(){
alert("error");
}
});
}
add.php
<?php
if(isset($_POST['item_id']) && !empty($_POST['item_id'])){
//if(count($_POST)>0)
echo "success";
exit();
}
?>
In your jsfile.js file, please correct the following points which I have mentioned as comments on the following code.
function cart(id1)
{
var id=id1;
alert("enterd "+id);
document.getElementById("disp").innerHTML ="hi";
$.ajax({
url:"/add.php ",
method:"POST", //First change type to method here
data:{
item_id: id,
},
success:function(response) {
document.getElementById("disp").innerHTML =response;
},
error:function(){
alert("error");
}
});
}
Change it and try
type:"POST" -> method: "POST"
If your jquery version is >= 1.5 use it this way.
$.ajax({
url: "add.php",
method: "POST",
data: { item_id: id},
}).done(function(response) {
......
}).fail(function( jqXHR, textStatus ) {
......
});
Load Jquery Before your JS file.

Weather.asmx web service from JavaScript- No output returns

I call http://wsf.cdyne.com/WeatherWS/Weather.asmx web service from JavaScript. And I pass data ZIP code as 10007(Hard coded). Want to get some output data. But when I run the code success message come as alert and then alert pop up says none. Seems there is no data returned. Can anyone edit the code to return proper output?
<html>
<head>
<title>Calling Web Service from jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnCallWebService").click(function (event) {
$.ajax({
type: "POST",
url: "http://wsf.cdyne.com/WeatherWS/Weather.asmx/GetCityWeatherByZIP",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "10007",
success: processSuccess,
error: processError
});
});
});
function processSuccess(data, status, req) { alert('success');
if (status == "success")
$("#response").text($(req.responseXML).find("Result").text());
alert(req.responseXML);
}
function processError(data, status, req) {
alert('err'+data.state);
//alert(req.responseText + " " + status);
}
</script>
</head>
<body>
<h3>
Calling Web Services with jQuery/AJAX
</h3>
<input id="btnCallWebService" value="Call web service" type="button" />
<div id="response" ></div>
</body>
</html>
Did you enabled CORS
themessage i am getting when i tested in firebug is as below
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://wsf.cdyne.com/WeatherWS/Weather.asmx/GetCityWeatherByZIP. This can be fixed by moving the resource to the same domain or enabling CORS.
these links might help you
http://enable-cors.org/client.html
Firefox setting to enable cross domain ajax request
Try This
$.ajax({
url: "URL",
dataType: "json",
data: {term: request.term},
success: function(data) {
alert(data);
var dData = JSON.parse(data);
alert(dData.Name); //get your stuff
}
});

jQuery ajax POST return error in chrome

I using this code
function testfunction(ttl){
jQuery.ajax({url:"index.php",
type: "POST",
cache : false,
data: { 'data1': ttl},
success:function(res){
//Do something
},error: function(requestObject, error, errorThrown) {
console.log(error);
}});
}
I got a error = 'error' and errorThrown = ""
This issue is only in Google chrome.
How to solve this issue ?
Following code works for me - might be problem with parameter ttl which you send via ajax call
index.php:
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script language="JavaScript">
$('document').ready(function(){
$('button').click(function() {
$.ajax({
url: "index2.php",
type: "POST",
cache: false,
data: { 'data1': $(this).attr('rel')},
success: function (res) {
console.log(res);
},
error: function (requestObject, error, errorThrown) {
console.log(error);
}
});
});
});
</script>
</head>
<body>
<button rel="test">test</button>
</body>
</html>
and index2.php
<?php
echo json_encode($_POST);

jquery ajax request success portion not working

I am having this ajax request but success portion is not working I have been working from past one hour but not able to get is there any thing I am missing.
$.ajax({
url: "ajaxsearch",
type: 'POST',
dataType: "jsonp",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
data: JSON.stringify(eval({
name_startsWith: request.term
})),
success: function (data) {
alert("yoo"); //What ever I write do not get executed is any thing wrong
}
});
url: "ajaxsearch" is most likely something like url: "ajaxsearch.php" / url: "ajaxsearch.ashx"
Are you sure that the dataType is jsonp and not json?
Don't eval() - it's evil
Inspect the error on why you aren't ending up in the success handler:
error: function(jqXhr, status, error) { /* handle error here */ }
Since it's a search, you should use type: 'GET' instead of POST. POST is usually used when saving data to the server (like when submitting a form, for example. This is just a general guideline. GET is default, so you could just remove the property.
I will suggest you to first try to make the jQuery Ajax working with simple code then do modification. You can try the below code snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btnSend").click(function(){
var args = {
url : "http://localhost:8080/JqueryAjaxPrj/CustomerServlet",
type : "POST",
success : handleResponse,
dataType : "json",
data : {my-status: "test", my-name: "xyz"}
};
$.ajax(args);
});
});
function handleResponse(response) {
alert(response);
}
</script>
</head>
<body>
<button id="btnSend">Send Request</button>
<br>
</body>

Categories

Resources