about 9 years ago
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>
<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:-
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
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)