jquery ajax request success portion not working - javascript

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>

Related

ERROR when accessing TFGM API

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>

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);
});
}

How to list results from JSON using Ajax

I have my first Ajax code and I am a little bit confused how to get all values from certain
<html>
<head>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>My first Ajax</title>
</head>
<body>
<script type="text/javascript">
$(submit).click(function getResults() {
return $.ajax({
type: "GET",
url: "https://www.cs.kent.ac.uk/people/staff/lb514/hygiene/hygiene.php",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: "true",
cache: "false",
success: function(msg) {
// success
},
Error: function(x, e) {
// On Error
}
});
});
}
</script>
<input id="submit" name="submit" type="submit" value="Submit">
</input>
</body>
</html>
url. Following papers I have made code down below, but it does nothing to be honest. I would like to know how can I list certain data from this url?
There's many things you need to change (most of them are reference here: http://api.jquery.com/jquery.ajax/):
Use a newer version of jquery:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
JS snipper should come after the element, as there's no element defined when JS executed
$(submit) is invalid. It should be $('#submit') as valid selector.
use evt.preventDefault() to prevent default browser behavior
url: you can't make request on another domain unless that url has enabled CORS (cross origin resource sharing), otherwise the request will work only on the same domain as your page. See an option on how to test locally: Jquery .ajax() local testing
async: true -> that's default so you can ommit
dataType -> that's fine if you expect JSON from server
contentType -> that's fine, but you don't send anything to the server, so it's not really needed
error: starts with lower letter
Here' the code updated:
<html>
<head>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>My first Ajax</title>
</head>
<body>
<input id="submit" name="submit" type="submit" value="Submit">
<script type="text/javascript">
$("#submit").click(function(evt) {
evt.preventDefault();
$.ajax({
type: "GET",
url: "https://www.cs.kent.ac.uk/people/staff/lb514/hygiene/hygiene.php",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: "false",
success: function(msg) {
// success
},
error: function(x, e) {
// On Error
}
});
});
</script>
</body>
</html>
try this:
$('#submit').click(function() {
$.getJSON(url,function(data){
// Do whatever you need
});
});
First of all, your script should be defined after input tag. Also, make sure you have proper headers to access the url or it will give error related to Access-Control-Allow-Headers.
use loop for-in
$(submit).click(function getResults() {
return $.ajax({
type: "GET",
url:"https://www.cs.kent.ac.uk/people/staff/lb514/hygiene/hygiene.php",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: "true",
cache: "false",
success: function (msg) {
for (var i in data){
// data[i].something, etc
}
},
Error: function (x, e) {
// On Error
}
});
});

How can I send a text area content to my server?

I have been studying about ajax and this as far as I can get, I would like to send the text area's content to my server and save it in a text file, but I'm a little bit confused on how to do it, BTW my server is apache tomcat. I've heard that I need a piece of code on server side. Can you help me?
Thanks in advance.
$(document).ready(function() {
var data = new FormData();
var cssData = $("#custom-css-text").val();
data.append("custom_css", cssData);
$.ajax({
url: 'myserver',
type: 'POST',
data: {value:data},
cache: false,
dataType: 'json',
processData: false,
contentType: false,
success: function(response) {
alert(cssData);
},
error: function(jqXHR, textStatus, errorThrown) {
alert('ERRORS: ' + textStatus);
}
});
});
#custom-css-text {
border-style: outset;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<textarea id="custom-css-text">testing</textarea>
</body>
</html>

Treat callback response in $.ajax() as JSON

I have:
<script>
$('#email').on('blur', function(){
email = $(tihs).val();
$.ajax({
type: "POST",
url: "ajax.php",
data: {
'email': email,
'job': 'check',
},
dataType: "JSON",
success: function (response) {
// the response from PHP is smth like:
// {"status":"failed","reason":"email_not_validated"}
// now I want to:
if(response.status == 'success'){
}else{
}
}
})
});
</script>
This seems to work on every browser except IE, why is that?
Am I doing the right thing? the only thing which I need is to access the returned data like response.status and response.reason .
Thanks for helping
This is a mentioned IE10 bug that can be fixed by adding
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
in the <head>. Note in a <head> there should not be another meta tags with X-UA-Compatible as the previous one will be overridden.

Categories

Resources