Introduction to angular. js cross-origin post solution, Introduction to angular. js

Introduction to angular. js cross-origin post solution, Introduction to angular. js

Cross-origin: problems frequently encountered in front-end development. AngularJS implements cross-origin methods similar to Ajax and uses CORS mechanisms.

The following describes how to use $ http in AngularJS to implement cross-origin request data.

AngularJS XMLHttpRequest: $ http is used to read data from a remote server.

$http.post(url, data, [config]).success(function(){ ... });$http.get(url, [config]).success(function(){ ... });$http.get(url, [config]).success(function(){ ... });

1. $ http. jsonp [implement cross-origin]

1. Specify the callback and callback function names. When the function name is JSON_CALLBACK, the success callback function is called. JSON_CALLBACK must be in uppercase.

2. Specify other callback functions, but must be global functions defined in window. Callback must be added to the url.

Ii. $ http. get [implement cross-origin]

1. Allow access under other domain names on the server side

Response. setHeader ("Access-Control-Allow-Origin", "*"); // Allow all domain names to Access response. setHeader ("Access-Control-Allow-Origin", "http://www.123.com"); // allows Access from www.123.com

2. AngularJS end uses $ http. get ()

Iii. $ http. post [implement cross-origin]

1. Allow access under other domain names on the server side, and set the response type and response header.

response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods","POST");response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");

2. AngularJS uses $ http. post () and sets request header information.

$http.post('http://localhost/ajax/getAllIndustryCategoty.pt',{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){ $scope.industries = data; });

IV. Implementation Methods

Cross-origin method 1 [JSONP ]:

Method 1:

$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=JSON_CALLBACK&siteid=137bd406").success(function(data){ ... });// The name of the callback should be the string JSON_CALLBACK.

Method 2 [return value, which must be received using the corresponding callback method, but how to place it in $ scope ?] :

$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=badgeabc&siteid=137bd406");function badgeabc(data){ ... }

public String execute() throws Exception {  String result = FAIL; response.setHeader("", ""); SiteHandlerAction siteHandlerAction = (SiteHandlerAction)BeansFactory.getBean(SiteHandlerAction.class); BadgeHandlerAction badgeHandlerAction = (BadgeHandlerAction)BeansFactory.getBean(BadgeHandlerAction.class); if("".equals(siteid) || siteid == null || StringUtils.isBlank("jsonp")){ result = FAIL; }else{ Site site = siteHandlerAction.find(siteid); UserBadgeStatus userBadgeStatus = badgeHandlerAction.getUserBadgeStatus(site.getId()); if(userBadgeStatus != null){  result = "{\"t\":"+userBadgeStatus.getStyle()+",\"l\":"+userBadgeStatus.getSuspend_location()+",\"s\":"+site.getId()+"}";  JSONObject jsonObj = JSONObject.fromObject(result);  String json = jsonObj.toString();  result = jsonp + "(" + json + ")"; } } PrintWriter write = response.getWriter(); write.print(result); write.flush(); write.close(); return NONE;}

Cross-origin method 2 [$ http. get ()]:

function getAdustryController($scope,$http){ $http.get('http://localhost/ajax/getAllIndustryCategoty.pt?languageColumn=name_eu').success(function(data){ $scope.industries = data; });}

Cross-origin method 3 [$ http. post ()]:

function getAdustryController($scope,$http){ $http.post('http://localhost/ajax/getAllIndustryCategoty.pt',{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){ $scope.industries = data; });}

// Java supports cross-origin request public String execute () {response. setHeader ("Access-Control-Allow-Origin", "*"); // The URLs allowed for cross-Origin requests to response. setHeader ("Access-Control-Allow-Methods", "POST"); // allowed request Methods, usually GET, POST, PUT, DELETE, OPTIONS response. setHeader ("Access-Control-Allow-Headers", "x-requested-with, content-type"); // request Headers allowed for cross-origin SiteHandlerAction SiteHandler = (SiteHandlerAction) beansFactory. getBean (SiteHandlerAction. class); List list = SiteHandler. getAllIndustryCategory (); // all classification sets JSONArray jsonArray = JSONArray. fromObject (list); // convert list to json String json = jsonArray. toString (); // convert to json string try {PrintWriter write = response. getWriter (); write. print (json); write. close ();} catch (IOException e) {e. printStackTrace ();} return NONE ;}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.