Jquery ajax get method not working - javascript

I am using the following code but it seems to be not working. Sorry for asking this simple question but I want to know why this code is not working
$(document).ready(function(){
$("button").click(function(){
$.get("smiley1.html",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
<button>Send an HTTP GET request to a page and get the result back</button>
Please help me to solve it. Thanks

Code is fine but, it matter from where you are running it.
If you are trying to run from snippet runner of this page, if will fail because of 2 reasons
it doesn't find $ (i.e. jQuery)
it is trying to do cross domain call, which I believe is not allowed from target page. smiley1.html is not present on stackoverflow.com domain,
you can see error in developers console
If try it in jsfiddle
$(document).ready(function(){
$("button").click(function(){
$.get("x2rmptu3/show/",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
here is my fiddle http://jsfiddle.net/x2rmptu3/2/

Related

Implementing Search

This is an extension of my previous question here. I want someone to be able to fill in the search form, hit the search button and do the following:
Redirect to the url www.mywebsite.com/search?<params>
Make an ajax call to my backend controllers
Display the results on screen
I know how to do #3 obv, but I want to know what's the best practice for doing #1 and #2. Here's the relevant fiddle. Would I do something like this:
function getValues(id) {
return $("#" + id).val().join(",");
}
$("button").click(function() {
window.location = <baseurl> + "/search" +
"?loc=" + getValues("e1") +
"&type=" + getValues("e2") +
"&col=" + getValues("e3");
//Ajax call to api controller
})
What is the standard way that someone like google or wikipedia implement searching? How do they route and make their backend call at the same time?

jquery get request error

I am trying to make a get request once the user enters an value and pass that value as parameter however nothing happens. The alert outside theget function works fine. here is my code
$(document).ready(function(){
$( "input[type='text']" ).change(function() {
$.get("http://example.com/get.php?number=1234", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
$("#result").html( data );
});
alert("end of script");
});
});
https://jsfiddle.net/4rrous4y/3/
To send a parameter along to get.php you need to append a query string.
In your $.get after the URL add ?parameter=value and change the values accordingly.
I think you are having a cross origin issue here. Basically if the resource you are trying to load is in a different domain than the origin of the request, it won't let you access to it.
Check the console in Google Chrome, some error should be appearing there.

Getting certain items with get

Sorry if my title is a little confusing I don't know really how to explain it.
API: http://mcping.net/api/162.223.8.210:25567
So I have this code that goes to an API, and I only want it to get the 'variables' online, and max. How would I do this?
Code:
$.get('http://mcping.net/api/162.223.8.210:25567', function(data){
$.each(data, function(index, item){
console.log(index + " ; " + item)
});
});
Try this
$.get('http://mcping.net/api/162.223.8.210:25567', function(data){
console.log(data.online);
console.log(data.max);
});
If your data is already a Javascript object, so you can call its variables properties like in the snippet code.
Just in case I tested it in this fiddle http://jsfiddle.net/js18ykj1/

Diffrence between Ajax requests?

I started working with Ajax, and I'm listening tutorials on one tutorial i see the code like:
$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
on other cases i see XMLHttPRequest done in javascript can someone tell me the diffrence between two? Beacuse its confusing listening one tutorial that tells you one thing and other second thing
Jquery wraps the use of XMLHttPRequest with his $.get request (etc.)
So bassicly you are using the same method of Ajax.

How can I access an online JSON file from offline? (javascript)

I am making a weather website for my school project using the Wunderground Weather API. This is the code I am using to get the JSON data:
$.getJSON("http://api.wunderground.com/api/<apikey>/conditions/q/" + wlocation + ".json", function(data){
alert(data);
});
The <apikey> is where I put my API key, and the $ character is just a shortcut for JQuery.
When I open this webpage, which is local, not published, no alert pops up and I get the error:
XMLHttpRequest cannot load http://api.wunderground.com/api/<apikey>/conditions/q/<myzipcode>.json. Origin null is not allowed by Access-Control-Allow-Origin.
After doing some research on this error, it sounds like I might have to create a web server. However, for the project, we need to turn it in as a folder of .html and other "web files". Is there another way to do this or do I have to make a web server? This project is due soon, so any help is appreciated!
Yes, you can use JSONP for this.
I'm not sure if Wunderground Weather API have some kind of callbacks in JSON. But if they do even jQuery getJSON support JSONP.
Seems like you run into Same origin policy.
here is a code sample from the link that you provided in your original post (http://www.wunderground.com/weather/api/d/docs?d=resources/code-samples). they use JSONP. yes, as #antyrat said, it is a CORS problem.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$.ajax({
url : "http://api.wunderground.com/api/Your_Key/geolookup/conditions/q/IA/Cedar_Rapids.json",
dataType : "jsonp",
success : function(parsed_json) {
var location = parsed_json['location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
alert("Current temperature in " + location + " is: " + temp_f);
}
});
});
</script>

Categories

Resources