how to fetch the url contents using ajax - javascript

I know the method in PHP (e.g. curl) to fetch the contents of a URL, but how can I fetch the contents of a URL using ajax?A clear way is not known.
Below i have written a code but not able to see the contents from the url. How can i see the contents and can separte them into variable
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<script>
$.ajax({
type:"GET",
url: "http://fantasy.premierleague.com/web/api/elements/100/",
success: function(data) {
$("body").append(JSON.stringify(data));
},
error: function(jqXHR, textStatus, errorThrown) {
alert(jqXHR.status);
},
dataType: "jsonp"
});
</script>
This is my code. what should be added to this to see the contents of the url

Since you've tagged jquery too, I assume you're open to use it. It has rather easy methods to get url contents.
If you want to update a container with the data obtained from request, you can use $.get() (documentation).
Or, you can use $.ajax() (documentation) to get contents and use in Javascript.

Related

i am new to ajax and jquery so i dont know what is wrong in my code

I am a beginner in coding and am learning ajax but my code is not working can anyone tell me what is wrong in my code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo.txt", success: function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
this is demo.txt
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
this is my console error
enter image description here
This is how your URL can use ajax, because Ajax has cross domain restrictions
If you are using vscode editor, you can download the "live server" plug-in and right-click in HTML to open the web page
Pls follow the documentation provided at
jQuery.ajax() | jQuery API Documentation
It should work fine when you include in the same order.
Little information about Ajax. Why do we use ajax, Ajax is mostly used for sending data from Javascript to the Back-end server. Lets say if you want to get the user input from front-end and you want to store the data in your database. Ajax comes to help.
Example of a simple ajax function with passing user data (namely data1 and data2):
$.ajax({
type: "post",
data: {
user_data1 : data1,
user_data2 : data2,
},
url: YOUR_FUNCTION_PATH,
success: function(data){
// After success passing data to YOUR_FUNCTION
// Handle what you do next
},
error: function (request, status, error) {
// Error of passing data to YOUR_FUNCTION
// Debug to see what is wrong
}
});
Then in your YOUR_FUNCTION and if you sending data to PHP function,
$user_data1 = $_POST['user_data1'];
$user_data2 = $_POST['user_data2'];
If you are using the old one, CodeIgniter, it is pretty simple to get the data.
$user_data1 = $this->input->post('user_data1');
$user_data2 = $this->input->post('user_data2');
Your URL may need to start with localhost, for example: http://localhost :8080

Jquery script not running ajax GET request

I've loaded jquery but as far as I can tell my script is not running, I don't believe its an issue with my ajax request, but rather with my loading of jquery?
I'm not getting any relevant error messages and console.log is not running.
<script src = "jquery.js">
$(document).ready(function(){
console.log('why wont my script run?')
$.ajax({
type: 'GET',
url: 'https://blockchain.info/ticker',
datatype: 'json',
success: function(data) {
window.alert('success',data)
},
error: function(error) {
window.alert('error')
}
});
});
You don't use the src attribute plus a script together within a <script> tag. It's one or the other.
If you use the src attribute then it needs to reference the .js file or the CDN.
The reason your variable isn't changing is because you need to make an AJAX call to your exchange rate API. You will then need to extract that value from the HTTP response and then update your DOM.

how to consume data from rest api using ajax jquery

i am new in j query ajax.i don't have idea how to fetch data from rest API using j query ajax. here i have created JS function to check whether passing URL working proper or not.
kindly help me.
<script type="text/JavaScript">
$.ajax({
type: "GET",
dataType: "jsonp",
url: "https://www.propertyfinder.ae/en/find-broker/ajax/search?page=1",
success: function(data){
alert(data);
}
});
</script>
You cannot do a cross domain call using ajax. what you can do is to do a php call like :
$website = file_get_contents('http://google.com');
and store it in a text file and access that using your ajax on your server using the same ajax file you have.
i had similar case that i had a php call on scheduler to grab text from url every minute and update a json file. then simply use :
$.getJSON( "ajax/test.json", function( data ) {
//your function
});
or use ajax! whichever you fancy

Jquery .ajax get request for a json response

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'GET',
url:"http://bustime.mta.info/api/siri/vehicle-monitoring.json",
data: {key: '',
OperatorRef:'MTA%20NYCT',
LineRef:'B54',
VehicleRef:'9531' },
dataType: 'json',
async: false,
success: function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1">Let jQuery AJAX Change This Text</div>
<button>Get External Content</button>
</body>
</html>
Hi, I am new to Javascript & Jquery so please forgive me for any newbie mistake. What I am trying to do here is send a get request to the mta api(http://bustime.mta.info/wiki/Developers/SIRIVehicleMonitoring ) and simply just print the json response once the user clicks a button.
The code is not printing out anything when the button clicks. Can anyone detect the problem with the code above? I would appreciate it a lot.
You need to change the dataType to jsonp to avoid the CORS restriction.
JSONP is a technique used in JavaScript programs running in web browsers to request data from a server in a different domain. Typically this is prohibited by web browsers because of the same-origin policy. Wikipedia provides a far better description than I possibly could. See here.
When it comes to making GET requests to APIs, this is something you will encounter regularly, so it's worth knowing.
The jquery code allows you to view the JSON object in the console, which you can then manipulate as you please. The way I have currently included will change the div to the timestamp as returned by the JSON object. This jsfiddle should demo what you are looking for http://jsfiddle.net/zmxv2j7q/
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'GET',
url:"http://bustime.mta.info/api/siri/vehicle-monitoring.json",
data: {key: '##################',
OperatorRef:'MTA%20NYCT',
LineRef:'B54',
VehicleRef:'9531' },
dataType: 'jsonp',
async: false,
success: function(result){
console.log(result.Siri)
$("#div1").html(result);
$("#div1").html(result.Siri.ServiceDelivery.ResponseTimestamp)
}});
});
});

Cross Domain AJAX request return HTML (not jsonp)

I'm using this plugin: https://github.com/padolsey/jquery.fn/tree/master/cross-domain-ajax/
And this is my code:
$.ajax({
dataType: 'html',
type: 'GET',
url: 'http://www.google.com',
crossDomain: true
}).done(function(data) {
$("#box").html('').append(data);
});
From my understanding, even though I have dataType: 'html' I'm fairly sure this is still getting me a response in JSONP.
I want to be able to grab the entire html of the page, everything I need to display the page in full. Comparable to an iframe. The reason I need to do this through ajax is because eventually I am going to need to pass parameters to the URL I am using. What is the best way to return a page's content in full HTML, so that I may display the page? Do I need to do anything to return the pages scripts/stylesheets as well?
Basically, the URL that I am calling needs to be returned so that I can append the return to a div id, and that div id should then look exactly like the page I was calling, as if I were to load that page independently in a browser window.
Thanks!
You can try Ajax-cross-origin a jQuery plugin.
http://www.ajax-cross-origin.com/
$.ajax({
crossOrigin: true,
url: url,
success: function(data) {
console.log(data);
}
});
Plugin referenced uses Yahoo YQL service as a proxy to get remote page. YQL will return json and you should be able to access your data in data.responseText. This is per limted docs for plugin
To be sure you can log the data to console and see it's structure.
Could do same thing without plugin by using YQL console to create URL needed to meet your scraping needs using their XPATH syntax

Categories

Resources