How do I get specified text from another website using jquery?

Question

I need to get text found within a span, within a div, within a div, etc. in another website (cross-domain)
After hours and hours of researching, I still have not been able to get anything to work. As of right now, this is what I have:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
    <div id="thisdiv"></div>
    <script>
        $.get( "http://landnstemacademy.blogspot.com/", function( data ) {
        $( "#Blog1" )
        $("span:contains('Quote of the day')")
            .contents()
                .filter(function(){
                    return this.nodeType !== 3;
                })
            .clone().prependTo( "#thisdiv" );
        }
    </script>
</body>

I am very new to jquery, so please excuse me if I'm way off track. Any help at all is very appreciated.

Also, is there any way to specify "an element after a specified element"? I need to get the contents of an element after this one, but it's not as unique.

If needed, the website is http://landnstemacademy.blogspot.com/

EDIT: I believe I may have read somewhere that some sort of method involving json can get around these "anti-cross-domain" rules. Would that work here? Can that get text? I want to also note that if all possible, I would like to constrain all code to one file (no extra files files for php), but I understand if this makes it too difficult/impossible for whatever reason. Thank you again.

You can't if the domain does not set Allows cross origin policy. Read more https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS — Rohan Kumar, Apr 11 '17 at 05:13
You can get around the CORS restriction by changing your existing code to send the request through a special CORS proxy rather than sending the request directly to the site (as your code is doing now). There’s a relevant code example using `$.get(…)` at https://stackoverflow.com/questions/43314070/google-news-api-gives-an-error-uncaught-syntaxerror-unexpected-token/43314425#43314425 And see also https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource/42744707#42744707 for more details — sideshowbarker, Apr 11 '17 at 05:24

score 1 · Accepted Answer · answered Apr 11 '17 at 05:12

1

You are not allowed to access the site content from your domain because of the Cross-origin resource sharing CORS mechanism.

This mechanism is there form some security reasons to prevent attacks such as clickjacking.

If you try running your request, you will get the below error, so your issue is not with jquery in the first place.

XMLHttpRequest cannot load http://landnstemacademy.blogspot.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Then only way you can access this data is if the site you are trying to get data from allows cross origin access when serving the response of your request using the Access-Control-Allow-Origin: * http header.

answered Apr 11 '17 at 05:12

KAD

10,972
4
31
73

What if I were to make a blogspot page (since the page I am trying to access is a blogspot page), add html code to my page, and then create an iframe of the blogspot page in my original site? – A. Bradley Apr 12 '17 at 17:49
This lies under the same scope dude, it will also prevent you for the same reason. – KAD Apr 13 '17 at 05:13
Well shoot... Alright at this point probably the only thing I could do is ask the editor of that site if they could add add a page to their blogspot site with the $.get code in it, THEN create an iframe on my end, right? Could THAT potentially work? I hate to keep dragging this on for you, but believe it or not, getting this to work will save me (and eventually many others) so much time throughout the year. – A. Bradley Apr 13 '17 at 13:42
Check if the site owner provides any API in order to communicate with the site application and get data through a webservice – KAD Apr 13 '17 at 13:59

score 0 · Answer 2 · answered Apr 11 '17 at 05:19

You can use something like this:

Jquery:

$.ajax({
    url     : 'ajax/get_random_quotes.php',
    method  : 'get',
    success : function(response)
    {
        var data = JSON.parse(response);
        // You can use response like data.col1 or data.col2
    }
});

Php: get_random_quotes.php

$url = "http://quotes.stormconsultancy.co.uk/random.json";
$ch = curl_init( $url );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
$response = curl_exec($ch);
curl_close($ch);
echo $response;
exit;

Note: You are not allowed to access the site content from your domain because of the Cross-origin resource sharing CORS mechanism. So ajax() alone is not enough to do your task, you have to use CURL

How do I get specified text from another website using jquery?

2 Answers2