本文目錄一覽：
- 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/zh-tw/n/237038.html
微信掃一掃 
支付寶掃一掃 