Scrape and display web content from another URL using JQuery/AJAX/PHP

Question

I need to do the following:

Catch a URL pasted into a simple HTML text box on the paste event and save to a JavaScript variable called myURL (this code works)
Send the myURL variable using AJAX to a PHP page that will scrape some content from the URL. The PHP page (webscraper.php) will save the scraped content in the database and then also display the scraped content on the HTML page (where the text box is) without reloading the page. And this step is where the code is missing and broken.

index.html:

<body>
     <input type="text" class="newslinkinput"/>
</body>

URLonpaste.js:

$(document).ready(function () {
 $(".newslinkinput").bind('paste', function (e) {
     setTimeout(function () {
         var myURL = $(".newslinkinput").val()
         $.ajax({
             type: "POST",
             url: "webscraper.php",
             data: "newslink=" + myURL.val(),
             success: function (data) {}
         });
     }, 0);
   });
 });

webscraper.php:

<?php   
$newslink = $_POST['newslink'];

require_once('ExternalScraper.php');

$result = ExternalScraper::fetch($newslink);

$contentA = $result->contentA;
$contentB = $result->contentB;

include "include/database.php";

$insert = mysqli_query($connect, "INSERT INTO mytable (contentA, contentB) VALUES ('$contentA', '$contentB')");

mysqli_close($connect);

//Somehow get $contentA and $contentB to display on index.html
//Do all this without refreshing the page

?>

I don't know if ExternalScraper makes things safe, but to avoid doubt, you should parameterise your INSERT query, to be doubly sure you don't have a SQL injection vulnerability. — halfer
– halfer, Commented Apr 25, 2014 at 18:37
What is the purpose of the setTimeout in your event handler? — halfer
– halfer, Commented Apr 25, 2014 at 18:39
@halfer: onpaste can fire before the input's .value changes, setTimeout gives the new text time to "sink in" — dandavis
– dandavis, Commented Apr 25, 2014 at 19:16
@dan, thought so, but I'd have expected jQuery to do that :). But no matter. OP, to debug this, look at a live AJAX viewer in your browser. Do you get a successful (HTTP 200 code) response? Do you get an error in the response? — halfer
– halfer, Commented Apr 25, 2014 at 19:37

hindmost · Accepted Answer · 2014-04-25 18:44:35Z

1

Try this:

index.html:

<body>
     <input type="text" class="newslinkinput"/>
     <div id="contentA"></div>
     <div id="contentB"></div>
</body>

URLonpaste.js:

...
$.ajax({
    type: "POST",
    url: "webscraper.php",
    data: "newslink=" + myURL.val(),
    dataType: "json",
    success: function (data) {
        $('#contentA').html(data.contentA);
        $('#contentB').html(data.contentB);
    }
});
...

webscraper.php (append to the end):

...
echo json_encode(array('contentA' => $contentA, 'contentB' => $contentB));

edited Apr 25, 2014 at 18:44

answered Apr 25, 2014 at 18:27

hindmost

7,1713 gold badges33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hindmost Over a year ago

@halfer Thanks for the note. Fixed

Andrew Heekin Over a year ago

Works great, thanks! The only change I had to make was in the AJAX, changing myURL.val() to just myURL, then it worked like a charm.

Collectives™ on Stack Overflow

Scrape and display web content from another URL using JQuery/AJAX/PHP

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related