كيف احفظ البيانات دون تحميل للصفحة بشكل كامل

[HnHn]

اريد ان اسأل هل بالامكان عمل نموذج لحفظ بعض البيانات دون تحميل للصفحة بشكل كامل

بمعنى لو فرضنا

عندنا تيكست للأسم وتيكست للعائلة وزر الحفظ

واريد ان ارسل البيانات للقاعدة بواسطة POST

فكيف يتم ذلك دون ان تتحرك الصفحة وعند الحفظ تظهر رسالةتم الحفظ
مثلا كما في البرامج التطبيقية .. ياليت اللي عنده مثال مصغر انه ما يبخل علينا بالمعرفة

[كريم أبو العلا]

أخي العزيز يمكنك إستخام أداة الـAjax..
بإسم Updatepanel ..
هذه في ASP.NeT .. أم المثال للأسف لا يتوافر معي الأن ..
ربما أرفقه لك لاحقا إن شاء الله ..
تقبل تحياتي ..

[HnHn]

اخ كريم أبو العلا

ذكرتني بقصة

آن لـ أبي حنيفه أن يمد قدميه

حينما كان ابا حنيفه النعمان رضي الله عنه يشرح أوقات الصلاه لتلامذته في بغداد

بعد أن أستأذنهم بأن يمد قدميه ليخفف عن آلام فيها

وإذ بشيخ كبير يدخل بينهم ويجلس في صفوف التلامذه

فـ من باب الإحترام كان من أبى حنيف أن يحني قدميه ويكمل الشرح

وقد وصل إلى وقت صلاة الصباح فقال :

يكون وقت الصلاة الصبح ياأبنائي قبل خروج الشمس

فإن خرجت الشمس وصل أحدكم تكون صلاته قضاء

فقال الشيخ ( الضيف ) وإن لم تخرج الشمس ..؟؟

فضحك الحضور إلى الضيف
ورد أبى حنيفه حينها بجملة ( آن لـ أبي حنيفه أن يمد قدميه )

[كريم أبو العلا]

أخي العزيز ..
أتمنى توضيح ما تقصده بقصتك عن الإمام ..

[feras007]

أخي الكريم :
هذا رابط لدرس يمكنك أن تستفيد منه
ط§ظ„ظ…ط´ط±ظˆط¹ » ظ…ظ‚ط¯ظ…ط© ظپظٹ ط§ظ„ط£ط¬ط§ظƒط³ (AJAX) ظˆط§ظ„ظ€ XMLHttpRequest

الفكرة سهلة جداً وإن لم تفهم أخبرني وسأبرمجه لك .

تحياتي
فراس

[HnHn]

اشكر لك هذه المبادرة المفيدة اخي feras007

لفكرة سهلة جداً وإن لم تفهم أخبرني وسأبرمجه لك .

بالفعل لقد توصلت لجزء منها سأحاول تطبيقة واذا تمكنت من ذلك سأذكر الحل هنا
واذا عجزت لن استغني عن خدماتك حبيب قلبي

[Zizwar]

أخ HnHn ماذكره لك الأخ كريم أبو العلا صواب وهي ان تعتمد على تقنية اجاكس، غير انه يمكنك الإعتماد عليها دون اللوجوء الى asp كمثال الذي وضعه لك الأخ فارس او ابحث بدلالة ajax في هذا القسم وستجد عدة شروحات و امثلة

[HnHn]

حبيب قلبي Zizwar انا اعرف هذا الكلام ولكن ما اردته شرح لكيفية عمل ذلك بصورة مبسطة وليست اقتراحات بلغة كذا او كذا ففي النهاية الاعتماد سيكون على اكواد هتميل وجافا سكريبت وما قام به الاخ فارس مشكورا هو وضعي على الطريق فانا اريد زبدة للموضوع

وتوصلت لهذا الجزء من الحل الذي يساعد في ذلك

function getHTTPObject() {
  var xmlhttp;

  if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
  }
  else if (window.ActiveXObject){
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    if (!xmlhttp){
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }

}
  return xmlhttp;


}

وانا على وشك لتوصل لكامل الحل بفضل جهودكم انشالله

[HnHn]

تمكنت من معرفة كيفية ارسال البيانات ولكن

كيف استطيع ان اعدل على هذا السكريبت لكي يقبل اكثر من حقل في عملية الارسال
وفي نفس الوقت يستطيع ملف التنفيذ المرسل له sch_run.php تجزئة هذه البيانات كحقول مستقلة لكي يتم استخدامها في جملة INSERT INTO

 


function post_method(){

var data = sample_form.HnHn_sch1.value;

request.open('post', 'sch_run.php');
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = output;
request.send('HnHn_sch1='+data);
}

[feras007]

أخي الكريم :

الحل سهل بإذن الله
أول شيء فنكشن post_method قُم بتعديله ليصبح كالتالي :

