أبحث عن إرشادات بناء الجملة حول تنفيذ مشروع AJAX

Question

إنني أتولى مشروع AJAX الأول الخاص بي وقد تم تخطيط كل شيء من الناحية النظرية للجزء الأكبر ولكن تم إعاقتي بسبب افتقاري إلى المعرفة النحوية.أعتقد أنني أيضًا قد أكون خارج نطاق العلامة قليلاً فيما يتعلق بمنطق الهيكل/الوظيفة الخاص بي.

أنا أبحث عن بعض الإرشادات، وإن كانت إشارة إلى البرامج التعليمية أو أي تصحيحات لما أفتقده أو أغفله.

الملف الشخصي.php:هذه هي الصفحة التي تحتوي على رمز الإبهام الفعلي للنقر عليه ورمز الإبهام $.post وظيفة:

هنا هو هيكل الإبهام.

عند النقر على الإبهام، أحتاج إلى إرسال معرف التعليق؟أعلم أنني بحاجة إلى حساب حقيقة أنه تم النقر عليه بطريقة ما وإرساله إلى ملف $.منطقة النشر في أسفل هذه الصفحة، أحتاج أيضًا إلى وضع نوع من متغير php في الإبهام عداد div لزيادة الأرقام عند $.يؤكد المنشور أنه تم النقر عليه.

<div id="thumb_holder">
    <div id="thumb_report">
        <a href="mailto:info@cysticlife.org">
            report
        </a>
    </div>
    <div id="thumb_counter">
        +1
    </div>
    <div id="thumb_thumb">

        <?php $comment_id = $result['id'];?>
        <a class="myButtonLink" href="<?php echo $comment_id; ?>"></a>

    </div>
</div>

هنا هو $.post وظيفة

وينبغي أن يتم إرسال هذا معرف التعليق؟ولكن من المؤكد أنه يجب إرسال سجل بالرابط المصغر الذي تم النقر عليه وإرساله بطريقة ما إلى صفحة php الخاصة بي التي تتحدث إلى قاعدة البيانات.

<script>
$.ajax({
 type: 'POST',
 url:" http://www.cysticlife.org/thumbs.php,"
 data: <?php echo $comment_id; ?>,
 success: success
 dataType: dataType
});
</script>

الإبهام.php:هي الصفحة التي يتم إرسال طلب الزيادة إليها عند النقر على الإبهام ثم يقوم بدوره بإخبار قاعدة البيانات بتخزين نقرة، ليس لدي أي شيء في هذه الصفحة حتى الآن.لكنني أفترض أنه سيتم تمرير سجل للنقرة من خلال $.post وظيفة من الصفحة الأخرى والتي ليس لدي أي فكرة من الناحية النحوية عن كيفية عمل ذلك ومن ثم عبر استعلام الإدراج سوف يقوم بتصوير هذا السجل إلى قاعدة البيانات.

هذا ما يحتويه الجدول في قاعدة البيانات

لدي ثلاثة صفوف:أ id أن الزيادات التلقائية.أ comment_id حتى يعرف التعليق الذي تم "الإعجاب به" وأخيرًا أ likes لتتبع عدد الإعجابات.

Answer 1

على الأقل لقد قمت ببداية جيدة، لا تزال هناك بعض الأخطاء.في البداية، هناك بعض المبادئ الأساسية التي قد ترغب في الاعتياد عليها:

1) How to create a click event

أولاً، قمت بإدخال الزر "2" باعتباره href.

<a class="myButtonLink" href="2">Vote Up!</a>

EDIT:فقط في حالة تعطيل JS، سيكون هذا خيارًا أفضل:

<a class="myButtonLink" href="voteup.php?id=2" id="2">Vote Up!</a>

ثم شبيبة:

$('.myButtonLink').click(function(e) {
  e.preventDefault();
  alert('the button has been clicked!');
});

ال e يمثل الحدث، لذا فإن أول شيء نفعله بعد الإرسال هو إلغاء الإجراء الافتراضي (إعادة التوجيه إلى "2").ثم نقوم بتنبيه أنه تم النقر على الزر.إذا نجح هذا، يمكننا أن ننتقل إلى الخطوة التالية.

