www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫jQuery Ajax و نحوه صحیح ارسال مقادیر به یک وب سرویس


نویسنده: وحید نصیری
تاریخ: ۱۳۸۸/۰۸/۱۰ ۱۹:۴۲:۰۰
آدرس: www.dntips.ir

در مورد کار با jQuery Ajax و نحوه فراخوانی یک متد وب سرویس توسط آن، چند مطلب پیشتر ارائه شدند:
بررسی وجود نام کاربر با استفاده از jQuery Ajax در ASP.Net
و ...

تمام این مقالات یک ایراد مهم دارند که امروز با آن مواجه شدم و خلاصه آن به شرح زیر است:
پارامتر data متد Ajax جی‌کوئری را به صورت زیر در نظر بگیرید:
data: "{'username': '" + $('#<%= TextBox1.ClientID %>').val() + "'}",
این روش شاید با بسیاری از ورودی‌ها کار کند اما یک سری از کاراکترها زمانیکه با فرمت JSON ارسال می‌شوند باید اصطلاحا escape شوند که لیست آن‌ها به صورت زیر است:
\b  Backspace (ascii code 08)
\f  Form feed (ascii code 0C)
\n  New line
\r  Carriage return
\t  Tab
\v  Vertical tab
'  Apostrophe or single quote
"  Double quote
\  Backslash caracter
برای حل این مشکل می‌توان از اسکریپت استاندارد json2.js که در سایت json.org معرفی شده، استفاده کرد.

ابتدا ارجاعی از این اسکریپت باید به صفحه اضافه شود:
<script src="js/json2.js" type="text/javascript"></script>
سپس مقدار پارامتر data را باید به شکل زیر اصلاح کرد:
 var jsonText = JSON.stringify({ username: $('#<%= TextBox1.ClientID %>').val() });
...

data: jsonText,
متد stringify تمام ملاحظات لازم را در مورد escape کاراکترهای یاد شده و بسیاری از موارد دیگر به صورت خودکار اعمال می‌کند. همچنین از این لحاظ که یک ساختار داده‌ای جاوا اسکریپتی را نیز می‌تواند به معادل متنی آن تبدیل کند، بسیار جالب توجه است.
به عنوان مثالی دیگر، اگر متد وب سرویس ما دو پارامتر داشت، jsonText به شکل زیر در خواهد آمد:
 var jsonText = JSON.stringify({ param1: val1, param2: val2 });
لازم به ذکر است که پشتیبانی از این متد در نگارش‌های آخر اکثر مرورگرهای امروزی در جهت سازگاری با آخرین استانداردهای مصوب جاوا اسکریپت به صورت بومی وجود دارد (از IE8 به بعد و فایرفاکس 3 و یک به بعد)، اما از آنجائیکه کاربران ممکن است هنوز از نگارش‌های قدیمی آن‌ها استفاده کنند، کمک گرفتن از فایل json2.js ضروری به نظر می‌رسد.

Vote on iDevCenter
مطالب مشابه

نظرات

  • مهمان در ۱۳۸۸/۰۸/۱۰ ۲۱:۳۰:۴۹
    بسیار عالی بود . یه سوالی داشتم و اینکه برای کار با jquery ajax باید در visualstudio پروژه Enabale Ajax ایجاد نمود یا اینکه با پروژه معمولی هم کار میکنه چرا که هنگام پاس دادن اطلاعات بصورت json فایر باگ میگفت فرمتت صحیح نیست و وقتی که با پروژه Enable ajax کار کردم مشکل حل شد در این مورد یه توضیحی میدید . با سپاس فراوان/
  • مهمان در ۱۳۸۸/۰۸/۱۰ ۲۱:۳۵:۴۸
    سلام !

    خسته نباشید.

    فکر کنم 2 بار دیگه این مطلب رو گفته بودید.

    /

    happy new weblog name ;)
  • وحید نصیری در ۱۳۸۸/۰۸/۱۰ ۲۱:۵۷:۳۳
    @peyman naji
    هنگامیکه پروژه Ajax enabled شود یک سری مدخل به فایل web.config در مورد تبادلات اجکسی اضافه می‌شود که حتما لازم است (در مورد فعال سازی scripting و webServices است). یک نمونه آن‌را در اینجا توضیح داده‌ام:
    https://www.dntips.ir/2009/07/blog-post_06.html

    @DotNetCoders
    - یکبار بود، البته نه به این صورت و واضحی.
    - ممنون. اسم قبلی کمی زیاده روی بود :)
  • علی یگانه مقدم در ۱۳۹۴/۰۳/۱۰ ۲۲:۳۱
    من کد زیر رو ارسال می‌کنم ولی مشکلی که وجود داره این هست که نه پارمترها ارسال میشه و نه درخواست آژاکسی هست.صفحه رو واقعا هدایت میکنه به آدرس مورد نظر.
    //new group
    $("#NewGroup").on('click', function () {
        var catName = 'new';// $("#appendNodeText").val();
        $.ajax({
            dataType: "json",
            type: "POST",
            url: "@Url.Action(MVC.Categories.NewCategory())",
            data: { name: catName }

        }).done(function (data) {
            alert(data);
        });
    });
    • وحید نصیری در ۱۳۹۴/۰۳/۱۰ ۲۲:۵۷
      event.preventDefault را هم بررسی کنید.