Loading

Save And Load Data from Database Without Refreshing The Page

Submitted by: 
Language: 
Visitors have accessed this post 6332 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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  6.  
  7. <script 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.




Add new comment

(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Filtered HTML

  • You may insert videos with [video:URL]
  • 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.
To prevent automated spam submissions leave this field empty.