/
  • آموزش Ajax از ابتدا

  • صفحه‌ها (6):
  • ارسال پاسخ   امتیاز موضوع:
    • 10 رأی - میانگین امیتازات: 4.5
    • 1
    • 2
    • 3
    • 4
    • 5

    حالت موضوعی | حالت خطی آموزش Ajax از ابتدا
    نویسنده پیام
    evergreen آفلاین
    همیشه سبز
    **

    ارسال‌ها: 24
    تاریخ عضویت: ۱۳۹۱ خرداد ۳
    اعتبار: 0
    تشکرها : 1
    ( 0 تشکر در 0 ارسال )
    ارسال: #51
    RE: آموزش Ajax از ابتدا
    ممنونم تستش میکتم البته من برنامشو ننوشتم ولی تست که کردم این ایرادو دیدم گفتم برطرفش کنیم .
    ۱۳۹۱ خرداد ۵ ۱۰:۰۶ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    evergreen آفلاین
    همیشه سبز
    **

    ارسال‌ها: 24
    تاریخ عضویت: ۱۳۹۱ خرداد ۳
    اعتبار: 0
    تشکرها : 1
    ( 0 تشکر در 0 ارسال )
    ارسال: #52
    Wink RE: آموزش Ajax از ابتدا
    آقا با کمی کلنجار حلش کردم

    که از این قراره

    در قسمت کلاینت :


    کد PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    titleADD BY AJAX </title>
    <
    script type="text/javascript">
    //اجاکس , ایجکس , اژاکس ,AJAX 
    function add(name,family,code)
    {
        
    tbody=document.getElementById('students').getElementsByTagName('TBODY')[0];
        var 
    row=document.createElement('TR');
        
    row.setAttribute("id","tr",name);
        var 
    td1=document.createElement('TD');
        
    td1.innerHTML=name;
        var 
    td2=document.createElement('TD');
        
    td2.innerHTML=family;
        var 
    td3=document.createElement('TD');
        
    td3.innerHTML=code;
        
    row.appendChild(td1);
        
    row.appendChild(td2);
        
    row.appendChild(td3);
        
    tbody.appendChild(row);
    }
    //اجاکس , ایجکس , اژاکس ,AJAX 
    function GetXmlHttpObject()
    {
        var 
    xmlHttp=null;
        try
         {
         
    // Firefox, Opera 8.0+, Safari
         
    xmlHttp=new XMLHttpRequest();
         }
        catch (
    e)
         {
         
    //Internet Explorer
         
    try
          {
          
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
         catch (
    e)
          {
          
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
         }
        return 
    xmlHttp;


    function $(
    id){return document.getElementById(id)}

    function 
    sendToServer()

      
    xmlHttp=GetXmlHttpObject();
      if (
    xmlHttp==null)
      {
        
    alert ("Browser does not support HTTP Request");
        return;
      }

      
    url='index_student.php?name='+encodeURIComponent($('name').value)+'&family='+encodeURIComponent($('family').value)+'&code='+$('code').value;


      
    xmlHttp.open("GET",url,true);
      
    xmlHttp.onreadystatechange=stateChanged;
      
    xmlHttp.send(null);

    }
    function 
    stateChanged() 

    if (
    xmlHttp.readyState==|| xmlHttp.readyState=="complete")
     { 
     
    //alert(xmlHttp.responseText);
        
    if (xmlHttp.responseText!='1')
        {    
            
    //alert(xmlHttp.innerHTML);
            
    table = new String(document.getElementById("students").innerHTML);
    //table = table.replace(table, "</table>", xmlHttp.responseText + "</table>");
    table table.substr(0table.length-8);
    table table xmlHttp.responseText '</table>';
    document.getElementById("students").innerHTML "<table id='students' width='200' border='1' dir='rtl'>" xmlHttp.responseText'</table>';//table;
            //add($('name').value,$('family').value,$('code').value);
        
    }
        else{
            
    alert("Error in connect to server");
        
        }
        
      } 


    </script>
    </head>

    <body>
    <div id="std"></div><br>
    <table id='students' width="200" border="1" dir="rtl">
      <tr>
        <td>نام </td>
        <td>نام خانوادگی</td>
        <td>شماره دانشجو</td>
      </tr>

    </table>
    <!-- <form action="index_student.php" method="get" > -->
    <table width="400" border="0">
      <tr>
        <td>نام</td>
        <td><input type="text" id="name" /></td>
     </tr>
     <tr>
        <td> نام خانوادگی</td>
        <td><input type="text" id="family" /></td>
     </tr>
     <tr>
        <td>شماره دانشجویی</td>
        <td><input type="text" id="code" /></td>
      </tr>
     <tr>
         <td>&nbsp;</td>
        <td><input type="button" value="ارسال" onclick="sendToServer()"/></td>
        <td><input type="button" value="ساخت" onclick="add('hossein','jalili','8808621609')"/></td>

      </tr>
    </table>
    <!-- </form> -->
    </body>
    </html> 

    و قسمت سرور هم :

    کد PHP:
    <?php //اجاکس , ایجکس , اژاکس ,AJAX 
        
    $con=mysql_connect('localhost','root','');
        
    $db=mysql_select_db('ajax',$con);
        
    mysql_query("set names 'utf8'");
        
    $q="INSERT INTO `ajax`.`students` (
    `id` ,
    `name` ,
    `family` ,
    `code` 
    )
    VALUES (NULL , '"
    .$_GET['name']."', '".$_GET['family']."', '".$_GET['code']."')";

        
    mysql_query($q);
        
    //echo $query;
        
    $Lid mysql_insert_id(); 
        
    $sql="SELECT *  FROM `students` WHERE id=$Lid";

    //اجاکس , ایجکس , اژاکس ,AJAX 
         
    $con=mysql_connect('localhost','root','');
        
    $db=mysql_select_db('ajax',$con);
        
    mysql_query("set names 'utf8'");
        
    $q="SELECT * FROM `students` ";
        
    $query=mysql_query($q);
        
    //echo mysql_fetch_array($query);die();
        
    while($row=mysql_fetch_array($query))
        {
            
    $name=$row['name'];
            
    $family=$row['family'];
            
    $code=$row['code'];
            echo 
    "    <tr>
                        <td>
    $name </td>
                        <td>
    $family</td>
                        <td>
    $code</td>
                      </tr>"
    ;
        }
    ?>

    حال اگر هم بخواهیم فقط با جدول کار کنیم برای حذف و اضافه :
    Add / remove table row. javascript


    کد PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <
    html xmlns="http://www.w3.org/1999/xhtml">
        <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <
    title>Untitled Document</title>
        <
    script type="text/javascript">
        function 
    addRowToTable()
        {
        var 
    tbl document.getElementById('tblSample');
        var 
    lastRow tbl.rows.length;
        
    // if there's no header row in the table, then iteration = lastRow + 1
        
    var iteration lastRow;
        var 
    row tbl.insertRow(lastRow);
        
    // left cell
        
    var cellLeft row.insertCell(0);
        var 
    textNode document.createTextNode(iteration);
        
    cellLeft.appendChild(textNode);
        
    // right cell
        
    var cellRight row.insertCell(1);
        var 
    el document.createElement('input');
        
    el.type 'text';
        
    el.name 'txtRow' iteration;
        
    el.id 'txtRow' iteration;
        
    el.size 40;
        
    el.onkeypress keyPressTest;
        
    cellRight.appendChild(el);
        
    // select cell
        
    var cellRightSel row.insertCell(2);
        var 
    sel document.createElement('select');
        
    sel.name 'selRow' iteration;
        
    sel.options[0] = new Option('text zero''value0');
        
    sel.options[1] = new Option('text one''value1');
        
    cellRightSel.appendChild(sel);
        }
        function 
    keyPressTest(eobj)
        {
        var 
    validateChkb document.getElementById('chkValidateOnKeyPress');
        if (
    validateChkb.checked) {
        var 
    displayObj document.getElementById('spanOutput');
        var 
    key;
        if(
    window.event) {
        
    key window.event.keyCode;
        }
        else if(
    e.which) {
        
    key e.which;
        }
        var 
    objId;
        if (
    obj != null) {
        
    objId obj.id;
        } else {
        
    objId this.id;
        }
        
    displayObj.innerHTML objId ' : ' String.fromCharCode(key);
        }
        }
        function 
    removeRowFromTable()
        {
        var 
    tbl document.getElementById('tblSample');
        var 
    lastRow tbl.rows.length;
        if (
    lastRow 2tbl.deleteRow(lastRow 1);
        }
        function 
    openInNewWindow(frm)
        {
        
    // open a blank window
        
    var aWindow window.open('''TableAddRowNewWindow',
        
    'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
        
    // set the target to the blank window
        
    frm.target 'TableAddRowNewWindow';
        
    // submit
        
    frm.submit();
        }
        function 
    validateRow(frm)
        {
        var 
    chkb document.getElementById('chkValidate');
        if (
    chkb.checked) {
        var 
    tbl document.getElementById('tblSample');
        var 
    lastRow tbl.rows.length 1;
        var 
    i;
        for (
    i=1i<=lastRowi++) {
        var 
    aRow document.getElementById('txtRow' i);
        if (
    aRow.value.length <= 0) {
        
    alert('Row ' ' is empty');
        return;
        }
        }
        }
        
    openInNewWindow(frm);
        }
        
    </script>
        </head>
        <body>
        <form action="tableaddrow_nw.html" method="get">
        <p>
        <input type="button" value="Add" onclick="addRowToTable();" />
        <input type="button" value="Remove" onclick="removeRowFromTable();" />
        <input type="button" value="Submit" onclick="validateRow(this.form);" />
        <input type="checkbox" id="chkValidate" /> Validate Submit
        </p>
        <p>
        <input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress
        <span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
        </p>
        <table border="1" id="tblSample">
        <tr>
        <th colspan="3">Sample table</th>
        </tr>
        <tr>
        <td>1</td>
        <td><input type="text" name="txtRow1"
        id="txtRow1" size="40" onkeypress="keyPressTest(event, this);" /></td>
        <td>
        <select name="selRow0">
        <option value="value0">text zero</option>
        <option value="value1">text one</option>
        </select>
        </td>
        </tr>
        </table>
        </form>
        </body>
        </html> 
    از تمامی بچه ها هم ممنونم
    (آخرین ویرایش در این ارسال: ۱۳۹۱ خرداد ۶ ۱۰:۱۷ عصر، توسط evergreen.)
    ۱۳۹۱ خرداد ۶ ۱۰:۱۴ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    reza_t آفلاین
    عضو جدید
    **

    ارسال‌ها: 26
    تاریخ عضویت: ۱۳۹۱ آبان ۱۴
    اعتبار: 0
    تشکرها : 10
    ( 1 تشکر در 1 ارسال )
    ارسال: #53
    RE: آموزش Ajax از ابتدا
    سلام
    اگه میشه من رو راهنمایی کنین
    به مثال توجه کنید
    یک فرم با سه تا فیلد
    فیلد نام
    فیلد نا خانوادگی
    فیلد عکس (یه لینک برای انتخاب عکس از هاست)
    زمانی که روی لینک انتخاب عکس کلیک میکنم یه Dialog box باز میشه که یک منیجر عکس داخلش تعبیه شده
    زمانی که روی یک عکس کلیک میکنم آدرس اون عکس از طریق دستور زیر به فرم ارسال میشه
    کد PHP:
    form.php?pic=$address 
    و صفحه form.php رفرش میشه و از طریق دستور $_GET آدرس عکس دریافت میکنه و در فیلد عکس قرار میده
    من میخوام یه دستوری بنویسم که بدون اینکه صفحه بخواد رفرش بشه و فیلدهای دیگه پاک بشه اون ادرس رو در فیلد عکس قرار بدم
    در ضمن من خیلی با Ajax آشنا نیستم
    اگه میشه یجوری منو راه بندازین
    خیلی ممنون
    __________________________________________________________________________
    بالاتر از php وجود نداره ("دکتر شریعتی")Heart
    ۱۳۹۱ بهمن ۱۴ ۰۸:۱۳ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    dino آفلاین
    عضو جدید
    **

    ارسال‌ها: 25
    تاریخ عضویت: ۱۳۹۲ خرداد ۱۴
    اعتبار: 0
    تشکرها : 4
    ( 0 تشکر در 0 ارسال )
    ارسال: #54
    RE: آموزش Ajax از ابتدا
    (۱۳۸۸ تير ۸ ۱۰:۰۷ صبح)php نوشته شده توسط:  
    عملیات سمت سرور

    این برنامه ajax هم دیگه داره تموم میشه و فقط مونده عملیات سمت سرور .

    کد PHP:
    <?php
    //اجاکس , ایجکس , اژاکس ,AJAX     
        
    $con=mysql_connect('localhost','root','');
        
    $db=mysql_select_db('ajax',$con);

        
    $sql="INSERT INTO `ajax`.`users` (
    `id` ,
    `name` ,
    `family` ,
    `user` ,
    `pass` ,
    `tell` 
    )
    VALUES (
    NULL
    , '"
    .$_POST['name']."'
    , '"
    .$_POST['family']."'
    , '"
    .$_POST['user']."'
    , MD5( '"
    .$_POST['pass']."' )
    , '"
    .$_POST['tell']."' )";


        
    //echo($sql);
        
    $result=mysql_query($sql);
        echo(
    $result);
    ?>

    حالا در سمت سرور داها را رو ما به صورت post داریم . تنها کاری که باید بکنیم اتصال به بانک اطلاعاتی و نوشتن یک کوئری برای ذخیره دادها در بانک اطلاعاتیمون و برگردوندن نتیجه اون (در صورت ثبت درست مقدار 1 برمی گردونه) و در اخر هم این نتیجه رو چاپ کردیم که این نتیجه رو در سمت کلاینت هم داشته باشیم و در سمت کلاینت توسط تابع stateChanged در صورت اینکه جواب برگشتی از سمت سرور برابر باشه در صفحه پیام success رو نمایش میدیم .

    قبل از هر چیز ازتون خیلی ممنونم واقعا عالی بود
    ولی من که اجرا کردم به جای success عدد یک رو نشون میداد
    اگه بخوایم به جای success ی عکس نمایش داده بشه باید چیکار کرد؟
    ۱۳۹۲ خرداد ۱۸ ۱۲:۱۱ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    ebiramrb آفلاین
    عضو جدید
    **

    ارسال‌ها: 5
    تاریخ عضویت: ۱۳۹۲ شهريور ۳۰
    اعتبار: 0
    تشکرها : 0
    ( 0 تشکر در 0 ارسال )
    ارسال: #55
    RE: آموزش Ajax از ابتدا
    خیلی کامل و خوب ، ممنونم از شما
    __________________________________________________________________________
    طراحی سایت ارزان طراحی سایت تبلیعاتی سئو طراحی سایت
    ۱۳۹۲ شهريور ۳۰ ۰۳:۰۶ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    آگرین آفلاین
    عضو جدید
    **

    ارسال‌ها: 8
    تاریخ عضویت: ۱۳۹۳ مهر ۲۶
    اعتبار: 0
    تشکرها : 6
    ( 0 تشکر در 0 ارسال )
    ارسال: #56
    RE: آموزش Ajax از ابتدا
    سلام .با تشکر از آموزشتون. میشه لطف کنید و فایل این پروژه و بزارید.ممنون.
    ۱۳۹۳ آبان ۲۰ ۱۲:۰۶ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    nilofar آفلاین
    عضو جدید
    **

    ارسال‌ها: 1
    تاریخ عضویت: ۱۳۹۳ مرداد ۱۲
    اعتبار: 0
    تشکرها : 0
    ( 0 تشکر در 0 ارسال )
    ارسال: #57
    RE: آموزش Ajax از ابتدا
    سلام خسته نباشد من یه صفحه لاگین ومدیریت طراحی کردم که اخبار وکاربرها را مدیریت میکند چکارکنم که وقتی روی دکمه ارسال پیام کلیک می کنم صفحه رفرش نشه وبه صفحه قبلش نره توروخدا راهنمایی کنید خیلی مهمه
    ۱۳۹۳ دي ۱۲ ۰۶:۳۱ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    php آفلاین
    hossein
    ****

    ارسال‌ها: 632
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #58
    RE: آموزش Ajax از ابتدا
    در خواست رو باید با جاوااسکریپت برای سرور ارسال کنی ، نمونه های اولیش در ابتدای همین صفحه است . البته این موارد یکمی قدیمی شده ، راه حل راحت تر استفاده از jqury و فریم ورک های مثل اون هست
    یه جستجو بکن تابع ajax در jquery کار رو خیلی راحت کرده
    __________________________________________________________________________
    ۱۳۹۳ دي ۱۶ ۰۴:۰۶ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط :
    Null آفلاین
    عضو جدید
    **

    ارسال‌ها: 49
    تاریخ عضویت: ۱۳۸۹ فروردين ۱۹
    اعتبار: 2
    تشکرها : 132
    ( 21 تشکر در 14 ارسال )
    ارسال: #59
    RE: آموزش Ajax از ابتدا
    ادامه نمیدید؟ Huh
    ۱۳۹۵ مهر ۶ ۰۴:۲۹ صبح
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : Y.P.Y
    « قدیمی تر | تازه‌ تر »

  • صفحه‌ها (6):
  • ارسال پاسخ
    پرش به انجمن:


    کاربرانِ درحال بازدید از این موضوع: 1 مهمان
    IranPHP.org | تماس با ما | بازگشت به بالا | بازگشت به محتوا | بایگانی | پیوند سایتی RSS