Load a portion of an HTML page with $.AJAX and pass the value to a <span>

Question

This is my ajax code to retrieve a 2 line htlm page from a server ...

 $.ajax({ type: 'GET', url: 'http://sc3.******/7.html', success: function(data) { var result1 = $( '<html />' ).html(data); var result2 = $( result1 ).filter( '#body' ); $('#resultSpan').text(result1) ; alert( result1 ); // no alert at all here }, error: function(jqXHR, textStatus, errorThrown) { alert( 'jqXHR :' + jqXHR); $( '#resultSpan' ).text( 'Error: ' + jqXHR ) ; } });

The page is very simple something like this

<HTML> <meta http-equiv="Pragma" content="no-cache"></head> <body>6,1,22,50,5,128,Jason Mraz - I'm Yours</body></html>

I want to read the section and pass it to a div ... I have try severals methods and try some suggection from stackoverflow but i cantmake it work ...

I always get the error alert and no alert for the result1 var and the resultSpan not getting the text from the body of the html page

Looks like the problem is that the server is not responding properly. You won't ever call the success callback if $.ajax doesn't see what it is looking for in the response. — RustyToms
– RustyToms, Commented Jan 2, 2014 at 1:43
use console.log() instead of alert. Console in browser give to you more info than alert. You can debug your error Object — daremachine
– daremachine, Commented Jan 2, 2014 at 2:13

Community · Accepted Answer · 2017-05-23 12:19:10Z

Your problem is called Cross Domain Request. JavaScript doesn't have permission to load content from another domain.

Here is some info: Cross domain ajax request

Suggestion, develop some server page that performs a web request to that resource, and returns you the content something like this:

$.ajax({url: 'mypage.php?resource=http://server.com/page.html' ... });

This technic is called web proxy I think, and allows you to overcome the security policies restricting javascript from performing the kind of action you are trying to do.

If you can use PHP, you can write something like this in your mypage.php:

<?php echo file_get_contents($_GET['resource']); //resource is the query string param. ?>

This is a simple server page that receives the query string parameter "url" and returns the result back to you.

Because you can call pages local to your domain, you will not face ajax cross request problems.

Hello Joao .. thanks for the answer ... I was not sure if it was a cross domain problem Can you please explain in details how to use your suggestion ..??? Thanks in advance

Damien Black · Accepted Answer · 2014-01-02 01:42:10Z

If you are getting the error alert then the ajax request is failing. Make sure that your ajax page really exists and is working by going to it directly. Also, make sure you set a datatype, if you are just getting text, use

$.ajax({ type: 'GET', url: 'http://sc3.******/7.html', dataType: "text" .....

if you are still having troubles, post the output from when you browse directly to that ajax page http://sc3.******/7.html

The ajax req is failing yes .. i dont know why ... The page exist and its working fine on the browser and gives someting like this "8,1,22,50,7,128,Toto - Africa"
Comma separated values are not one of the formats the that the ajax request typically expects. Make sure you have dataType: "text" being sent to the $.ajax function like I said.
Html its not the correct type to send for html pages ? All my other ajax req that use json type work fine

Collectives™ on Stack Overflow

Load a portion of an HTML page with $.AJAX and pass the value to a <span>

2 Answers 2

8 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Linked

Related