Monday , 24 July 2017

Send Data Without Reloading The Page With jQuery

Send Data Without Reloading The Page

jQuery is the most amazing JavaScript library to do programming in a totally different way. It helps us certainly programmers to develop one of the most amazing web apps in short time like jQuery is used in all big websites e.g. Facebook, YouTube, WordPress etc just to make these platforms faster and real time. So today I am going to share one of my best technique to make web apps faster and user friendly which is to send data without reloading the page and of course we can use this technique to make website with real time updates. This technique is widely used and I am sure that there are other methods to do it but I love this one.

Send Data Without Reloading Website

So let’s get started, the first thing we need to do is to get the jQuery source code and add it to our website with the help of <script></script> tags so first go to jquery.com there you will see a button of right side saying download jQuery just click on that button it will shows us a huge code simply just copy the URL from the browser’s address bar and save it somewhere in your computer because we are going to use it later.

Add jQuery in Website

Now it’s time to add jQuery in your website file where you want to send data to another file or the same file without reloading the page. Before few minutes I was thinking to write a text tutorial but now I have changes my mind and I edited the heading of this article because I want to make a video tutorial for you so that you can get it as much as you can and I’ll try my best to explain you more than just sending the data without reloading the page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script type="text/javascript">// <![CDATA[
			$(document).ready(function() {
				$('#submit').click(function () {
					var info = $('#info').val();
					$.ajax({
						url: 'action.php',
						type: 'post',
						data: 'info=' + info,
						success: function(data) {
							$('#show').text(data);
							$('#info').val('');
							$('#info').focus();
						}
					});
				});
			});
 
// ]]></script><input id="info" type="text" /> <input id="submit" type="submit" />

As you can clearly see on line number 5 that I first added the copied jQuery source file within <script></script> tags then I added JavaScript code and used jQuery functions to send data without reloading the page and line number 11 shows the URL where to send data and 12 shows the data type and I put there post you can also type get it is your choice now check out the line number 13 where we have to set the data which has to be sent now just make a new file with name action.php and there you can use the received variable in any purpose and at last this tutorial is for those who are programmers and have little bit knowledge about JavaScript code if you are not familiar about this then go ahead read any other useful article this is not for you.

Need Any Help?

I know this little bit difficult for beginner programmers but if you need any help then comment below without any hesitation.

Leave a Reply