Save And Load Data from Database Without Refreshing The Page

Submitted by: 
argie
Language: 
PHP
Visitors have accessed this post 16153 times.

Hi everyone, The feature of this tutorial is it allows you to save data to database and display data from database without refreshing the page. I use ajax and php in this tutorial. To start the coding lets follow the steps provided.

Step 1: Creating Our Database

To create a database:
1. Open phpmyadmin
2. Click create table and name it as "ajaxphp".
3. After creating a database name, click the SQL and paste the below code.

  1. CREATE TABLE IF NOT EXISTS `add_delete_record` (
  2.   `id` int(11) NOT NULL AUTO_INCREMENT,
  3.   `content` text NOT NULL,
  4.   PRIMARY KEY (`id`)
  5. ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

Step 2: Creating Our Form

In this we will create our form that display the data from database. To create our form copy the code below and save it as "index.php".

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Ajax Add/Delete a Record with jQuery Fade In/Fade Out</title>
  5. <script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  6.  
  7. <script" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></scrip...</a> type="text/javascript">
  8. $(document).ready(function() {
  9.  
  10. 	//##### Add record when Add Record Button is click #########
  11. 	$("#FormSubmit").click(function (e) {
  12. 			e.preventDefault();
  13. 			if($("#contentText").val()==='')
  14. 			{
  15. 				alert("Please enter some text!");
  16. 				return false;
  17. 			}
  18. 		 	var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure
  19. 			jQuery.ajax({
  20. 			type: "POST", // Post / Get method
  21. 			url: "response.php", //Where form data is sent on submission
  22. 			dataType:"text", // Data type, HTML, json etc.
  23. 			data:myData, //Form variables
  24. 			success:function(response){
  25. 				$("#responds").append(response);
  26. 			},
  27. 			error:function (xhr, ajaxOptions, thrownError){
  28. 				alert(thrownError);
  29. 			}
  30. 			});
  31. 	});
  32.  
  33. });
  34. </script>
  35. <style>
  36. .form_style #textarea {
  37. 	border: 1px solid #CCCCCC;
  38. }
  39.  
  40. .form_style #FormSubmit {
  41. 	display: block;
  42. 	background: #003366;
  43. 	border: 1px solid #000066;
  44. 	color: #FFFFFF;
  45. 	margin-top: 5px;
  46. }
  47. #responds{
  48. 	margin: 0px;
  49. 	padding: 0px;
  50. 	list-style: none;
  51. }
  52. #responds li{
  53. 	list-style: none;
  54. 	padding: 10px;
  55. 	background: #D1CFCE;
  56. 	margin-bottom: 5px;
  57. 	border-radius: 5px;
  58. 	width: 400px;
  59. 	font-family: arial;
  60. 	font-size: 13px;
  61. }
  62. .del_wrapper{float:right;}.content_wrapper {
  63. 	width: 500px;
  64. 	margin-right: auto;
  65. 	margin-left: auto;
  66. }
  67. </style>
  68. </head>
  69. <body>
  70. <div class="content_wrapper">
  71. <div class="form_style">
  72.     <textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea>
  73.     <button id="FormSubmit">Add record</button>
  74.     </div>
  75. <ul id="responds">
  76. <?php
  77. //include db configuration file
  78. include_once("config.php");
  79.  
  80. //MySQL query
  81. $Result = mysql_query("SELECT id,content FROM add_delete_record");
  82.  
  83. //get all records from add_delete_record table
  84. while($row = mysql_fetch_array($Result))
  85. {
  86.   echo '<li id="item_'.$row["id"].'">';
  87.   echo $row["content"].'</li>';
  88. }
  89.  
  90. //close db connection
  91. ?>
  92. </ul>  
  93. </div>
  94.  
  95.  
  96.  
  97. </body>
  98. </html>

Step 3: Create Our Database Connection

Copy the code bellow and save it as "config.php".

  1. <?php
  2. $username = "root"; //mysql username
  3. $password = ""; //mysql password
  4. $hostname = "localhost"; //hostname
  5. $databasename = 'ajaxphp'; //databasename
  6.  
  7. $connecDB = mysql_connect($hostname, $username, $password)or die('could not connect to database');
  8. mysql_select_db($databasename,$connecDB);
  9.  
  10. ?>

Step 4: Writing Our Save Script

In this step we write the code that save the data without loading the page. Copy the code bellow and save it as "response.php".

  1. <?php
  2. //include db configuration file
  3. include_once("config.php");
  4.  
  5. if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0) 
  6. {	
  7. 	$contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); 
  8.  
  9. 	if(mysql_query("INSERT INTO add_delete_record(content) VALUES('$contentToSave')"))
  10. 	{
  11. 		  $my_id = mysql_insert_id();
  12. 		  echo '<li id="item_'.$my_id.'">';
  13. 		  echo $contentToSave.'</li>';
  14.  
  15. 	}
  16.  
  17. }
  18. ?>

That's all you've successfully created your system that save and display data from database without refreshing the page. Thank you for always following and giving positive comments for my tutorials.

  • 16153 reads
Tags: 
save data to database without loading page
display data from database without loading page
argie's picture

Article by argie

argie has submitted 101 source code / articles.

If you like this post, you can follow SourceCodester on Twitter.

Subscribe to SourceCodester feed via RSS or EMAIL to receive instant updates.

Add new comment

More information about text formats

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.