AngularJS 是一款流行的前端框架,它提供了丰富的 API 和指令用于构建动态 Web 应用。其中 $http 服务允许我们与远程服务器进行通信,发送 GET/POST 请求,并处理响应结果。
本文将围绕 $http 服务,详细探讨在 AngularJS 中如何提交数据,并给出实际的代码示例。
发送 POST 请求
使用 $http 发送 POST 请求需要传入一个配置对象,该对象包含请求 URL、请求数据和其他一些可选参数。
-- -------------------- ---- ------- ------- ------- ------- ---- ------------ ----- - ----- ------- ------ ------------------ - -------------------------- - --------------------------- -- --------------- - --------------------- ---
上述代码中,我们通过 $http.post() 方法发送了一个名为 /api/user
的 POST 请求,请求体为 { name: 'John', email: 'john@example.com' }
。
注意,$http.post() 方法是对 $http() 方法的简写形式,可以缩短代码量。
设置请求头
在发送 HTTP 请求时,有些情况下需要设置请求头,比如传递身份认证信息或者告知服务器请求体的格式。
我们可以使用 headers 属性来设置请求头:
-- -------------------- ---- ------- ------- ------- ------- ---- ------------ ----- - ----- ------- ------ ------------------ -- -------- - --------------- ------------------ - -------------------------- - --------------------------- -- --------------- - --------------------- ---
上述代码中,我们设置了请求头 Content-Type
为 application/json
,表示请求体的格式为 JSON 格式。
序列化请求体
默认情况下,$http 服务会将请求体序列化为字符串,并使用 application/x-www-form-urlencoded 格式进行传输。这在大多数情况下是合适的。
但是有时候需要手动指定序列化方式,比如发送文件等二进制数据。
我们可以通过 transformRequest 属性来指定序列化方法:
-- -------------------- ---- ------- ------- ------- ------- ---- -------------- -------- - --------------- --------- -- ----------------- ----------------- ----- -------- -------------------------- - --------------------------- -- --------------- - --------------------- ---
上述代码中,我们手动创建了一个 FormData 对象,并将其作为请求体传递。由于 FormData 对象已经包含了正确的 Content-Type 和二进制数据,因此我们需要将 headers 属性设为 undefined,禁止 $http 对请求头进行修改。
transformRequest 属性值为 angular.identity,表示不对请求体进行处理,直接发送原始数据。
处理响应数据
当服务器返回响应时,$http 服务会将响应数据封装到一个对象中,该对象包含响应状态码、响应头和响应体等信息。
我们可以通过 success 和 error 回调函数来处理响应数据:
-- -------------------- ---- ------- ------- ------- ------ ---- ------------- -------------------------- - ---------------------- ----------------- ----------------------- -------------------- -------------------- --------------- -- --------------- - --------------------- ---
上述代码中,我们使用 $http.get() 方法发送了一个 GET 请求,并通过 success 回调函数处理响应数据。
注意,$http.get() 和 $http.post() 等方法都返回一个 promise 对象,因此可以使用 then() 方法和回调函数来处理异步结果。
总结
本文介绍了如何使用 $http 服务在 AngularJS 中提交数据,包括发送 POST 请求、设置请求头、序列化请求体和处理响应数据等方面。希望对你有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/943