إرسال واستقبال البيانات لقاعدة البيانات بدون تحديث الصفحة

Hamada Ahmed · 3 يوليو 2021

السلام عليكم

لدي كود يرسل نص للقاعدة

<textarea name="content_txt" id="contentText"></textarea>

والكود كالتالي

<script type="text/javascript">
$(document).ready(function() {
 
	//##### Add record when Add Record Button is click #########
	$("#content-form").submit(function (e) {
			e.preventDefault();
			if($("#contentText").val()==='')
			{
				alert("Please enter some text!");
				return false;
			}
		 	var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure
			jQuery.ajax({
			type: "POST", // Post / Get method
			url: "response.php", //Where form data is sent on submission
			dataType:"text", // Data type, HTML, json etc.
			data:myData, //Form variables
			success:function(response){
				$("#responds").append(response);
				$('#contentText').val("")
			},
			error:function (xhr, ajaxOptions, thrownError){
				alert(thrownError);
			}
			});
	});
 
});
</script>

اريد ان اضيف للفورم حقلين اخرين

<input type="text" name="my_name" id="myname">
<input type="text" name="my_email" id="myemail">

كيف يمكن اضافة حقل الاسم والايميل بالكود بالاعلى

سمير عبود · 3 يوليو 2021

يُمكنك إرسال البيانات بالشكل التالي:

$.ajax({
    ...
    data : { foo : 'bar', bar : 'foo' },
    ...
});

في حالتك تقوم بجلب القيم من حقول الإدخال و تُخزنها في متغيرات ثم تمررها لكائن data:

var contentText = 'content_txt='+ $("#contentText").val(),
    name = $("#myname").val(),
    email = $("#myemail").val();
$.ajax({
  //...
  data : { name: name, email: email, content: contentText},
  //...
});

و في ملف المعالجة يُمكنك الحصول على البيانات من خلال المتغير العام POST_$

يُمكن إستخدام الطريقة التالية ايضاً:

$("#content-form").submit(function (e) {
  e.preventDefault();
  
  $.ajax({
    //...
    data: $('#content-form').serialize(),
    //...
  });
	
});

Hamada Ahmed · 4 يوليو 2021

شكرا اخي ملفات المشروع هكذا

جربت لكن لم تظبط معي

الجدول

    CREATE TABLE IF NOT EXISTS `add_delete_record` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `message` text NOT NULL,
      `name` varchar(255) NOT NULL,
      `email` varchar(255) NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

ملف

index.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Save and load data without leaving the page using PHP and Ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

   //##### Add record when Add Record Button is click #########
   $("#content-form").submit(function (e) {
           e.preventDefault();
           if($("#mymessage").val()==='')
           {
               alert("Please enter some text!");
               return false;
           }
          //build a post data structure
           var contentText = 'message='+ $("#mymessage").val(),
            name = $("#myname").val(),
            email = $("#myemail").val();

           jQuery.ajax({
           type: "POST", // Post / Get method
           url: "response.php", //Where form data is sent on submission
           dataType:"text", // Data type, HTML, json etc.
           data : { name: name, email: email, content: mycontent}, //Form variables
           success:function(response){
               $("#responds").append(response);
               $('#mymessage').val("")
           },
           error:function (xhr, ajaxOptions, thrownError){
               alert(thrownError);
           }
           });
   });

});
</script>
<style>
.form_style #textarea {
   border: 1px solid #CCCCCC;
}

.form_style #FormSubmit {
   display: block;
   background: #003366;
   border: 1px solid #000066;
   color: #FFFFFF;
   margin-top: 5px;
}
#responds{
   margin: 0px;
   padding: 0px;
   list-style: none;
   width:100%;
}
#responds li{
   list-style: none;
   padding: 10px;
   background: #D1CFCE;
   margin-bottom: 5px;
   border-radius: 5px;
   font-family: arial;
   font-size: 13px;
}
.del_wrapper{float:right;}.content_wrapper {
   width: 500px;
   margin-right: auto;
   margin-left: auto;
}
.item-list{
   text-align: left;
}
#contentText{
   width: 100%;
}
</style>
</head>
<body align="middle">
   <h3><strong>Save and Load Data without leaving the page using PHP and Ajax</strong></h3>
   <hr>
<div class="content_wrapper">
<div class="form_style">

   <form id="content-form">
        <textarea name="message" id="mymessage" cols="45" rows="5"></textarea>
        <br>
       <input type="text" name="name" id="myname">
       <br>
        <input type="text" name="email" id="myemail">
       <br>
        <button id="FormSubmit">Add record</button>
    </form>
<br>
</div>
<ul id="responds">
<?php
//include db configuration file
include_once("config.php");

//MySQL query
$Result = mysqli_query($connecDB,"SELECT id,message FROM add_delete_record");

//get all records from add_delete_record table
while($row = mysqli_fetch_array($Result))
{
echo '<li id="item_'.$row["id"].'" class="item-list">';
echo $row["message"].'</li>';
}

//close db connection
?>
</ul>
</div>
</body>
</html>

ملف

response.php

هذا الملف يحتاج الى اضافة حقول الايم والايميل ايضا

<?php
//include db configuration file
include_once("config.php");

