ورود / ثبت نام
0
0

ارسال پارامترها به WebMethod در فراخوانی jQuery Ajax POST

437 بازدید
jQuery Ajax POST

jQuery Ajax POST

در این مقاله با یک مثال نشان می دهیم که چگونه در فراخوانی jQuery Ajax POST پارامترها را به WebMethod ارسال کنیم.

معمولا افراد زمانی که چندین پارامتر برای ارسال دارند، در فراخوانی jQuery Ajax POST به WebMethod با مشکل مواجه می شوند و به دلیل خطای گرامری WebMethod فراخوانی نمی شود.

از این رو در این مقاله، با یک روش نوآورانه نشان می دهیم که با استفاده از شیء JSON و متد JSON2Stringify به راحتی می توان هر عدد یا هر نوع دیگری از پارامترها را با استفاده از jQuery Ajax به WebMethod ارسال کرد.

کد HTML:

این کد شامل یک فرم ساده با TextBox هایی برای گرفتن نام و سن و یک دکمه برای ارسال مقادیر به WebMethod سرور با استفاده از jQuery Ajax می باشد.

<table border="0" cellpadding="0" cellspacing="0">

<tr>

    <td>

        Name:

    </td>

    <td>

        <asp:TextBox ID="txtName" runat="server" Text = "Mspsoft" />

    </td>

</tr>

<tr>

    <td>

        Age:

    </td>

    <td>

        <asp:TextBox ID="txtAge" runat="server" Text = "۵"/>

    </td>

</tr>

<tr>

    <td>

        <asp:Button ID="btnSubmit" Text="Submit" runat="server" />

    </td>

</tr>

</table>

 

گرفتن چندین پارامتر توسط WebMethod

WebMethod زیر، با استفاده از jQuery Ajax چندین پارامتر را از سمت کلاینت می پذیرد.

C#:

[System.Web.Services.WebMethod]

public static string SendParameters(string name, int age)

{

    return string.Format("Name: {0}{2}Age: {1}", name, age, Environment.NewLine);

}

 

VB.Net:

<System.Web.Services.WebMethod()> _

Public Shared Function SendParameters(name As String, age As Integer) As String

    Return String.Format("Name: {0}{2}Age: {1}", name, age, Environment.NewLine)

End Function

 

ارسال پارامترها به WebMethod با استفاده از jQuery Ajax POST

زمانی که دکمه کلیک می شود، نام و سن از TextBox های مربوطه واکشی می شوند و به یک شیء JSON تخصیص داده می شوند که درون آن دو property که نام یکسانی با پارامترهای WebMethod دارند، ایجاد کرده ایم.

[divider style=”normal” top=”20″ bottom=”20″]

پیشنهاد میکنم :استفاده از کنترل AJAX HoverMenu با GridView در ASP.NET

[divider style=”normal” top=”20″ bottom=”20″]

 

نکته: توجه داشته باشید که جاوا اسکریپت نسبت حروف بزرگ و کوچک حساس می باشد، بنابراین توجه داشته باشید که نام پارامترها و نام property ها یکسان باشند، در غیر این صورت WebMethod فراخوانی نخواهد شد.

حال شیء JSON با استفاده از متد JSON2Stringify به رشته JSON، Serialize می شود و سپس به عنوان پارامتر به WebMethod ارسال می شود.

در این تکنیک هیچ خطای گرامری وجود ندارد و همچنین به تبدیل مقادیر TextBox به int یا نوع داده دیگری نیاز نمی باشد.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>

<script type="text/javascript">

$(function () {

    $("[id*=btnSubmit]").click(function () {

        var obj = {};

        obj.name = $.trim($("[id*=txtName]").val());

        obj.age = $.trim($("[id*=txtAge]").val());

        $.ajax({

            type: "POST",

            url: "CS.aspx/SendParameters",

            data: JSON.stringify(obj),

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function (r) {

                alert(r.d);

            }

        });

        return false;

    });

});

</script>

 

خروجی:

jQuery Ajax POST

آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=18514
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

1 نظر در مورد ارسال پارامترها به WebMethod در فراخوانی jQuery Ajax POST

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. سلام و تشکر بابت اموزشها
    من زمانی که از کامپیوتر دیگر میخواهم وب متد را فراخوانی کنم خطا میدهد و ظاهرا مشکل امنیتی دارد مجبور شدم از jsonp و فراخوانی get کمک بگیرم. در این مورد بیشتر کمک کنید و اموزشهایی قرار دهید. اصولا چطور میتوان با ای جکس و از یک سرور، خدمات وب سرویس دیگر را فراخوانی کرد؟
    ممنون

    لایک