function post_method(par1,par2,...,parn)
{
http.open('POST','sch_run.php', true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = output;
http.send('HnHn_sch1='+par1+'&HnHn_sch2='+par2+'&HnHn_schn='+parn);
}

أخر سطر قُمت فيه بتمرير قيمة المتغير

$_POST['HnHn_sch1'];
$_POST['HnHn_sch2']
$_POST['HnHn_schn']; 

هل فهمت الفكرة ؟ بالمناسبة الحرف n أقصد به رقم لا على التعيين هكذا تعلمنا في المدرسة :app:
المهم هذه الفكرة .
ومساعدة صغيرة ولنفرض أنه عندك زر وعملت له onClick="post_method();"
مرر داخل القوسين قيمة المتغيرات , يعني عوضاً عن وضع قيمة المتغير data كما فعلت انت ضعها هُنا سيصبح الكود كالتالي :

onClick="post_method(sample_form.HnHn_sch1.value,sample_form.HnHn_sch2.value,sample_form.HnHn_schn.value);"

أسئل الله ان أكون وفقت .

تحياتي
فراس

[HnHn]

بسم الله الرحمن الرحيم

اخواني الكرام منذو حوالي اسبوع تقدمت بطرح هذا السؤال في

كيفية حفظ البيانات دون تحميل للصفحة بشكل كامل

وبفضل من الله ومن ثم توجيهات الاخ فراس (feras007) توصلت الى الحل بأكثر من طريقة وهي كما يلي

الاولاً : javascript

<script language="javascript">


//HnHn : لأظهار رسالة الخطأ
window.onerror = function(msg, err_url, line) {alert('HnHn Unkwon Error :) ' + line);}

//HnHn نوعية المتصفح لأنشاء شبيه له
function makeObject(){
var x;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
x = new ActiveXObject("Microsoft.XMLHTTP");
}else{
x = new XMLHttpRequest();
}
return x;
}

//HnHn : الاتصال بالوظائف
var request = makeObject();


function post_method(par1,par2,par3){
request.open('POST','sch_run.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = output;
request.send('HnHn_sch1='+par1+'&HnHn_sch2='+par2+'&HnHn_sch3='+par3);
}

</script>

ثانياً : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html">

<head>
  <title>HnHn</title>
</head>

<body>

<form action="" method="post" name="sample_form" id="sample_form">

                            <address>

                            <INPUT  type="text" name=HnHn_sch1 size="30" maxlength="50" ></address>
                            <address>

                            <INPUT  type="text" name=HnHn_sch2 size="30" maxlength="50" ></address>
                            <address>

                            <INPUT  type="text" name=HnHn_sch3 size="30" maxlength="50" ></address>
<p>

<input type="button" name="Button" value="POST" onClick="post_method(sample_form.HnHn_sch1.value,sample_form.HnHn_sch2.value
,sample_form.HnHn_sch3.value);"></p>

</form>

<br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0</div><br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0</div></body>

</html>

ثالثاً : PHP

<?php

$sch1 = $_POST['HnHn_sch1'];
$sch2 = $_POST['HnHn_sch2'];
$sch3 = $_POST['HnHn_schn'];
// HnHn : ضع الاجرء الذي تريده

  ?>

مع ملاحظة اني قمت بأستبدال

