مثال على استخراج بيانات AJAX باستخدام beego

1. ما هو AJAX

Asynchronous JavaScript And XML (AJAX) هو نوع من تقنيات تطوير صفحات الويب التفاعلية.

آjax هو تقنية يمكن من تحديث جزء من صفحة الويب دون إعادة تحميل الصفحة بأكملها.

2. كيفية استخدام AJAX

XMLHttpRequest هو الأساس لـ AJAX.

XMLHttpRequest يستخدم لتبادل البيانات مع الخادم في الخلفية. هذا يعني أنه يمكن تحديث جزء من الصفحة دون إعادة تحميل الصفحة بأكملها.

استخدام AJAX يتكون من أربعة خطوات

1. إنشاء object XMLHttpRequest

// js code to get XMLHttpRequest object (saved as util.js)
function getXmlHttpRequest() {
  var xhr;
  try {
    // Firefox, Opera 8.0+, Safari
    xhr = new XMLHttpRequest();
  }
    // Internet Explorer
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
        alert("متصفحك لا يدعم AJAX!");
        return false;
      }
    }
  }
  return xhr;
}

2. تسجيل دالة التتبع للوضع (تُدعى هذه الدالة عند تغيير كل حالة XMLHttpRequest)

// عند xhr.readyState == 4 يعني أن جميع الخطوات قد تم تنفيذها
// عند xhr.state == 200 يعني أن التنفيذ قد تم بنجاح
 xhr.onreadystatechange=function(){
  if(xhr.readyState == 4 && xhr.state == 200){
    alert("تم تنفيذ الطلب بالكامل وبشكل ناجح");
  }
}

3. إنشاء اتصال غير متزامن مع الخادم (بافتراض غير متزامن)

/**
 دالة open(method,url,async)
 تحديد نوع الطلب و URL و معالجة الطلب بشكل غير متزامن
 method: نوع الطلب؛ GET أو POST
 url: عنوان الطلب الذي سيتم معالجته
 async: true (غير متزامن) أو false (متزامن)
 باستخدام time لضمان إرسال كل طلب جديد
*/
xhr.open("Post", "/detailsU?time=" + new Date().getTime());

4. إرسال طلب غير متزامن

/**
 إرسال سلسلة json عبر دالة send
*/
xhr.send('{"Index":"'+index +'", "Change":"' + i +'"}');

بالإضافة إلى الخطوات الأربعة أعلاه، يمكنك إرسال الطلب بنجاح

مرفق المصدر:

{{range .PhoneDetails}}  
    <tr onclick="func1(this)">}}
      <th>{{.Id}}</th>
      <th>{{.Name}}</th>
      <th>{{.Price}}</th>
      <th>{{.Repertory}}</th>
      <th>
        <a href="">تعديل
      </th>
      <script type="text/javascript" src="/static/js/util.js"></script>
      <script type="text/javascript">
        function func1(x) {
          var code = prompt("يرجى إدخال حجم المخزون المعدل:");
          if(code != null && code != "") {
            var i = parseInt(code);
            if(isNaN(i)) {
              alert('خطأ في الإدخال');
            } else {
              var xhr = getXmlHttpRequest();
              xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.state == 200) {
                  alert("تم تنفيذ الطلب بالكامل وبشكل ناجح");
                }
              }
              var index = x.rowIndex;
              xhr.open("Post", "/detailsU?time=" + new Date().getTime());
              xhr.send('{"Index":"' + index + '", "Change":"' + i + '"}');
              alert('نجاح التعديل');
            }
          } else {
            alert('خطأ في الإدخال');
          }
        }
      </script>
    </tr>
    {{end}}

3. معالجة طلبات AJAX في beego

1. أولاً، قم بإنشاء هيكل البيانات في ملف models层的models.go

/**
 يجب أن يكون مطابقًا للنص JSON المرسل
 '{"Index":"'+index +'", "Change":"' + i +'"}'
*/
نوع Object struct {
 مؤشر النص
 تغيير النص
}

2. سجـل المسار المطلوب

/**
 سجـل المسار المطلوب في ملف main.go (لاحظ التزامن مع إعدادات المسار المطلوب)
 xhr.open("Post", "/detailsU?time=" + new Date().getTime());
 استخدام "Post:DoUpdate" لسجـل الدالة التي يتم معالجتها من قبل طلب Post URL
*/
beego.Router("/detailsU", &controllers.DetailController{}, "Post:DoUpdate")

3. كتابة الدوال المعالجة المطلوبة في controller

/**
 معالجة الـ request المناسب في الدالة المخصصة
 json.Unmarshal(this.Ctx.Input.RequestBody, ob)
 استخدام JSON لتحليل البيانات المرسلة عبر الـ request، وتخزين البيانات في كائن ob
 إعداد copyrequestbody = true في app.conf
*/
func (this *DetailController) DoUpdate(){
    ob := &models.Object{}
    json.Unmarshal(this.Ctx.Input.RequestBody, ob)
    db, err := sql.Open("mysql", "اسم المستخدم:كلمة المرور@tcp(IP:3306)/اسم القاعدة البيانات")
    result, err := db.Exec("UPDATE 名称 الجدول SET حقل= ? WHERE id = ?",ob.Change, ob.Index)
    if err != nil{
      beego.Error(err)
      return
    }
       fmt.Println(result)
    }
}

هذا المثال لاستقبال بيانات AJAX باستخدام beego هو كل المحتوى الذي قدمته لك المحرر، آمل أن يكون هذا مرجعًا لك، وأتمنى أن تدعموا وتعززوا تعليمات النواة.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، يحق للمالك الأصلي الحصول عليه، تم جمع المحتوى من قبل المستخدمين على الإنترنت الذين قاموا بتحميله بشكل تلقائي، لا يملك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) للإبلاغ، وتقديم الأدلة ذات الصلة، إذا تم التحقق من ذلك، سيقوم هذا الموقع بإزالة المحتوى المزعوم بشكل فوري.