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

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">

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

سمير عبود · 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

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

سمير عبود · 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(),
    //...
  });
	
});

سمير عبود · 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

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

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

الجدول

    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

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>';
}

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

السؤال

Hamada Ahmed

5 أجوبة على هذا السؤال

Recommended Posts

سمير عبود

سمير عبود

سمير عبود

Hamada Ahmed

Hamada Ahmed

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية