Angular AJAX 与jq的AJAX不同

 最近项目中使用angular,结果发现后台没法获取参数,所以,稍微研究了一下两者在发送ajax时的区别。

  注意angular和jquery的ajax请求是不同的。

  在jquery中,官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8

  • contentType (default: ‘application/x-www-form-urlencoded; charset=UTF-8‘)

    Type: String

    When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. Note: For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencodedmultipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.

而參数data,jquery是进行了转换

  • data

    Type: PlainObject or String or Array

    Data to be 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 an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

看以下这段

Sending Data to the Server

By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the type option. This option affects how the contents of the data option are sent to the server. POST data will always be transmitted to the server using UTF-8 charset, per the W3C 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, the data is converted into a query string using jQuery.param()before it is sent. This processing can be circumvented by setting processData to false. The processing might be undesirable if you wish to send an 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是javascript对象转换了字符串,传给后台。在SpringMVC中,就可以使用@RequestParam注解或者request.getParameter()方法获取参数。

  而在angular中,$http的contentType默认值是

  application/json;charset=UTF-8

  这样在后台,是获取不到参数的。

html

<body ng-app="MyApp">

<div ng-controller="FirstController">

<span>-------------------------------------获取下拉框数据--------------------------------------------------------------</span><br/>

<select  ng-change="change()"  ng-model="myColor" ng-options="grolp.title as grolp.names for grolp in colors">

<option value="">请选择你的萌宠</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 ---------------------//

使用angular发送请求ajax

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) {

$scope.colors = data;

$scope.data = data;

})

.error(function (data) {

$scope.data = data;

})

那么他的的参数的格式是这样的 明显不是我们想要的格式

所以,假设想用angular达到同样的效果,主要有点:

1.改动Content-Type为application/x-www-form-urlencoded; charset=UTF-8

2. 还要将{key1:value1,key2:value2}形式的参数转化成?key1=value1&key2=value2这种样子

正如下面这种情况

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) {

$scope.colors = data;

$scope.data = data;

})

.error(function (data) {

$scope.data = data;

})

那么他的的参数的格式是这样的 明显是我们想要的格式

时间: 2024-10-09 21:47:13

Angular AJAX 与jq的AJAX不同的相关文章

jq中ajax的使用

jq中ajax必须在服务器环境下使用 $.ajax({ url:"json.json", //请求的url地址 dataType:"json", //返回格式为json type:"GET", //请求方式 beforeSend:function(){ $('#div3').html('加载中...') }, success:function(data,status){//第一个参数包含获取的内容,第二个参数为执行的状态 var tt="

原生Ajax 和Jq Ajax

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: <!doctype html> <html> &

angular js 多处获取ajax数据的方法

angular js 多处获取ajax数据的方法 var app=angular.module("cart",[]);app.service("getData",function ($http) { return{ ajax:function () { return $http.get("product.json"); } }}); app.controller("listCtrl",function ($scope,getD

(JS/JQ)与Ajax

JS与Ajax(异步JS和XML): 1.XMLHttpRequest对象的常用方法: open()准备请求   send()传送请求   abort()取消请求 readyState(请求状态码):0(未开始).1(开启).2(已传送).3(接收中).4(已载入) status(HTTP请求状态码):404(找不到文件).200(OK) onreadystatechange:请求状态改变时会被调用函数引用 responseText:服务器返回的纯文本字符串 responseXML:服务器返回的

js实现jq的ajax

本文将介绍如何使用js封装一段代码,实现jq的ajax功能,每一步代码均有注释便于理解 实现代码 function ajax(){ //获取ajax的相应值(请求类型,请求地址,同步或异步,传递数据,接收数据类型,成功失败函数等) var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].async || "true&qu

关于jQ的Ajax操作

jQ的Ajax操作 什么是AJAX AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 它不是一门编程语言,而是利用JavaScript在保证页面不被刷新.页面链接不改变的情况下与服务器交换数据并更新部分网页的技术. 对于传统的网页,如果想更新内容,那么必须要刷新整个页面,但有了Ajax,便可以在页面不被全部刷新的情况下更新其内容.在这个过程中,页面实际上是在后台与服务器进行了数据交互,获得数据之后,再利用JavaScript改变页

前端 jq的ajax请求

jq的ajax请求 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax</title> </head> <body> <h1>ajax请求</h1> <input type="text" name="username" id="user

jq的ajax方法

相较与js异步对象的繁琐,jq的ajax对象结构更加清晰 一:ajax对象简述 ajax(Asynchronous JavaScript and XML),异步的xml和js对象,主要用于在不刷新全局页面的基础上,更新局部页面,多用于表单提交,搜索更新 在jq中的ajax对象的格式为: $.ajax({ // some code... }) js的ajax对象在此不多赘述 二:各类属性 一个完整的ajax对象起码应该有四个属性:type, url,data,success 1.type 这个是a

轻松搞定Ajax(分享下自己封装ajax函数,其实Ajax使用很简单,难是难在你得到数据后来怎样去使用这些数据)

hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + XML(异步JavaScript和XML )) 二.效果 实现无刷新效果,向后台异步的取数据(不是只有AJAX才能实现这样的效果的哦,如img , script标签中的src属性也可以实现一样的效果,可以自己尝试一下哦) 三.本质 可能我们在学习过程中会觉得ajax好难,我也是这样过来的,我觉得是我们