api接口中ajax数据请求与数据返回的小坑

AJAX 可以使网页实现异步更新,XMLHttpRequest 是 AJAX 的基础,大部分浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject),XMLHttpRequest对象基于HTTP协议用于在后台与服务器交换数据。
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,这里主要说 POST 提交数据的方式。HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。
数据发送出去,需要服务端解析,一般服务端语言如 php、python 等,以及它们的 framework,都内置了自动解析常见数据格式的功能。服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。所以说到 POST 提交数据方案,包含了 Content-Type 和消息主体编码方式两部分。Cntent-Type有以下常见4种类型:
(1) application/x-www-form-urlencoded
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。
(2)multipart/form-data
这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 form 的 enctyped 等于这个值。
(3)application/json
现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。因为JSON的规范,数据不容易出错。
(4)text/xml
它是一种使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范。

创新互联是一家以网络技术公司,为中小企业提供网站维护、成都网站制作、成都网站建设、外贸营销网站建设、网站备案、服务器租用、主机域名、软件开发、微信小程序等企业互联网相关业务,是一家有着丰富的互联网运营推广经验的科技公司,有着多年的网站建站经验,致力于帮助中小企业在互联网让打出自已的品牌和口碑,让企业在互联网上打开一个面向全国乃至全球的业务窗口:建站欢迎咨询:18982081108

这里需要注意的是在调用某个接口是,一定要注意接口请求的方式,如果是post,对应的enctype是什么(即请求时选择Content-Type为哪种类型)
这里以某个笑话接口为例,这里客服端为jquery的ajax,服务端没有展示:
(1)默认Content-Type 为application/x-www-form-urlencoded:

        $.ajax({
           type: 'post',
            url: 'http://route.showapi.com/jiekou',
            dataType: 'json',
            data: {
                "showapi_appid": '666666', //这里需要改成自己的appid
                "showapi_sign": '67596029af7b4cb8bc7afe1c6ffd2333',  //这里需要改成自己的应用的密钥secret
                "page":"1",
                "maxResult":"20"

            },

            error: function(XmlHttpRequest, textStatus, errorThrown) {
                alert("操作失败!");
            },
            success: function(result) {
                console.log(result) //console变量在ie低版本下不能用
                alert(result.showapi_res_code)
            }
        });

在chorme中调试显示:
api接口中ajax数据请求与数据返回的小坑

提交的原始数据

api接口中ajax数据请求与数据返回的小坑

(2)content-type:application/json

var jsonstr={
"showapi_timestamp": formatterDateTime(),
"showapi_appid": '66666', //这里需要改成自己的appid
"showapi_sign": '67596029af7b4cb8bc7afe1c6ffd2333', //这里需要改成自己的应用的密钥secret
"page":"1",
"maxResult":"20"
}
$(function(){
$('#create-user').click(function(){
$.ajax({
type: 'post',
url: 'http://route.showapi.com/341-1',
dataType: 'json',
data: JSON.stringify(jsonstr), //转换为json字符串
contentType:"application/json",
error: function(XmlHttpRequest, textStatus, errorThrown) {
alert("操作失败!");
},
success: function(result) {
console.log(result) //console变量在ie低版本下不能用
alert(result.showapi_res_code)
}
});
});

在chorme中调试显示:
api接口中ajax数据请求与数据返回的小坑

客服端提交的原始数据:
api接口中ajax数据请求与数据返回的小坑

补充知识点:
JSON字符串与JSON对象的区别
JSON对象:

var str2 = { "name": "cool", "sex": "man" };

JSON字符串:

var str1 = '{ "name": "haha", "sex": "woman" }';

js中如何转换:
1、JSON字符串转换为JSON对象

var obj = eval(‘(’ + str1+ ‘)’);//eval()函数是js自带方法
var obj = JSON.parse(str1); //浏览器支持的转换方式
var obj = $.parseJSON( str1);//jQuery方式
var obj = str1.parseJSON();//引用json.js

2、JSON对象转换为JSON字符串

var s=JSON.stringify(str2); //浏览器支持的转换方式
var s=str2.toJSONString(); //引用json.js


网页标题:api接口中ajax数据请求与数据返回的小坑
分享地址:http://lszwz.com/article/peicsd.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉,无效全额退款