29
تشکر

آموزش کار با ajax بخش دوم

آموزش کار با ajax

آموزش کار با ajax

این مطلب در دسته بندی مطالب جی کوئری است. جی کوئری را در اینجا دنبال کنید.

ما در مطلب آموزش کار با ajax نحوه کار با ajax را به صورت کامل توضیح دادیم و در آن مطلب قول دادیم که نحوه کار فرستادن درخواست به توابع PHP و گرفتن پاسخ از طریق ajax را با هم بررسی کنیم.

توصیه میکنم که اگر مطلب مطلب قبل را نخوانید ابتدا آن را مطالعه کنید.

خب ابتدا صفحه ای به نام index.php درست کرده و کدهای زیر را درون آن قرار میدهیم.

<!DOCTYPE html>
<html>
<head>
    <title>آموزش کار با ajax</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>Save your data in database with ajax</h1>
    <form id="save_data" action="save_data.php">
        <p>
            <label>Username:</label>
            <input type="text" name="username" />
        </p>
        <p>
            <label>Password</label>
            <input type="password" name="password" />
        </p>
        <p>
            <input type="submit" value="Send" />
        </p>
    </form>
</body>
</html>

ما در این صفحه میخواهیم از کاربر نام کاربری و پسورد را بگیریم و این اطلاعات را بوسیله ajax به صفحه مربوطه بفرستیم و جواب را بگیریم. خب کد بالا فرم ورود ما را درست میکند.

در مرحله بعدی کدهای زیر را در پایین تگ script قرار میدهیم.

<script type="text/javascript">
    $(document).ready(function(){
        $("#save_data").submit(function(){
            var $action=$(this).attr("action");
            var $username=$('input[name=username]',this).val();
            var $password=$('input[name=password]',this).val();
            $.post($action , {username: $username , password: $password})
            .done(function(data){
                alert(data);
            }).fail(function(){
                alert("Error");
            })
				
            return false;
        })
    })
</script>

در خط سوم ما تابعی را ایجاد کردیم که زمانی که کاربر فرم را Submit کرد این تابع فراخوانی میشود.

در خط چهارم ما مقدار action فرم را گرفته و در متغیر مربوطه قرار میدهیم.

در خط پنجم و ششم ما مقدارهای فیلدهای username و password فرم را گرفته و در متغیرهای مربوطه قرار میدهیم.

در خط هفتم ما یک تابع ajax با متد Post را ایجاد کردیم شما میتوانید به جای کلمه post از get هم استفاده کنید. فرقی در نحوه استفاده از تابع ندارد. این تابع دو آرگومان دارد. آرگومان اول که آدرس صفحه را میگیرد که ما $action را دادیم. و در آرگومان بعدی اطلاعات ارسالی را از ما میگیرد که ما $username و $password را دادیم.

خط هشتم زمانی اجرا میشود که ajax بالا به درستی اجرا شده باشد.

در خط نهم ما اطلاعات دریافتی از صفحه save_data.php را به کاربر نمایش میدهیم.

خط دهم هم زمانی اجرا میشود که تابع ajax به درستی اجرا نشده باشد.

خب حالا ما در صفحه save_data.php چگونه اطلاعات را به index.php برسانیم. براحتی!!

<?php
    $username=$_REQUEST&#91;'username'&#93;;
    $password=$_REQUEST&#91;'password'&#93;;
    
    echo "user: " . $username . " and pass: " . $password;
?>

در صفحه save_data.php رفته و کدهای زیر را قرار میدهیم.

همانطور که میبینید ما با استفاده از دستور echo میتوانیم نتیجه را به کاربر نمایش دهیم.

برای درک بهتر این مطلب توصیه میکنم فایل های زیر را دانلود کنید.

دانلود

  • تصفیه هوا می‌گه:

    خیلی عالی بود واقعا دستتون درد نکنه

  • قیمت خودرو می‌گه:

    پاینده و سربلند باشید

  • کاناپه بادی می‌گه:

    عالی بود ممنونم

  • رژیم لاغری می‌گه:

    عالی بود ادامه بدید
    خیلی ممنونیم

  • تصفیه آب می‌گه:

    عالی بود کاش آموزش ویدئویی هم می زاشتید بازم ممنون

  • me می‌گه:

    سلام با تشکر از شما
    ممنون میشم اگر سوال من رو جواب بدهید
    اگر بخواهیم اطلاعات در همان صفحه نمایش داده نشوند بلکه در یک صفحه جدید چاپ شوند باید چکار کرد؟

  • قایق بادی می‌گه:

    خیلی ممنون تشکر میکنم

  • طراحی سایت می‌گه:

    فوق العاده بود خیلی ممنون تشکر


  • نظرات این مطلب بسته است.