I'm trying to get photos from instagram by get request,
I tried jQuery.get() which worked well for other purpose of get request which is not instagram,
but for this one it doesn't work.
I used postman and I get the request no problem at all,
I also tried to change from jQuery.get() to jQuery.getJSON() and still no luck.
By the way, tried to get the request with NodeJS using request module and it works fine.
Hope you can help, here is my simple code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(function () {
$.get("https://www.instagram.com/uefachampionsleague/media/",
function (data) {
alert(items[0].id);
},"json");
});
</script>
</head>
<body>
<p></p>
</body>
</html>
You need to register your application and then set the credentials in the AJAX request, or you can also use the crossorigenme proxy:
$(function () {
$.get('https://crossorigin.me/https://www.instagram.com/uefachampionsleague/media/', function(data) { console.log(data); });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
As Jaromanda added "It's worth noting the caveat on crossorigin.me - PLEASE DO NOT USE THE PROXY ON A PRODUCTION SITE - if you want to "bypass" CORS, use your own damned server to do it".
Related
I know there are a lot of these questions about this one, but unfortunately i cant find the right answer so i try it again.
I simply want to display the current song from "http://178.19.116.253/currentsong?sid=1" on my site that must refresh every x seconds.
I rather not use php cause it will make a background process for all users, so i've seen a lot of little scripts like this..
<div id="sc_stats"><?php include_once 'sc_stats.php'; ?></div>
var refreshId = setInterval(function() {
$.get("sc_stats.php", function(data) {
$("#sc_stats").html(data);
});
}, 10000);
But i cant get mine to work without php.
Someone can help me with this?
You don't need to use php, the following snippet which only uses jQuery will display the current song and refresh it every second.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="nowplaying"></div>
<script src="https://cdn.jsdelivr.net/jquery/3.2.0/jquery.min.js"></script>
<script>
setInterval(function() {
$.ajax({
url: "http://178.19.116.253/currentsong?sid=1",
dataType: "html",
success: function(data) {
$('.nowplaying').text(data);
console.log(data);
}
});
}, 1000);
</script>
</body>
</html>
Note: In order to get this to work, either:
This piece of code must run on the same domain/server as your stream
Or CORS must be enabled on your server. More about CORS can be found here
You can test CORS with the following Chrome plugin: Allow-Control-Allow-Origin:
I am trying to brush up on my jquery and ajax. In Jquery in 8 hours there is this:
<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A JQuery Sample Program</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$.ajax({
type:"POST",
url:"postFile.php",
data: {data:100},
success:function(data) {
$("div").html(data);} });});
</script>
</head>
<body>
Response: <div></div>
</body></html>
and postFile.php is this:
<?php
if ($_POST["data"]=="100") {echo "100";}
?>
I'm running this under IISExpress. BUT all I get from the browser (Chrome) is method not allowed in jquery.min.js:4. This seems so simple and yet, doesn't work.
Method not allowed usually happens when you're trying to request a file that's on another domain. I assume that's not your real code since it looks like you're calling a file that's on the same domain. Read about cross domain scripting. You can't do AJAX calls to a script that's on a different domain.
Now I have a javascript code which refreshes a webpage every 2 seconds to check if there is any update from the database.
What I would like it to do is to play a sound when the webpage display new things.
Below is the html file:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
$.ajaxSetup ({
cache: false
});
var auto_refresh = setInterval(function () {$('#loading').load('index.php').fadeIn("slow");}, 2000);
});
</script>
</head>
<body>
<div id="loading"></div>
</body>
</html>
I am new to Javascript
I think what you want is custom implementation like HTTP ETag.
It should look like this:
Extract version no from html sent by PHP script, pass this version no to each ajax request, server will check both versions and provide proper responses to client.
If server replies with
1) http status code 200 => web page is changed => play sound.
2) http status code 304 => web page is not changed
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div></div>
<script>
$(document).ready(function() {
$.getJSON("http://api.crunchbase.com/v/1/company/facebook.js?api_key=mgxpds8ja7f6cncwd39caed7")
});
</script>
</body>
</html>
I feel like there is something ridiculously easy I'm missing, but I can't seem to pull any data off.
There is same origin policy violation in the code, you need to do pass an additional parameter callback=? so that it will make use of JSONP to make the request.
$.getJSON("http://api.crunchbase.com/v/1/company/facebook.js?api_key=mgxpds8ja7f6cncwd39caed7&callback=?", function(data){
console.log(data);
//Do something with the data
})
Demo: Fiddle
Well. I see a couple of things..
Include the Jquery script tag.
Add an id to the place you want to put the results.
Change the script like mentioned below..
Check the settings with the API Key and or Simply use your php backend to retrieve the JSON and then put it un your page. Using JSON like that will return a cross-domain error.
Check the HTML below, works like a charm, but for the x-domain error...
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="results"></div>
<script>
$(document).ready(function() {
$("#results").html( function () {
return $getJSON("http://api.crunchbase.com/v/1/company/facebook.js?api_key=mgxpds8ja7f6cncwd39caed7")
});
});
</script>
</body>
</html>
Thanks!
#leo.
After fetching JSON, for next step you need to add callback and do some action with JSON data,
$.getJSON("http://api.crunchbase.com/v/1/company/facebook.js?api_key=mgxpds8ja7f6cncwd39caed7", function(data){
//CALLBACK
console.log(data); //LIST DATAs
//Do Something over here
})
http://api.jquery.com/jQuery.getJSON/
Hey guys,
I have a little problem with a simple ajax request. I can't figure it out why jquery ajax method doesn't work with the last version of chrome ... on ff work great so as on opera but on chrome i don't get any response and no errors. This is my js code:
function load(idno){
var url = 'index.php';
$.get(
url,
{
pagina:"ajax",
show:"cars",
brand:idno
},
function(data) { document.getElementById("model").innerHTML=data },
"html"
);
}
Any reason you're not just using jQuery.load()? Eg
$('#model').load('index.php', {
pagina: 'ajax',
show: 'cars',
brand: idno
});
At a guess, I'd say the problem is with the innerHTML call. A more robust method would be to use jQuery.html(), eg
function(data) { $('#model').html(data); }
Edit
Just whipped up this test and it works fine
<?php
// test.php
echo '<pre>', print_r($_REQUEST, true), '</pre>';
<!-- test.html -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="model">
Default text
</div>
<p><button id="fetch-data">Fetch Data</button></p>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('#fetch-data').click(function() {
$('#model').load('test.php', {
pagina: 'ajax',
show: 'cars',
brand: 123
});
return false;
});
});
</script>
</body>
</html>
When I click the button, I can see all the request variables sent to the script
After a long long nith I've managed to resolve the problem. My JS code is good and maybe Phil's too ... I didn't try that in this version but the real problem in Chrome is that onclick attributes on option tags aren't allowed. So I made the event
<select onchange='loadData(this.value,'models')'></select>
and it is working great. Thank you Phil anyway.
because of Security reason chrome not allow cross-domain communication if request is not from a trusted sites,
if you want to use $.ajax in chrome so you need to disbale web security of chrome
use this comman.
your_chrome_path --disable-web-security
after doing this $.ajax works fine.