動態輸出js代碼,動態執行js代碼

本文目錄一覽：

• 1、如何用js（jQuery）動態輸出json數據
• 2、如何查看js動態生成的js代碼
• 3、morris.js 其js代碼如下，該怎麼動態的更改這些數據呢？
• 4、js可以生成js代碼嗎?
• 5、如何使用js動態生成html代碼
• 6、如果通過遠程調用js代碼的方式在當前頁面內動態顯示內容？

如何用js（jQuery）動態輸出json數據

樓上的能實現

就是用循環

也可以用eval去做

個人覺得eval比較好點

如何查看js動態生成的js代碼

Javascript動態生成的HTML內容無法在網頁源文件中查看，但可以通過在瀏覽器地址欄敲入以下Javascript代碼查看Body元素包含的內容：

javascript:document.write(document.body.innerHTML.replace(//g, “”).replace(//g, “”))

下面的Javascript代碼可以查看某個層包含的內容：

javascript:document.write(document.getElementById(‘box151’).innerHTML.replace(//g, “”).replace(//g, “”))

morris.js 其js代碼如下，該怎麼動態的更改這些數據呢？

步驟

在本文中，我們將在 Asp.Net 創建一個簡單的 Restful API，並整合 Swashbuckle 和 Swagger UI。本文分為三部分。

創建 Asp.Net Web API項目

通過實體數據模型 （.edmx） 和 Scaffold API控件連接到 Sql Server數據庫

整合 Swashbuckle/Swagger UI框架以描述 API 操作

創建 Asp.Net Web API 項目

首先創建一個新的“Asp.Net Web應用”，將其命名為“Swagger”

從模板中選擇 Web API，也就是說， Visual Studio將把 MVC、與Web API相關的文件夾和核心引用添加到我們的應用中。然後，點擊“更改權限”，選擇“無權限”後點擊OK。通過以上設置，我們將跳過項目中與賬戶相關的控件和視圖。

執行 Visual Studio 啟動程序後，項目文檔和文件夾的結構如下：

我們將在應用 App_Start 文件夾中將 MVC 控件的路徑設置為 RouteConfig.cs ，將Web API控件的路徑設置為 WebApiConfig.cs 。

註：你可以在該區域看到“幫助頁”文件夾。此文件夾將包含 Visual Studio 生成的模型、視圖、控件和其他與幫助相關的文檔，以描述Web API幫助。我們將在下文對這一問題進行分析。

如果查看 NuGet 包管理器中的“已安裝包”，你會發現項目中已經添加了“Microsoft Asp.Net Web API 2.2 幫助頁”包、Razor包和核心包。

通過實體數據模型（edmx）和Scaffold API控件連接到 SQL Server數據庫

我們先通過實體數據模型將應用連接到數據庫表。首先，創建新的“ADO.NET實體數據模型”項目，在模型文件夾中將其命名為 “SwaggerModel”。

附件為在數據庫中創建新表格的腳本文件。

從嚮導中選擇“數據庫中的 EF Designer”，並點擊“下一步”連接到數據庫服務器（此處即為SQL Server）。

在實體數據模型嚮導頁面中，選擇連接到 Sql Server，並將連接字符串命名為“SwaggerConStr”，該字符串將保存在web.config文檔中。

點擊“下一步”，選擇實體框架版本（即本文中的6.x）。點擊“下一步”，選擇EDMX公司表，將其保存在EDMX文檔中。

選擇表格，點擊“完成”按鍵，最後會生成POCO類“Company.cs”和數據庫配置指令類“SwaggerConStr” 。

現在已經創建了實體數據模型和配置指令，那麼我們可以通過Visual Studio支架特性創建新的API控件。但為了充分利用配置指令，在給 API 控件建立支架前，我們應先建立應用。即在建立支架之前，刪除控件文件夾中現有的ValuesController.cs。

點擊控件文件夾，並添加“控件…”，即打開帶有各種支架選項的“添加支架”窗口，選擇“Web API 2 Controller with actions, using Entity Framework（帶有動作、使用實體框架的Web API 2控件”，然後點擊“添加”。

在添加控件窗口中選擇模型（即本文的Company.cs）以及數據配置指令類（SwaggerConStr.cs）。將新控件命名為“CompanyController.cs”，並點擊“添加”。

為每個http 動作（GET, PUT, POST and DELETE）操作創建的新控件如下：

建立和運行應用後，可看到如下截圖。你可以在用戶界面頂端導航中看到“API”鏈接，點擊後進入“Asp.Net API幫助頁”頁面。幫助主頁如下所示。

註：為了檢查API，應在url中添加“/api/company”，並在瀏覽器中提交。

點擊任意操作鏈接後將顯示更多詳情，如帶有URI、本體參數的“請求”信息、“響應”類型、json或xml等格式。下圖為GET方法截圖：

雖然Visual Studio團隊花費了很大精力為這項服務的消費者展示Web API幫助，但這項服務的薄弱點是用戶界面過於基礎，而且我們無法使用動作方法。這正是有必要使用Swagger UI Swashbuckle的原因。

整合 Swashbuckle/Swagger UI，以描繪API操作

由Swagger網站可知，Swagger是展示RESTful API的簡單而強大的方法，它為此API提供了強大的接口。

由Swashbuckle GitHub可知，Swashbuckle可將Swagger無縫添加到WebApi中！將ApiExplorer與Swagger/swagge-ui 合併可以給 API 用戶帶來豐富的探索、文件和操作體驗。除Swagger生成器外，Swashbuckle還包含嵌入式版本的swagger-ui。

將Swashbuckle添加到 Web API中

點擊進入“ Manage NuGet Packages…（管理NuGet包）”，並在線搜索“Swashbuckle”。在列表中選擇Richard Morris創建的5.2.2版 “Swashbuckle – Swagger for Web API”，點擊安裝。

這一操作會將引用添加到“Swashbuckle – Swagger for Web API”與“Swashbuckle.Core – Swagger for Web API”中。且後者會在經過依賴檢查後添加到我們的項目中。在packages.config中也是如此。

[HTML] 純文本查看 複製代碼

?

12   package id=”Swashbuckle” version=”5.2.2″ targetFramework=”net45″ /package id=”Swashbuckle.Core” version=”5.2.2″ targetFramework=”net45″ /   

成功安裝後，我們可以在App_Start文件夾中看到一個新的“SwaggerConfig.cs”配置文檔，所有Swagger相關配置都會在此進行設置。

為了能直接鏈接到Swagger API 接口，應將下列所有動作鏈接到“_Layout.cshtml”頁面的頂部導航欄。

[HTML] 純文本查看 複製代碼

?

1   li@Html.ActionLink(“Swagger Help”, “”, “Swagger”, new { area = “” }, null)/li   

js可以生成js代碼嗎?

當然可以，腳本型的語言都有這個功能

js里有個函數叫eval()，就是用來動態執行代碼的。

例如eval(“alert(1)”);就會彈出對話框顯示1，如果eval裡面的參數是更加複雜的js代碼就可以實現更複雜的功能。

如何使用js動態生成html代碼

所謂動態生成html代碼就是源文件代碼中原來沒有內容或者需要重新改變此處的要顯示的文字或內容，需要用JavaScript代碼來實現。動態生成是一種很常見常用的方法。

用innerHTML寫入html代碼：

div id=”zd”/div

‘即為向id為zd的標籤寫入內容

scriptdocument.getElementById(“zd”).innerHTML=”這裡即為要寫入的代碼”/script

說明：

innerHTML：向對象插入內容。

如果通過遠程調用js代碼的方式在當前頁面內動態顯示內容？

這段js代碼自動執行，功能是在head或者body標籤中創建一個script標籤，而這個script標籤引入了多說的embed.js文件資源，評論框的功能就在這個js文件中。 你要實現抄過來就是了。。。