متد Get و متد Post در Ajax و رفع Conflict

در آخرین قسمت از مباحث تکمیلی در jQuery ابتدا با متد Get و متد Post در Ajax آشنا می شوید و سپس به طریقه برطرف کردن کردن conflict در jQuery می پردازیم.

متدهای ()get.$ و ()post.$ در jQuery

متدهای ()get.$ و ()post.$ در jQuery ابزارهایی را فراهم کرده اند که به کمک آن ها می توانید به ارسال داده به یک وب سرور یا دریافت داده از آن به صورت همزمان اقدام کنید. هر دو متد تقریبا یکسان هستند، با این تفاوت که ()get.$ درخواست های Ajax را با استفاده از روش HTTP GET انجام می دهد و متد ()post.$ از روش HTTP POST بهره می برد.

ساختار پایه این متدها در زیر آمده است:

$.get(URL, data, success);   —Or—   $.post(URL, data, success);

پارامترهای مختلفی که در ساختار بالا آمده اند، به شرح زیر می باشند:

پارامتر URL در ساختار بالا همان آدرس یا URL است که درخواست به آن جا فرستاده می شود.
پارامتر اختیاری data در ساختار بالا رشته ای از داده ها (به صورت جفت مقدار/کلید) را همراه با درخواست به سرور می فرستد.
پارامتر اختیاری success در ساختار بالا در واقع یک تابع callback است، که در هنگام موفق بودن درخواست، اجرا می گردد و اغلب به جهت دریافت اطلاعات بازگشتی از سرور استفاده می گردد.

نکته: متدهای GET و POST در HTTP هر دو جهت ارسال دیتا از یک مرورگر به سرور استفاده می شوند. تفاوت در شیوه این انتقال است.

اجرای درخواست Get با استفاده از Ajax در jQuery

کد مثال زیر از متد ()get.$ در jQuery جهت ارسال یک درخواست Ajax به فایل "data-time.php" استفاده می کند. این مثال تاریخ و زمان درخواست شده را می گیرد و آن را بدون رفرش شدن مجدد مروگر نشان می دهد:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("date-time.php", function(data){
            // Display the returned data in browser
            $("#result").html(data);
        });
    });
});
</script>
</head>
<body>
    <div id="result">
        <h2>Content of the result DIV box will be replaced by the server date and time</h2>
    </div>
    <button type="button">Load Date and Time</button>
</body>
</html>

حالا در کد زیر، آن چه را در فایل date-time.php قرار دارد، ملاحظه می کنید که این کد، زمان کنونی سرور را نشان می دهد:

<?php
// Return current date and time from the server
echo date("F d, Y h:i:s A");
?>

نکته: اگر در رابطه با بارگذاری کدهای این مثال به مشکلی برخوردید، حتما به مقاله قبلی که به مکانیزم Ajax Loading در jQuery می پرداخت، سری بزنید.

همچنین می توانید اطلاعاتی را همراه با درخواست به سرور ارسال کنید. در مثال زیر، کد jQuery یک درخواست Ajax را به create-table.php می فرستد و به این درخواست یک سری اطلاعات دیگری را نیز اضافه می کند:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        // Get value from input element on the page
        var numValue = $("#num").val();
        
        // Send the input data to the server using get
        $.get("create-table.php", {number: numValue} , function(data){
            // Display the returned data in browser
            $("#result").html(data);
        });
    });
});
</script>
</head>
<body>
    <label>Enter a Number: <input type="text" id="num"></label>
    <button type="button">Show Multiplication Table</button>
    <div id="result"></div>
</body>
</html>

حالا در اسکریپت زیر کد فایل create-table.php را مشاهده خواهید کردید که یک جدول ضرب را برای عددی که توسط کاربر و با کلیک روی دکمه ارسال می شود، نمایش می دهد:

<?php
$number = htmlspecialchars($_GET["number"]);
if(is_numeric($number) && $number > 0){
    echo "";
    for($i=0; $i<11; $i++){
        echo "";
            echo "";
            echo "";
            echo "";
        echo "";
    }
    echo "$number x $i=" . $number * $i . "";
}
?>

اجرای درخواست Post با استفاده از Ajax در jQuery

درخواست های Post همسان با درخواست های Get در jQuery هستند و در واقع به این بستگی دارد که سمت سرور چه نیازمندی هایی دارد. اگر قرار است مقدار زیادی از اطلاعات انتقال پیدا کنند از متد Post در Ajax و در واقع متد ()post.$ استفاده می کنیم، زیرا درخواست های Get و در واقع استفاده از متد ()get.$ حد دقیق و خاصی از اطلاعات برای انتقال را مدنظر قرار می دهند:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery post() Demo</title>
<script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("form").submit(function(event){
        // Stop form from submitting normally
        event.preventDefault();
        
        /* Serialize the submitted form control values to be sent to the web server with the request */
        var formValues = $(this).serialize();
        
        // Send the form data using post
        $.post("display-comment.php", formValues, function(data){
            // Display the returned data in browser
            $("#result").html(data);
        });
    });
});
</script>
</head>
<body>
    <form>
        <label>Name: <input type="text" name="name"></label>
        <label>Comment: <textarea cols="50" name="comment"></textarea></label>
        <input type="submit" value="Send">
    </form>
    <div id="result"></div>
