التدهور اللطيف لعلامات الارتساء باستخدام جافا سكريبت

Question

أعتمد حاليًا على علامات الربط لتنفيذ طلبات AJAX على تطبيق الويب الخاص بي (باستخدام jQuery).على سبيل المثال:

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function() {
            // Perform AJAX call and manipulate the DOM
        });
    });

    <a id="test" href="">Click me!</a>
</script>

ومع ذلك، تصبح علامات الربط هذه عديمة الفائدة إلى حد كبير إذا قام المستخدم بتعطيل جافا سكريبت في متصفحه.ما هي أفضل طريقة للتعامل مع التدهور اللطيف لعلامات الارتساء هذه؟هل خياري الوحيد هو تحويلها جميعًا إلى أزرار داخل علامات النموذج؟

يحرر:يجب أن أكون أكثر وضوحًا وأحدد أن استدعاء AJAX الخاص بي هو عبارة عن HTTP POST إلى عنوان URL لا يمكنني، لأسباب أمنية، كشفه لـ HTTP GETs العادية (على سبيل المثال.فكر في عنوان URL للحذف "/items/delete/1").مع أخذ ذلك في الاعتبار، لا يمكنني تغيير href الخاص بالمرساة ليكون "/items/delete/1" لإرضاء المستخدمين مع إيقاف تشغيل جافا سكريبت لأنه يشكل خطرًا أمنيًا.

Answer 1

والجواب كنت أبحث عنه ودفن في أحد التعليقات:

<اقتباس فقرة>   

واستخدامك للعلامة <a> للقيام على HTTP   عملية POST هي متعارضة. كان <a>   مصممة للHTTP GET. لن تجدوا   إجابة مرضية هنا اذا واصلتم   دلالات العملية الخاصة بك   جزءا لا يتجزأ من علامة <a>. نرى    http://www.w3.org/2001/tag/doc/whenToUseGet. أتش تي أم أل

Answer 2

وخيار واحد (الذي أنا متأكد من أني سوف تحصل على downvoted)، هو أن لا يكلف نفسه عناء مع الناس الذين لديهم جافا سكريبت قبالة. عرض رسالة في علامة <noscript> إعلام المستخدم أن موقعك يتطلب جافا سكريبت.

وانها سوف تؤثر على مجموعتين من الناس: أولئك الذين لديهم علم تعطيل جافا سكريبت ويفترض معرفة كيفية تشغيله مرة أخرى، وأولئك الذين يتصفحون موقعك على جهاز المحمول السن

والنظر في مدى أهمية هذه المجموعات من الناس قبل أن تذهب في قضاء ساعات وساعات النامية منها.

Answer 3

وبسيط، لا تستخدم جافا سكريبت: تركيب URI كما أ href، على الأقل، وليس في HTML تسليمها إلى العميل

وتسليم HTML من الملقم مع أ href أخذ المستخدم إلى أي صفحة تريد أن تأخذ منهم، ثم قم باستبدال أ href (أو التقاط الحدث onclick) للعلامة مرساة وتفعل ما يحلو لك، ويجري التأكد من منع الإجراء الافتراضي لاطلاق النار الحدث.

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function(e) {
            // Perform AJAX call and manipulate the DOM
            e.preventDefault();
        });
    });

    <a id="test" href="/Proper/URI">Click me!</a>
</script>

وأنا أتفق تماما مع هذا الاقتراح لقراءة مزعجة جافا سكريبت.

Answer 4

غير مزعجة جافا سكريبت لمعرفة كيفية فصل السلوك JS من العلامات الفعلية الخاصة بك. وأي شيء آخر أنا آخر يكون مجرد إعادة صياغة شخص آخر ما قاله أفضل في مكان آخر

Answer 5

من المحتمل أن يكون أفضل رهان لك على no-JS هو الحصول على نموذج به زر إرسال، وتوجيه إجراء النموذج إلى عنوان URL الخاص بك.

يمكنك تصميم الزر ليبدو كرابط (أو مثل أي شيء آخر):

<button class="linkstyle" type="submit">Foo</button>
<style type="text/css">
button.linkstyle { border:none; background:none; padding:0; }
<style>

يوجد مثال جيد لأزرار التصميم في مقالة Particletree: إعادة اكتشاف عنصر الزر