Angular Ajax differs from JQ's Ajax

Source: Internet
Author: User

Using angular in recent projects, the results found that the background was unable to get parameters, so a little bit of the difference between the two when sending Ajax.  Note that the Ajax requests for angular and jquery are different. In jquery, the official document explains ContentType default is application/x-www-form-urlencoded; Charset=utf-8
    • ContentType (default: ‘application/x-www-form-urlencoded; charset=UTF-8‘ ) Type:stringwhen sending data to the server with this content Type. Default is "application/x-www-form-urlencoded; Charset=utf-8 ", which is fine for the most cases. If you explicitly pass in a content-type $.ajax() to, then it's always sent to the server (even if no data is sent). The XMLHttpRequest specification dictates, the CharSet is always UTF-8; Specifying another charset the encoding of the browser to change. Note:for Cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded , multipart/form-data , or would text/plain trigger the B Rowser to send a preflight OPTIONS request to the server.
And the number of data,jquery is the conversion
    • Datatype:plainobject or String or arraydata to is sent to the server. It is converted to a query string, if not already a string. It ' s appended to the URL for get-requests. See processData option to prevent this automatic processing. Object must be key/value pairs. If value is a Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described B Elow).
Look at this section of the sending Data to the Server

By default, Ajax requests is sent using the GET HTTP method. If the POST method is required, the method can being specified by setting a value for the type option. This option affects how the contents of the data option is sent to the server. POST data would always be transmitted to the server using UTF-8 charset, per the The website of the XMLHttpRequest standard.

the  data  option can contain either a query string of the form  Key1=value1&key2 =value2 , or an object of the form  {key1: ' value1 ', Key2: ' value2 '} . If The latter form is used and the data is converted to a query string using  Jquery.param () before it is s Ent. This processing can is circumvented by setting  processdata  to  false . The processing might is undesirable if you wish to send a XML object to the server; In this case, change the  contentType  option from  application/ x-www-form-urlencoded  to A more appropriate MIME type.

  jquery is a JavaScript object that converts strings to the background.  In Springmvc, you can use the @requestparam annotation or the Request.getparameter () method to get the parameters. In angular, the default value for the $http contenttype is Application/json;charset=utf-8, which is not available in the background.  html<body ng-app= "MyApp" >     <div ng-controller= " Firstcontroller ">                <span> -------------------------------------Get drop-down box data--------------------------------------------------------------< /span><br/>        <select  ng-change= "Change ()"   ng-model= "MyColor"  ng-options= "grolp.title as grolp.names for grolp  In colors ">           <option value=" " > Please choose your pet </option>        </select>       <input type= "button"  id= "ChangeID " value=" {{MyColor}} "  disabled=" Disabled "/>:{{mycolor}}           <select style= "width: 150px;"  ng-model= "MyColors"  ng-options= "Color.name group by color.shade for color  in selectcolors ">        </select>          <br />         <span ng-class= "{Selectclass:stlery,haha:lala}"  >http status code:{{status}}</ span><br />        <span>http response  data:{{data}}</span>         <br />         <br />       </div> </body>    //--------------- angular   ajax ---------------------//   use angular to send requests ajax    var  User={id: "123", Name: "Gerr"}                           &NB Sp                          ,         &NB Sp                            $http ({method: "POS T ", url:" xxx ", data:user,headers: {' Content-type ':  ' application/x-www-form-urlencoded; charset= UTF-8 '}})              .success (function  (data)  {                          $scope .colors = data;                            $scope .data = data;    &NB Sp                 &NBSP})                      . Error (function  (data) &N Bsp {                            $scope .data =  data;               }) then the format of his arguments is so obviously not the format we want   So, suppose you want to use angular to achieve the same effect, Mainly a bit: 1. Change Content-type to application/x-www-form-urlencoded; charset=utf-82.&NBSP; and convert the parameters of the {key1:value1,key2:value2} form to a. Key1=value1&key2=value2 this way   as in the following cases           var user= ' id= "123" &name= "Gerr"                                                                                                    $http ({method: "POST", url: "xxx", data:user,headers: {' Content-type ':  ' Application/x-www-form-urlencoded; charset=utf-8 '}})              .success (function  (data)  {                    &N Bsp   &nbsp $scope .colors = data;                            $scope .data = data;                       }) & nbsp                    . Error (function  (data)  {    &NBS P                       $scope .data = data;    &NB Sp          }) then the format of his arguments is such that the format is obviously what we want

Angular Ajax differs from JQ's Ajax

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.