Home > Developer > Web Develop
description of the method for Ajax requests in angular:/** $http object in _http:angularjs * _url:ajax request URL * _method: request by: Post or Get * _params:get method Request Pass parameter * _data:post Way request parameter * _responsetype: Set the Xmlhttprequestresponsetype property in the request, "" (String, Default), * "Arraybuffer" (Arraybuffer); " Blob (Blob object); Document (HTTP document) "JSON" (JSON string parsed from JSON object); * "Text" (string); "Moz-blob" (Firefox receive Progress event); " Moz-chunked-text "(text stream); Moz-chunked-arraybuffer "(Arraybuffer stream). * The meaning of this parameter means the data format returned by the server to the page * _successcallback: callback function for successful request * _failurecallback: Request failed callback function **/functionAjaxclass (_http,_url,_method,_params,_headers,_data,_responsetype,_successcallback,_failurecallback) { This. http =_http This. url = _url | | ""; This. method = _method | | "GET"; This. Params = _params | | ""; This. headers = _headers | | ""; This. data = _data | | ""; This. Responsetype = _responsetype | | "JSON"; This. Successcallback = _successcallback | |function(res) {}; This. Failurecallback = _failurecallback | |function(res) {}; This. RequestData =function (){ This. HTTP ({method: This. Method, URL: This. URL, params: This. Params, data: This. Data, headers: This. Headers, Responsetype: This. Responsetype}). Then ( This. Successcallback, This. Failurecallback); }}
Post method request data, and pass the form data examplevarAjaxapp = Angular.module (' Ajaxapp '), []); Ajaxapp.controller (' Addctrl ',function($scope, $http, $filter) {varurl = "A.json"; varAjax =NewAjaxclass ($http, URL, "POST"); Ajax.data= $.param ({"username": "QQQ", "pwd": "BBB", "Code": "111"});//use $.param when passing form data, or the server will not be able to capture the sent data properly .Ajax.headers = {' Content-type ': ' application/x-www-form-urlencoded '};//remember to set the request header when you want to pass the form dataAjax.successcallback =function(res) {varStatus =Res.data.status; if(Status = = 0) {$scope. gridoptions=Res.data; } Else { } }; Ajax.failurecallback=function(res) {}; Ajax.requestdata ();});
get way request data, and example of passing parametersvarMyApp = Angular.module (' MyApp ', []); Myapp.controller (' Myctrl ',function($scope, $http) {varurl = "a.php"; //var url = "a.php?limit=10" varAjax =NewAjaxclass ($http, URL, "get"); Ajax.params= {"Limit": 11};//form to pass the data or can be used after the URL to add? Limit=11 such a form of transmission //Get method Request data does not need to be set header headerAjax.successcallback =function(res) {varStatus =Res.data.status; $scope. Gridoptions=Res.data; Console.log ("Status =" +status); if(Status = = 0) {$scope. gridoptions=Res.data; } Else { } }; Ajax.failurecallback=function(res) {}; Ajax.requestdata ();});
Get method request data, do not pass argument examplevarMyApp = Angular.module (' MyApp ', []); Myapp.controller (' Myctrl ',function($scope, $http) {varurl = "A.json"; varAjax =NewAjaxclass ($http, URL, "get"); //Get method Request data does not need to be set header headerAjax.successcallback =function(res) {varStatus =Res.data.status; $scope. Gridoptions=Res.data; Console.log ("Status =" +status); if(Status = = 0) {$scope. gridoptions=Res.data; } Else { } }; Ajax.failurecallback=function(res) {}; Ajax.requestdata ();});
1 the following libraries need to be imported for HTML pages:2<! DOCTYPE html>345<title></title>6<meta charset= "UTF-8"/>78<script type= "Text/javascript" src= ". /static/bower_components/jquery/dist/jquery.min.js "></script>9<script type= "Text/javascript" src= ". /static/bower_components/angular/angular.min.js "></script>Ten<script type= "Text/javascript" src= ". /static/bower_components/ag-grid/website/dist/angulargrid-latest.js "></script> One<body ng-app= "myApp" ng-controller= "Myctrl" > A<ul> -<!--Ng-repeat can cycle through the data below Gridoptions -<!--<li ng-repeat= "x in Gridoptions.data" > the {{X.name}} -</li>--> -<li>{{Gridoptions}} "+" {{gridoptions.length}} </li> -</ul> +</body> -<!--since I put the above Ajaxclass this method is placed separately in the Ajax.js file, so the need to import this file here, Provider.js is to create the controller to make the request part-- +<script type= "Text/javascript" src= ". /static/js/ajax.js "></script> A<script type= "Text/javascript" src= ". /static/js/provider.js "></script> atAjax requests for Post and get methods in Angularjs
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
