شرح مفصل لكيفية تنفيذ AngularJS

النطاق المتقاطع ، وهي مشكلة شائعة واجهتها في التنمية الأمامية. يقوم AngularJS بتنفيذ طريقة عبر المجال مماثلة لـ AJAX ويستخدم آلية CORS.

يشرح ما يلي استخدام $ HTTP لتنفيذ بيانات طلب المجال المتقاطع في AngularJS.

AngularJS XMLHTTPrequest: يتم استخدام $ HTTP لقراءة البيانات من خادم بعيد

 $ http.post (url ، data ، [config]). success (function () {...}) ؛ $ http.get (url ، [config]). Success (function () {...}) ؛ $ http.get (url ، [config]).

1. $ http.jsonp [تنفيذ المجال المتقاطع]

1. حدد اسم وظيفة callback ودالة الاتصال. عندما يكون اسم الوظيفة هو JSON_CALLBACK ، سيتم استدعاء وظيفة رد الاتصال الناجح. يجب أن يكون JSON_CALLBACK في حالة كبيرة.

2. حدد وظائف رد الاتصال الأخرى ، ولكن يجب أن تكون وظائف عالمية محددة تحت النافذة. يجب إضافة callback إلى عنوان URL.

2. $ http.get [تنفيذ المجال المتقاطع]

1. اضبط الخادم للسماح بالوصول تحت أسماء النطاقات الأخرى

 استجابة. // السماح لجميع أسماء النطاق بالوصول إلى استجابة. // السماح www.123.com بالوصول

2. AngularJS Side يستخدم $http.get()

3. $ http.post [تنفيذ المجال المتقاطع]

1. اضبط إعدادات من جانب الخادم للسماح بالوصول إلى أسماء النطاقات الأخرى ، بالإضافة إلى إعدادات نوع الاستجابة وإعدادات رأس الاستجابة

 استجابة.

2. يستخدم Side AngularJS $http.post() ويعين معلومات رأس الطلب في نفس الوقت

 $ http.post ('http: //localhost/ajax/getAllIndUstryCategoty.pt' ، {languageColumn: 'name_eu'} ، {'content-type': 'application/x-ww-form-urlencoded'}).

4. طريقة التنفيذ

طريقة النطاق المتقاطع واحد [ JSONP ]:

الطريقة 1:

 $ http.jsonp ("http: //localhost/sitesettings/getbadgeinfo.pt؟ jsonp = json_callback & siteid = 137bd406") .sccess (function (data) {...}) ؛

الطريقة 2 [قيمة الإرجاع ، تحتاج إلى استخدام طريقة رد الاتصال المقابلة لاستلامها ، ولكن كيفية وضعها في $scope ؟]:

 $ http.jsonp ("http: //localhost/sitesettings/getbadgeinfo.pt؟ jsonp = badgeabc & siteid = 137bd406") استجابة. siteHandlerAction siteHandlerCtion = (siteHandlerAction) beansfactory.getBean (siteHandlerLateCtion.class) ؛ BadgeHandlerAction CadgeHandlerTAction = (badgehandlertaction) beansfactory.getBean (padgehandlertaction.class) ؛ if (" } آخر {site site = siteHandlerAction.find (siteid) ؛ userBadgestatus userbadgestatus = badgehandlertaction.getuserBadgestatus (site.getId ()) ؛ if (userBadgestatus! = null) {result = "{/"t/" :++ USERBADGESTATUS.GETSTYLE()+"،/"L/" :+ USERBADGESTATUS.GETSUSPEND_LOCATION()+"S/"S/"SITE.GETID.TID(+ (+)"} "}" jsonobject jsonobj = jsonobject.fromObject (النتيجة) ؛ String JSON = JSONOBJ.TOSTRING () ؛ النتيجة = JSONP + "(" + json + ")" ؛ }} printWriter write = response.getWriter () ؛ الكتابة. write.flush () ؛ write.close () ؛ عودة لا شيء ؛}

طريقة النطاق المتقاطع الثاني [ $http.get() ]:

 وظيفة getAduStryController (Scope $ ، $ http) {$ http.get ('http: //localhost/ajax/getallindustyratry.pt؟ languageColumn = name_eu') .Success (وظيفة (بيانات)

الطريقة المتقاطعة للمجال الثالث [ $http.post() ]:

 وظيفة getAdustryController (نطاق $ ، $ http) { $ http.post ('http: //localhost/ajax/getallindustrycategoty.pt' ، {languageColumn: 'name_eu'} ، {'content-type': 'application/x-www-form-urlencoded'}) .success (data) يدعم Java Side طلبات المائدة عبر السلسلة العامة execute () {response.setheader ("Access-Control-arigin" ، "*") ؛ // أي عناوين URL يُسمح لها بالطلب عبر المجالات إلى Response.setheader ("Methods-Access-Control-allow" ، "post") ؛ . // ما هي رؤوس الطلب المسموح بها

يمكن أن تكون المجال المتقاطع

 siteHandlerAction siteHandler = (siteHandlerAction) beansfactory.getBean (siteHandlerLaction.class) ؛ قائمة قائمة = siteHandler.getAllInduStryCategory () ؛ // جميع مجموعات التصنيف jsonarray jsonarray = jsonarray.fromObject (قائمة) ؛ // تحويل القائمة إلى JSonstring json = jsonarray.toString () ؛ // تحويل إلى json string try {printWriter write = response.getWriter () ؛ write.print (json) ؛ write.close () ؛} catch (ioException e) {

لخص

ما سبق هو كل شيء عن هذا المقال. آمل أن يكون محتوى هذه المقالة مفيدًا للجميع لتعلم استخدام AngularJS.