Hello Reader's if you are making the website in which you have to fetch and show the content data from an external file then in this blog you can see how to do it. In web technologies different technologies offers you many ways to do this but now ajax offers you most of the easiest way to do this.
Lets considet the example below:-<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#divShow").load("myExternalFile.txt");
});
});
</script>
</head>
<body>
<div id="divShow"><h2>Here you will notice the ajax data</h2></div>
<button>Click to show external data</button>
</body>
</html>
In the code above you can see we are using the .load() function offered by jquery in the script.
This will take the action to do fetching the data from the external file named as myExternalFile.text
Now create new text file name it myExternalFile.txt and it's matter will go like this:-
Hello this is tutorial on findnerd.com showing the detail of jquery load() function
And now we are all set to load this html page. Onload this file you will see the bold heading the written as "Here you will notice the ajax data". But you hit the button below it, the data will be replaced by the text as written in your external file name as myexternalFile.text. Main reason to choose ajax to perform this actions is, Only ajax can provide this dynamic data without any page reload of open new page. AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. Similarly you perform some amazing other tasks by using the methods as below:-
jQuery fadeIn()
Used to hide any div with the fadein animation.
jQuery fadeOut()
Used to demonstrates the jQuery fadeOut() method.
jQuery fadeToggle()
Used demonstrates the jQuery fadeToggle() method.
jQuery fadeTo()
Used demonstrates the jQuery fadeTo() metho
0 Comment(s)