ارسال داده با ajax و jquery

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

 

 

کد html که قصد داریم محتویات فیلد ها رو سمت سرور بفرستیم

<input type="text" id="name"><br>
<input type="text" id="last"><br>
<button id="show">SEND</button>

<div id="tables"> </div>

 

 

همونطور که میدونین js با id المان ها سر و کار داره،

کد jquery:

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


    <script type="text/javascript">

        $(document).ready(function (e) {
            $("#show").click(function (e) {
                var name = $("#name").val();
                var last = $("#last").val();
                $.ajax({
                    url: 'show.php',
                    type: 'GET',
                    data: {"name": name, "last": last},
                    success: function (data,status)
                    {
                        alert(status);
                        $("#tables").html(data);
                    }
                });
            });
        });

            </script>

 

در کد بالا متغیر های name و last رو مقدار دادیم و در متد $.ajax به ترتیب آدرس صفحه مقصد، نوع ارسال اطلاعات و داده هایی که باید ارسال بشه رو مشخص کردیم.

در نهایت تابع رو تعریف کردیم که ارگومان اولش اطلاعات برگشت داده شده و ارگومان دوم(اختیاری) نتیجه اجرای ایجکس (موفقیت آمیز یا عدم موفقیت) رو برمیگردونه.

در اینجا ما فقط برای حالتی که ایجکس به درستی کار کرد(success:) تابع تعریف کردیم، پس مقداد status اگر نشون داده بشه همیشه برابر seccess هست. برای شرایطی که ایجکس به درستی کار نکرد میتونید لیبل error رو تعریف کنید. (آخرین مثال صفحه)

 

و در نهایت کد php:
(show.php)

    $name = $_GET['name'];
    $last = $_GET['last'];
echo 'welcome' . "$name $last";

 

 

سایر نمونه کد های ایجکس

 

$.post( "test.php", { name: "John", time: "2pm" } );

 

$(selector).load(URL,data,callback);

 

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
});
 

 

$(document).ready(function(){

$('#btn').click(function() {
        var mystr = 'this is a string';
        alert('1');
        $.ajax({
            url: './example.php',
            type: 'GET',
            data: {
                "str": mystr
            },
            success: function(data, s) {
                alert('down.' + data);
            },

            error: function(err) {
                alert('Error: ' + err.status + ' ' + err.statusText);
            }

        })
    })
})