</body>
</html>

در زیر کد فایل display-comment.php را مشاهده می کنید که به سادگی اطلاعات وارد شده توسط کاربر را نمایش می دهد:

<?php
$name = htmlspecialchars($_POST["name"]);
$comment = htmlspecialchars($_POST["comment"]);
echo "Hi, $name. Your comment has been received successfully." . "";
echo "Here's the comment what you've entered: $comment";
?>

به عنوان آخرین مبحث باقی مانده به سراغ رفع conflict در jQuery می رویم.

conflict در ترجمه فارسی به معنای تصادم و تعارض است و ما در اینجا راجع به این مشکل بحث می کنیم که چطور بین کدهای jQuery و سایر کتابخانه های جاوا اسکریپتی از conflict پرهیز کنیم و یا به بیانی دیگر آن را رفع کنیم.

استفاده از jQuery در کنار سایر کتابخانه های جاوا اسکریپت

همان طور که می دانید jQuery از علامت دلار ($) که به نوعی به جای خود کلمه jQuery است، استفاده می کند. حالا شما فرض کنید که از یک کتابخانه دیگری از جاوا اسکریپت نیز استفاده می کنید که آن کتایخانه هم از $ بهره می برد. اگر بخواهید کد jQuery و آن کتابخانه را هر دو در یک صفحه بنویسید، بین کدهای این دو کتابخانه جاوا اسکریپتی، conflict حاصل می گردد. خوشبختانه jQuery راهی را تحت عنوان ()noConflict برای اینچنین موقعیت هایی فراهم کرده است.

متد ()noConflict در jQuery

متد ()jQuery.noConflict کنترل علامت $ را به سایر کتابخانه بازمی گرداند. برای مثال در کد زیر در خط 10ام، jQuery را در حالت noConflict قرار می دهد که فورا بعد از آن با مقدار گرفتن متغیر j$، این متغیر علامت $ برای jQuery را نمایندگی می کند و از این پس می توان از آن استفاده کرد. این کار جهت جلوگیری از conflict هنگام استفاده از دیگر کتابخانه ها کاربرد دارد:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jQuery.js"></script>
<script>
// Defining the new alias for jQuery
var $j = jQuery.noConflict();
$j(document).ready(function(){
    // Display an alert message when the element with ID foo is clicked
    $j("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // Display an alert message when the element with ID bar is clicked
    $("bar").observe("click", function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

نکته: بسیاری از کتابخانه های جاوا اسکریپت مانند jQuery از $ به عنوان نام متغیر یا یک تابع استفاده می کنند. از این بین می توان به کتابخانه هایی مانند mootools ،prototype ،zepto و... اشاره کرد.

اما با همه مطالبی که در بالا به آن ها اشاره شد، اگر باز می خواهید از $ استفاده کنید، مثلا به این دلیل که به آن عادت کرده اید یا کار کردن با آن و نوشتنش سریع تر است، می توانید جهت جلوگیری از conflict آرگومان $ را به ()jQuery(document).ready بفرستید. مانند کد زیر:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jQuery.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
    // The dollar sign in here work as an alias to jQuery
    $("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // The dollar sign in the global scope refer to prototype
    $("bar").observe("click", function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

وارد jQuery قبل از بقیه کتابخانه ها

همه موارد بررسی شده در بالا بر این اساس بود که کتابخانه jQuery بعد از سایر کتابخانه ها در صفحه وارد شود و اما حالا فرض کنید که prototype بعد از jQuery بارگذاری شود. در این صورت باید از عنوان کامل "jQuery" به جای $ استفاده کنید. همچنین جهت جلوگیری از conflict باید تابع ()jQuery.noConflict را نیز صدا بزنید اما در این روش $ همان معنی ای را دارد که در کتابخانه دیگر تعریف شده است:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/jQuery.js"></script>
<script src="js/prototype.js"></script>
<script>
jQuery(document).ready(function($){
    // Use full jQuery function name to reference jQuery
    jQuery("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // The dollar sign here will have the meaning defined in prototype
    $("bar").observe("click", function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

محمد

20 مرداد 1400

سلام برای زمانی که اطلاعات پست میکنیم و قراره فامگشن دیتارو اجرا کنیم اگه اون مقداری که داخل فایلphpبرای خروجی echo نباشه و متغیر باشه لین طرف اون فانگشن دیتا چجوری باید اون متغیرو دریاف کنه