2) Getting the ID value from the clicked link.

داخل وظيفة النقر، يمكننا استخدامها $(this), ، إنه تمثيل للعنصر الذي تم النقر عليه.يوفر لنا jQuery مجموعة من الوظائف للحصول على سمات من عنصر معين، وهذا هو بالضبط ما نحتاجه.

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');
  alert('We are upvoting comment with ID ' + comment_id);
});

عندما يسير كل شيء على ما يرام، يجب أن ينبهك هذا إلى "نحن نؤيد التعليق بالمعرف 2".لذا، انتقل إلى الخطوة التالية!

3) Sending the Request

قد تكون هذه هي الخطوة الأصعب إذا كنت قد بدأت للتو في استخدام ajax/jquery.ما يجب أن تعرفه هو أن البيانات التي ترسلها يمكن أن تكون سلسلة عنوان url (param=foo&bar=test) أو مصفوفة جافا سكريبت.في معظم الحالات، ستعمل باستخدام سلسلة عنوان url لأنك تطلب ملفًا.تأكد أيضًا من استخدام الروابط النسبية ("ajax/upVote.php" وليس "http://www.mysite.com/ajax/upVote.php").إذن إليك رمز اختبار صغير:

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');

  $.ajax({
    type: 'POST',
    url: 'thumbs.php',
    data: 'comment_id=' + comment_id,
    success: function(msg) { alert(msg); }
});

يتم اكتشاف نوع البيانات تلقائيًا، ويمكنك على سبيل المثال الاختيار بين استجابة JSON (والتي يمكن أن تكون مصفوفة تحتوي على حالة واستجابة للرسالة) أو مجرد نص عادي.دعونا نجعل الأمر بسيطًا ونبدأ بالنص العادي.

ما يفعله هذا البرنامج النصي هو استدعاء Thumbs.php وإرسال قيمة $_POST ($_POST['comment_id'] = 2) مع هذا الطلب.على Thumbs.php يمكنك الآن القيام بجزء PHP وهو:

1) checking if the comment_id is valid
2) upvoting the comment
3) print the current amount of votes back to the screen (in thumbs.php)

إذا قمت بطباعة عدد الأصوات مرة أخرى على الشاشة، فإن النص الأخير الذي قدمته لك سوف ينبهك إلى مربع رسالة يحتوي على عدد الأصوات.

4) Returning an array of data with JSON

من أجل الحصول على الاستجابة المناسبة على شاشتك، قد تفكر في إرسال مصفوفة مثل:

$arr = array(
  'result' => 'success', // or 'error'
  'msg' => 'Error messag' // or: the amount of votes
)

ثم يمكنك تشفير هذا باستخدام وظيفة php json_encode($arr).بعد ذلك ستتمكن من الحصول على استجابة أكثر لائقة مع البرنامج النصي الخاص بك باستخدام هذا:

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');

  $.ajax({
    type: 'POST',
    url: 'thumbs.php',
    data: 'comment_id=' + comment_id,
    success: function(data) {
      if(data.result == "error") {
        alert(data.msg);
      } else {
        alert('Your vote has been counted');
        $('#numvotes').html(data.msg);
      }
    }
});

كما ترون نحن نستخدم (البيانات) بدلاً من (msg) لأننا نرسل مجموعة بيانات مرة أخرى.يمكن قراءة المصفوفة في PHP ($arr['result']) كـ data.result.في البداية، نقوم بالتحقق لمعرفة النتيجة (خطأ أو نجاح)، وإذا كان خطأ، فإننا ننبه الرسالة المرسلة (اتصال قاعدة بيانات خاطئ، معرف تعليق خاطئ، غير قادر على حساب الأصوات، وما إلى ذلك.وما إلى ذلك) من النتيجة هي النجاح، ننبه إلى أنه تم احتساب التصويت ونضع عدد الأصوات (المحدث) داخل عنصر div/span/عنصر آخر بالمعرف "numvotes".

نأمل أن يكون هذا مفيدًا ؛-)

//يحرر:لقد لاحظت بعض الأخطاء في علامات التعليمات البرمجية.تم إصلاح الجزء الأول من "الدليل".