if(isset($_POST["message"]) && strlen($_POST["message"])>0)
{
   $contentToSave = filter_var($_POST["message"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);

   if(mysqli_query($connecDB,"INSERT INTO add_delete_record(message) VALUES('$contentToSave')"))
   {
          $my_id = mysqli_insert_id($connecDB);
          echo '<li id="item_'.$my_id.'" class="item-list">';
          echo $contentToSave.'</li>';

   }

}
?>

ملف

config.php

<?php
$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = 'ajaxphp'; //databasename

$connecDB = mysqli_connect($hostname, $username, $password, $databasename)or die('Could not connect to the database');
?>

المشروع كامل مرفق لو تتفضل وتعدله مشكورا بارك الله فيك

pro.rar

سمير عبود · 4 يوليو 2021

حاول تعديل كود الجيكويري المسؤول عن إرسال البيانات بهذا الشكل:

$(document).ready(function() {

  //##### Add record when Add Record Button is click #########
  $("#content-form").submit(function(e) {
    e.preventDefault();
    //build a post data structure
    var message = $("#mymessage").val(),
    name = $("#myname").val(),
    email = $("#myemail").val();

    if (name == '' || email == '' || message == '') {
      alert("All fields are required");
      return false;
    }

    jQuery.ajax({
      type: "POST", // Post / Get method
      url: "response.php", //Where form data is sent on submission
      dataType: "text", // Data type, HTML, json etc.
      data: {
        name: name,
        email: email,
        message: message
      }, //Form variables
      success: function(response) {
        $("#responds").append(response);
        $('#content-form').trigger('reset');
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError);
      }
    });
  });

});

حيث أن خصائص الكائن data هي ما ستستقبله في المتغير العام POST_$ و تضيف الحقول الجديدة لإستعلام التخزين:

<?php
//include db configuration file
include_once("config.php");

if(isset($_POST["message"]) && strlen($_POST["message"])>0) 
{	
  $name = mysqli_real_escape_string($connecDB, $_POST["name"]); 
  $email = mysqli_real_escape_string($connecDB, $_POST["email"]);  
  $message = mysqli_real_escape_string($connecDB, $_POST["message"]);  
  $query = "INSERT INTO add_delete_record(name, email, message) VALUES ('".$name."', '".$email."','".$message."')"; 
  if(mysqli_query($connecDB, $query))
  {
    echo '<p>You have entered</p>';  
    echo '<p>Name:'.$name.'</p>';  
    echo '<p>email:'.$email.'</p>';  
    echo '<p>Message : '.$message.'</p>'; 
  }

}
?>

Hamada Ahmed · 4 يوليو 2021

بتاريخ 2 ساعات قال عبود سمير:

حاول تعديل كود الجيكويري المسؤول عن إرسال البيانات بهذا الشكل:


$(document).ready(function() {

  //##### Add record when Add Record Button is click #########
  $("#content-form").submit(function(e) {
    e.preventDefault();
    //build a post data structure
    var message = $("#mymessage").val(),
    name = $("#myname").val(),
    email = $("#myemail").val();

    if (name == '' || email == '' || message == '') {
      alert("All fields are required");
      return false;
    }

    jQuery.ajax({
      type: "POST", // Post / Get method
      url: "response.php", //Where form data is sent on submission
      dataType: "text", // Data type, HTML, json etc.
      data: {
        name: name,
        email: email,
        message: message
      }, //Form variables
      success: function(response) {
        $("#responds").append(response);
        $('#content-form').trigger('reset');
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError);
      }
    });
  });

});

حيث أن خصائص الكائن data هي ما ستستقبله في المتغير العام POST_$ و تضيف الحقول الجديدة لإستعلام التخزين:


<?php
//include db configuration file
include_once("config.php");

if(isset($_POST["message"]) && strlen($_POST["message"])>0) 
{	
  $name = mysqli_real_escape_string($connecDB, $_POST["name"]); 
  $email = mysqli_real_escape_string($connecDB, $_POST["email"]);  
  $message = mysqli_real_escape_string($connecDB, $_POST["message"]);  
  $query = "INSERT INTO add_delete_record(name, email, message) VALUES ('".$name."', '".$email."','".$message."')"; 
  if(mysqli_query($connecDB, $query))
  {
    echo '<p>You have entered</p>';  
    echo '<p>Name:'.$name.'</p>';  
    echo '<p>email:'.$email.'</p>';  
    echo '<p>Message : '.$message.'</p>'; 
  }

}
?>

تظهر هذه الرسالة

Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, bool given in C:\xampp\htdocs\2\index.php on line 110

السطر 110

while($row = mysqli_fetch_array($Result))
{
echo '<li id="item_'.$row["id"].'" class="item-list">';
echo $row["message"].'</li>';
}

سمير عبود · 4 يوليو 2021

بتاريخ 45 دقائق مضت قال Hamada Ahmed:

تظهر هذه الرسالة

Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, bool given in C:\xampp\htdocs\2\index.php on line 110

السطر 110

while($row = mysqli_fetch_array($Result))
{
echo '<li id="item_'.$row["id"].'" class="item-list">';
echo $row["message"].'</li>';
}

يبدو أنك أخطأت في شيء ما عند جلب البيانات من القاعدة سأرفق لك الملفين يعملان بشكل سليم:

index.php

response.php

أضفت جدول في أسفل الإستمارة سيحتوي على كافة البيانات و عند إضافة سجل جديد سيظهر صف آخر في الجدول دون الحاجة لتحديث الصفحة.