本文目录一览：
- 1、如何用js获取鹰眼web api v2.0接口的message
- 2、请问html的js调用webapi接口？
- 3、vue.js 怎么调用webapi
- 4、js调用webapi如何传递日期类型参数
- 5、js调用webapi、 webservice等接口时，怎样解决调用时的json跨域问题
- 6、如何使 WebAPI 自动生成漂亮又实用在线API文档
如何用js获取鹰眼web api v2.0接口的message
先定义一个简单的webapi，简单到差不多直接用vs2010自动生成的webapi代码。 其中的TestModle是一个简单的class，如下 public class TestModle { public string a { get; set; } public string b { get; set; } public string c { get; set; } } 前端页面放四个代表get，post，put，delete的按钮，在加一个div显示返回值 前端代码中加载jquery，在定义四个按钮的click事件 get和post，我习惯用$.get和$.post，当然也能用$.ajax. get直接返回webapi get的return值，post的话我就不在后端做处理了直接返回传入的值，这里只做示范 put和delete，只能用$.ajax来处理。 put的话一般用于update某个id的数据信息 delete用于删除某个id的数据，如下图所示 点击每个按钮，可以在页面上看到相应的效果
请问html的js调用webapi接口？
引用jquery，有很方便的GET调用方法：
!DOCTYPE html
html
head
meta http-equiv=”content-type” content=”text/html; charset=UTF-8″
meta name=”viewport” content=”width=device-width, initial-scale=1″
!– src值为文件位置路径 —
script type=”text/javascript” charset=”UTF-8″ src=”javascript/jquery-1.12.1.js”/script
title测试案例/title
!– 语法：jQuery.getJSON(url,data,success(data,status,xhr)) —
script type=”text/javascript” charset=”UTF-8″
function getToken(){
$.getJSON(“”, {“id”:111,”secret”:2352532}, function(result){
alert(result.access_token);
});
}
/script
/head
body
button onclick=”getToken()” style=”width: 120px; height: 60px;”获取Token/button
/body
/html
vue.js 怎么调用webapi
：Vue.js在数据绑定的API设计上借鉴了Angular的指令机制： 用户可以通过具有特殊前缀的HTML 属性来实现数据绑定，也可以使用常见的花括号模板插值，或是在表单元素上使用双向绑定： {{msg}} 插值本质上也是指令，只是为了方便模板的书写。
js调用webapi如何传递日期类型参数
js调用webapi如何传递日期类型参数
先把jsp里面的日期格式化成字符串，然后传给js当作参数传到Date就可以了。
1、格式化jsp的时间：
%@ page contentType=”text/html;charset=gb2312″%
%@ page import=”java.util.*”%
%@ page import=”java.text.*”%
html
body
现在的时间：
%SimpleDateFormat s = new SimpleDateFormat(“yyyyMMddHHmmss”);
Date date = new Date();
%
%=s.format(date)%
/body
/html
2、传值给js
var dt1=”%=s.format(date)%”;
var oDate1 = new Date(dt1);
这样就可以把字符串的日期转换成js的date类型了。
js调用webapi、 webservice等接口时，怎样解决调用时的json跨域问题
void还可以被用在函数参数位置，表示我们明确希望这个函数在被调用时不需要任何参数。例如上面的函数printmessage也可以写为以下形式：
void
printmessage
(void)
{
cout
“I’m
a
function!”;
}
如何使 WebAPI 自动生成漂亮又实用在线API文档
1.1 SwaggerUI
SwaggerUI 是一个简单的Restful API 测试和文档工具。简单、漂亮、易用（官方demo）。通过读取JSON 配置显示API. 项目本身仅仅也只依赖一些 html,css.js静态文件. 你可以几乎放在任何Web容器上使用。
1.2 Swashbuckle
Swashbuckle 是.NET类库,可以将WebAPI所有开放的控制器方法生成对应SwaggerUI的JSON配置。再通过SwaggerUI 显示出来。类库中已经包含SwaggerUI 。所以不需要额外安装。
2.快速开始
创建项目 OnlineAPI来封装百度音乐服务(示例下载) ，通过API可以搜索、获取音乐的信息和播放连接。
我尽量删除一些我们demo中不会用到的一些文件，使其看上去比较简洁。
WebAPI 安装 Swashbuckle
Install-Package Swashbuckle
代码注释生成文档说明。
Swashbuckle 是通过生成的XML文件来读取注释的，生成 SwaggerUI，JSON 配置中的说明的。
安装时会在项目目录 App_Start 文件夹下生成一个 SwaggerConfig.cs 配置文件，用于配置 SwaggerUI 相关展示行为的。如图：
将配置文件大概99行注释去掉并修改为
c.IncludeXmlComments(GetXmlCommentsPath(thisAssembly.GetName().Name));
并在当前类中添加一个方法
/// summary
/// /summary
/// param name=”name”/param
/// returns/returns
protected static string GetXmlCommentsPath(string name)
{
return string.Format(@”{0}\bin\{1}.XML”, AppDomain.CurrentDomain.BaseDirectory, name);
}
紧接着你在此Web项目属性生成选卡中勾选 “XML 文档文件”，编译过程中生成类库的注释文件
添加百度音乐 3个API
访问 ;youhost/swagger/ui/index,最终显示效果
我们通过API 测试API 是否成功运行
3.添加自定义HTTP Header
在开发移动端 API时常常需要验证权限，验证参数放在Http请求头中是再好不过了。WebAPI配合过滤器验证权限即可
首先我们需要创建一个 IOperationFilter 接口的类。IOperationFilter
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Http.Description;
using System.Web.Http.Filters;
using Swashbuckle.Swagger;
namespace OnlineAPI.Utility
{
public class HttpHeaderFilter : IOperationFilter
{
public void Apply(Operation operation, SchemaRegistry
schemaRegistry, ApiDescription apiDescription)
{
if (operation.parameters == null) operation.parameters = new
ListParameter();
var filterPipeline =
apiDescription.ActionDescriptor.GetFilterPipeline();
//判断是否添加权限过滤器
var isAuthorized = filterPipeline.Select(filterInfo =
filterInfo.Instance).Any(filter = filter is IAuthorizationFilter);
//判断是否允许匿名方法
var allowAnonymous =
apiDescription.ActionDescriptor.GetCustomAttributesAllowAnonymousAttribute().Any();
if (isAuthorized !allowAnonymous)
{
operation.parameters.Add(new Parameter
{
name = “access-key”,
@in = “header”,
description = “用户访问Key”,
required = false,
type = “string”
});
}
}
}
}
在 SwaggerConfig.cs 的 EnableSwagger 配置匿名方法类添加一行注册代码
c.OperationFilterHttpHeaderFilter();
添加Web权限过滤器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Web;
using System.Web.Http;
using System.Web.Http.Controllers;
using Newtonsoft.Json;
namespace OnlineAPI.Utility
{
/// summary
///
/// /summary
public class AccessKeyAttribute : AuthorizeAttribute
{
/// summary
/// 权限验证
/// /summary
/// param name=”actionContext”/param
/// returns/returns
protected override bool IsAuthorized(HttpActionContext actionContext)
{
var request = actionContext.Request;
if (request.Headers.Contains(“access-key”))
{
var accessKey = request.Headers.GetValues(“access-key”).SingleOrDefault();
//TODO 验证Key
return accessKey == “123456789”;
}
return false;
}
/// summary
/// 处理未授权的请求
/// /summary
/// param name=”actionContext”/param
protected override void HandleUnauthorizedRequest(HttpActionContext actionContext)
{
var content = JsonConvert.SerializeObject(new {State = HttpStatusCode.Unauthorized});
actionContext.Response = new HttpResponseMessage
{
Content = new StringContent(content, Encoding.UTF8, “application/json”),
StatusCode = HttpStatusCode.Unauthorized
};
}
}
}
在你想要的ApiController 或者是 Action 添加过滤器
[AccessKey]
最终显示效果
4.显示上传文件参数
SwaggerUI 有上传文件的功能和添加自定义HTTP Header 做法类似，只是我们通过特殊的设置来标示API具有上传文件的功能
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http.Description;
using Swashbuckle.Swagger;
namespace OnlineAPI.Utility
{
/// summary
///
/// /summary
public class UploadFilter : IOperationFilter
{
/// summary
/// 文件上传
/// /summary
/// param name=”operation”/param
/// param name=”schemaRegistry”/param
/// param name=”apiDescription”/param
public void Apply(Operation operation, SchemaRegistry schemaRegistry, ApiDescription apiDescription)
{
if (!string.IsNullOrWhiteSpace(operation.summary) operation.summary.Contains(“upload”))
{
operation.consumes.Add(“application/form-data”);
operation.parameters.Add(new Parameter
{
name = “file”,
@in = “formData”,
required = true,
type = “file”
});
}
}
}
}
在 SwaggerConfig.cs 的 EnableSwagger 配置匿名方法类添加一行注册代码
c.OperationFilterUploadFilter();
API 文档展示效果
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/237038.html
微信扫一扫 
支付宝扫一扫 