http.open
http.setRequestHeader
http.send(

بــ request

فأصبح الكود يعمل بشكل جيد

وهذا ما قمت بعمله والكود الان يعمل عال العال وشكري من جديد لك يا فراس وعسالله يكثر من امثالك

[feras007]

اخي الكريم HnHn :
أفرحتني جداً والحمدلله أن كل شيء يعمل كما تُريد , نحن هنا بالخدمة .


تحياتي
فراس

[HnHn]

ام الطريقة التي توصلت لها لكي لا اكرر الكود مرارً وهي استدعاء السكربت بالطريقة التالية


ملف السكريبت script.js

فهذا الفنكش لتحديد نوع المتصفح وانشاء الصفحة المخفية

function creaAjax(){
  var objetoAjax=false;
  try {

   objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
  
     objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (E) {
     objetoAjax = false;
   }
  }

  if (!objetoAjax && typeof XMLHttpRequest!='undefined') {
   objetoAjax = new XMLHttpRequest();
  }
  return objetoAjax;
}

 function FAjax (url,capa,valores,metodo)
{
   var ajax=creaAjax();
   var capaContenedora = document.getElementById(capa);

وهذا الفنكش عندما نريد استخدام خاصية POST

if(metodo.toUpperCase()=='POST'){
        document.write="HnHn";
    ajax.open ('POST', url, true);
    ajax.onreadystatechange = function() {
         if (ajax.readyState==1) {
                 capaContenedora.innerHTML="Cargando.......";
         }
         else if (ajax.readyState==4){
            if(ajax.status==200)
            {
                 document.getElementById(capa).innerHTML=ajax.responseText;
            }
            else if(ajax.status==404)
                 {

                     capaContenedora.innerHTML = "La direccion existe";
                 }
             else
                 {
                     capaContenedora.innerHTML = "Error: ".ajax.status;
                 }
        }
    }
    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    ajax.send(valores);
    return;
}

وهذا الفنكش عندما نريد استخدام خاصية GET

if (metodo.toUpperCase()=='GET'){

    ajax.open ('GET', url, true);
    ajax.onreadystatechange = function() {
         if (ajax.readyState==1) {
                 capaContenedora.innerHTML="Cargando.......";
         }
         else if (ajax.readyState==4){
            if(ajax.status==200){
                 document.getElementById(capa).innerHTML=ajax.responseText;
            }
            else if(ajax.status==404)
                 {

                     capaContenedora.innerHTML = "La direccion existe";
                 }
                 else
                 {
                     capaContenedora.innerHTML = "Error: ".ajax.status;
                 }
        }
    }
    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    ajax.send(null);
    return
}
}

ليصبح الكود في ملف السكريبت بالشكل التالي

function creaAjax(){
  var objetoAjax=false;
  try {

   objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
 
     objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (E) {
     objetoAjax = false;
   }
  }

  if (!objetoAjax && typeof XMLHttpRequest!='undefined') {
   objetoAjax = new XMLHttpRequest();
  }
  return objetoAjax;
}

 function FAjax (url,capa,valores,metodo)
{
   var ajax=creaAjax();
   var capaContenedora = document.getElementById(capa);


 if(metodo.toUpperCase()=='POST'){
        document.write="HnHn";
    ajax.open ('POST', url, true);
    ajax.onreadystatechange = function() {
         if (ajax.readyState==1) {
                 capaContenedora.innerHTML="Cargando.......";
         }
         else if (ajax.readyState==4){
            if(ajax.status==200)
            {
                 document.getElementById(capa).innerHTML=ajax.responseText;
            }
            else if(ajax.status==404)
                 {

                     capaContenedora.innerHTML = "La direccion existe";
                 }
             else
                 {
                     capaContenedora.innerHTML = "Error: ".ajax.status;
                 }
        }
    }
    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    ajax.send(valores);
    return;
}

if (metodo.toUpperCase()=='GET'){

    ajax.open ('GET', url, true);
    ajax.onreadystatechange = function() {
         if (ajax.readyState==1) {
                 capaContenedora.innerHTML="Cargando.......";
         }
         else if (ajax.readyState==4){
            if(ajax.status==200){
                 document.getElementById(capa).innerHTML=ajax.responseText;
            }
            else if(ajax.status==404)
                 {

                     capaContenedora.innerHTML = "La direccion existe";
                 }
                 else
                 {
                     capaContenedora.innerHTML = "Error: ".ajax.status;
                 }
        }
    }
    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    ajax.send(null);
    return
}
}

ونستدعي هذا الملف في صفحة HTML بالشكل التالي

<script type="text/javascript" src="script.js"></script>

وفي خاصية Form سنضع عملية الارسال بالشكل التالي

<form method="post" onsubmit="HnHn('sch_run.php'
'HnHn_sch1='+document.getElementById('HnHn_sch1').value+'&amp;HnHn_sch2='+document.getElementById('HnHn_sch2').value
+'&amp;HnHn_sch3='+document.getElementById('HnHn_sch3').value,'POST'); return false" action="#">

ليصبح الكود في النهاية بهذا الشكل

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html">
<script type="text/javascript" src="script.js"></script>
<head>
  <title>HnHn</title>
</head>

<body>

<form method="post" onsubmit="HnHn('sch_run.php'
'HnHn_sch1='+document.getElementById('HnHn_sch1').value+'&amp;HnHn_sch2='+document.getElementById('HnHn_sch2').value
+'&amp;HnHn_sch3='+document.getElementById('HnHn_sch3').value,'POST'); return false" action="#">

                            <address>

                            <INPUT  type="text" name=HnHn_sch1 size="30" maxlength="50" ></address>
                            <address>

                            <INPUT  type="text" name=HnHn_sch2 size="30" maxlength="50" ></address>
                            <address>

                            <INPUT  type="text" name=HnHn_sch3 size="30" maxlength="50" ></address>

<p>
 <input type="button" name="Button" value="POST"">

</form

هذا ما مله علي ضمير كرد جميل لهذا المنتدى الذي افادني في التوصل للمعلومة وعلى رأس هذا المنتدى اعضاءه الكرام وبالاخص من ساهم في توصلي للحل الاخ فراس


وشكرا لكم
اخوكم / هاني الشايب

[HnHn]

بقي امر اخير ليكتمل كل هذا وهو ظهور رسالة

بأن البيانات تم ارسالها او حفظت مهما كانت العملية في الملف المرسل

window.alert("تم الحفظ ");

[حمد مبارك]

السلام عليكم

اخوي HnHn يعطيك العافيه بس ممكن تقولي فيه امر حق تحميل الملفات يعني File ؟؟

وشكراً لكم

أخوكم حمد