Search code examples
javascriptphpjqueryajaxloader

Load another page in PHP using a loader while using a simple HTML form

I'm quite new to PHP. So I'm here to briefly explain my question.

Recently, I started building my site for an online tool, so it has an input box like this. (I've not designed it fully yet.) (Page URL: index.php)

Input Box

I made it to fetch some datas from a social media site! As you can see, there is written "Enter Page URL". Users must have to put the URL of that page.

I should put the HTML content also! Here's it.

<form method="get" action="download.php">
<input type="text" name="url" placeholder="Enter Page URL" required />
<input type="submit" name="submit" value="Download" />
</form>

The URL of the action page is download.php. Due to heavy PHP codes inside the download.php, the page responds very slow! Sometimes even it even takes upto 5 seconds to load. Only I know what is there, sharing everything isn't a good idea at all! Users might be thinking, it's their network issue or a site problem or something like that! Being irritated, they're leaving there.

Instead of loading the another page, I wanna put the download.php page inside the index.php page with a loader.

Content inside the download.php page looks almost like this.

Download Page

What if I put the download page in the index page with a loader like this? (Loader Image URL: http://webplayer.d8u.in/loading.gif)

Example

For example, if I return back from a playing video in YouTube mobile website, a loader appears & then suddenly we start seeing the video list! Including another pages in PHP can be done by include or file_get_contents(), but I dunno how to execute this with a loader (not by refreshing the current page). I guess there're so many answers of this in the internet, but I couldn't find any of them! Asking here was a better idea for me.

So, how can I do this using jQuery & PHP?

Solution

  • If you want change content of the page without refreshing page you have to use javascript exacly the AJAX. Read about https://www.w3schools.com/xml/ajax_intro.asp