<!DOCTYPE html>
<html>

	<head>
		<title>VDN WebAPI 调用示例</title>
		<script language='javascript' src="scripts/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="scripts/jquery.jsontotable.min.js"></script>

		<style>
			.jsontotable table,
			.jsontotable th,
			.jsontotable td {
				border: 1px solid black;
				margin: 10px;
				padding: 5px;
				font-size: 12pt;
			}
			
			body {
				line-height: 75%;
				font-family: 宋体, 黑体;
				font-size: 10pt;
			}
			
			table {
				font-size: 100%;
				text-align: left;
				margin-top: 1em;
			}
			
			tr {
				margin: .50em;
				vertical-align: top;
			}
			
			td {
				margin: .50em;
				vertical-align: middle;
				background-color: #EEE;
				padding: 2px;
			}
		</style>

		<script>
			//服务器地址
			var serverURL;
			//clear outpub
			function clear() {
				$("#t_all").text("");
				$("#t_return").text("");
				$("#jsontotable-obj").html("");
			}

			$(document).ready(function() {
				$("#t_server").val(window.location.protocol + "//" + window.location.host + "/api");
				serverURL = $("#t_server").val();
				//=======================================用户登录============================================
				/*身份验证方式为用户登录 */
				$("#b_login").click(function() {
					try {
						clear();
						$.ajax({
							url: serverURL + "?method=[PBPlugin].nvo_cross_session_1.f_login_nv&params=123",
							type: 'GET',
							success: function(data, status, xhr) {
								//完整的返回值
								$("#t_all").text(data);
								if(data == "ok") {
									//登录成功
									$("#t_return").text(data);
								} else {
									//Error 系统返回错误信息
									alert(data)
								}
							},
							error: function(xhr, error, exception) {
								//ajax 发生错误    
								alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
							}
						});
					} catch(e) {
						//代码发生异常
						alert(e.name + ":" + e.message + " code:" + e.number);
					}
					return false;
				});
				//=======================================匿名访问============================================
				/*使用Get形式获取text文本 */
				$("#b_get_text").click(function() {
					try {
						clear();
						$.ajax({
							url: serverURL + "?method=[PBPlugin].nvo_obj.f_good&params=a1/a2",
							type: 'GET',
							success: function(data, status, xhr) {
								//完整的返回值
								$("#t_all").text(data);
								if(data.substring(0, 5) != "error") {
									//所需要的核心返回值
									$("#t_return").text(data);
									$("#jsontotable-obj").html("no data table");
								} else {
									//Error 系统返回错误信息
									alert(data)
								}
							},
							error: function(xhr, error, exception) {
								//ajax 发生错误    
								alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
							}
						});
					} catch(e) {
						//代码发生异常
						alert(e.name + ":" + e.message + " code:" + e.number);
					}
					return false;
				});
				/*使用Get形式获取json格式 */
				$("#b_get_json").click(function() {
					try {
						clear();
						$.ajax({
							url: serverURL + "?method=[PBPlugin].nvo_obj.f_good&params=a1/a2&format=json",
							type: 'GET',
							success: function(data, status, xhr) {
								//完整的返回值
								$("#t_all").text(JSON.stringify(data));
								if(data.Error == null) {
									//所需要的核心返回值
									$("#t_return").text(data.Result);
									$("#jsontotable-obj").html("no data table");
								} else {
									//Error 系统返回错误信息
									alert(data.Error.Message + "(" + data.Error.Code.toString() + ")")
								}
							},
							error: function(xhr, error, exception) {
								//ajax 发生错误    
								alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
							}
						});
					} catch(e) {
						//代码发生异常
						alert(e.name + ":" + e.message + " code:" + e.number);
					}
					return false;
				});
				/*使用Get形式获取json格式 */
				$("#b_get_data").click(function() {
					try {
						clear();
						$.ajax({
							url: serverURL + "?method=[PBPlugin].f_getdata&params=a1/a2",
							type: 'GET',
							dataType: 'json',
							success: function(data, status, xhr) {
								//完整的返回值
								$("#t_all").text(JSON.stringify(data));
								if(data.Error == null) {
									//所需要的核心返回值
									$("#t_return").text(data.Result);
									//parse table
									$.jsontotable(JSON.parse(data.Result).rows, {
										id: "#jsontotable-obj"
									});
								} else {
									//Error 系统返回错误信息
									alert(data.Error.Message + "(" + data.Error.Code.toString() + ")")
								}
							},
							error: function(xhr, error, exception) {
								//ajax 发生错误    
								alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
							}
						});
					} catch(e) {
						//代码发生异常
						alert(e.name + ":" + e.message + " code:" + e.number);
					}
					return false;
				});
				//POST 方式 返回格式为text
				$("#b_post_text").click(function() {
					try {
						clear();
						var data = {
							ID: "GetData",
							method: "[PBPlugin].f_getstr"
						};
						var jsonStr = JSON.stringify(data);
						$.ajax({
							url: serverURL,
							type: 'POST',
							data: jsonStr,
							dataType: 'text',
							contentType: 'application/json',
							success: function(data, status, xhr) {
								//完整的返回值
								$("#t_all").text(data)
								if(data.substring(0, 5) != "error") {
									//所需要的核心返回值
									$("#t_return").text(data);
									$("#jsontotable-obj").html("no data table");
								} else {
									//Error 系统返回错误信息
									alert(data)
								}
							},
							error: function(xhr, error, exception) {
								//ajax 发生错误    
								alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
							}
						});
					} catch(e) {
						//代码发生异常
						alert(e.name + ":" + e.message + " code:" + e.number);
					}
					return false;
				});
				//POST方式 返回JSON
				$("#b_post_json").click(function() {
					try {
						clear();
						var data = {
							ID: "GetData",
							method: "[PBPlugin].f_getdata",
							Params: ["a1", "a2"]
						};
						var jsonStr = JSON.stringify(data);
						$.ajax({
							url: serverURL,
							type: 'POST',
							data: jsonStr,
							dataType: 'json',
							contentType: 'application/x-www-form-urlencoded; charset=utf-8',
							success: function(data, status, xhr) {
								//完整的返回值
								$("#t_all").text(JSON.stringify(data))
								if(data.Error == null) {
									//所需要的核心返回值
									$("#t_return").text(data.Result);
									//parse table
									$.jsontotable(JSON.parse(data.Result).rows, {
										id: "#jsontotable-obj"
									});
								} else {
									//Error 系统返回错误信息
									alert(data.Error.Message + "(" + data.Error.Code.toString() + ")")
								}
							},
							error: function(xhr, error, exception) {
								//ajax 发生错误    
								alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
							}
						});
					} catch(e) {
						//代码发生异常
						alert(e.name + ":" + e.message + " code:" + e.number);
					}
					return false;
				});
				//POST方式 返回JSON
				$("#b_post_json2").click(function() {
					try {
						clear();
						var data = {
							ID: "GetData",
							method: "[PBPlugin].f_getdata_json",
							Params: ["a1", "a2"]
						};
						var jsonStr = JSON.stringify(data);
						$.ajax({
							url: serverURL,
							type: 'POST',
							data: jsonStr,
							dataType: 'json',
							contentType: 'application/json',
							success: function(data, status, xhr) {
								//完整的返回值
								$("#t_all").text(JSON.stringify(data))
								if(data.Error == null) {
									//所需要的核心返回值
									$("#t_return").text(JSON.stringify(data.Result));
									//parse table
									$.jsontotable(data.Result.rows, {
										id: "#jsontotable-obj"
									});
								} else {
									//Error 系统返回错误信息
									alert(data.Error.Message + "(" + data.Error.Code.toString() + ")")
								}
							},
							error: function(xhr, error, exception) {
								//ajax 发生错误    
								alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
							}
						});
					} catch(e) {
						//代码发生异常
						alert(e.name + ":" + e.message + " code:" + e.number);
					}
					return false;
				});
				//错误处理 文本格式错误信息
				$("#b_error_text").click(function() {
					try {
						clear();
						var data = {
							method: "[PBPlugin].f_error"
						};
						var jsonStr = JSON.stringify(data);
						$.ajax({
							url: serverURL,
							type: 'POST',
							data: jsonStr,
							dataType: 'text',
							contentType: 'application/json',
							success: function(data, status, xhr) {
								//完整的返回值
								$("#t_all").text(data)
								if(data.substring(0, 5) != "error") {
									//所需要的核心返回值
									$("#t_return").text(data);
									$("#jsontotable-obj").html("no data table");
								} else {
									//Error 系统返回错误信息
									alert(data)
								}
							},
							error: function(xhr, error, exception) {
								//ajax 发生错误    
								alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
							}
						});
					} catch(e) {
						//代码发生异常
						alert(e.name + ":" + e.message + " code:" + e.number);
					}
					return false;
				});
				//错误处理 JSON格式错误信息
				$("#b_error_json").click(function() {
					try {
						clear();
						var data = {
							method: "[PBPlugin].f_error"
						};
						var jsonStr = JSON.stringify(data);
						$.ajax({
							url: serverURL,
							type: 'POST',
							data: jsonStr,
							dataType: 'json',
							contentType: 'application/json',
							success: function(data, status, xhr) {
								//完整的返回值
								$("#t_all").text(JSON.stringify(data))
								if(data.Error == null) {
									//所需要的核心返回值
									$("#t_return").text(data.Result);
									//parse table
									$("#jsontotable-obj").html("no data table");
								} else {
									//Error 系统返回错误信息
									alert(data.Error.Message + "(" + data.Error.Code.toString() + ")")
								}
							},
							error: function(xhr, error, exception) {
								//ajax 发生错误    
								alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
							}
						});
					} catch(e) {
						//代码发生异常
						alert(e.name + ":" + e.message + " code:" + e.number);
					}
					return false;
				});
				//转义关键字示例
				$("#b_post_key").click(function() {
					try {
						clear();
						var data = {
							ID: "GetData",
							method: "[PBPlugin].nvo_obj.f_good",
							Params: ["", "转义关键字:\r\nServerPth:#ServerPath#\r\nServerUrl:#ServerUrl#\r\nServerTemp:#ServerTemp#\r\nServerTempUr:#ServerTempUrl#\r\nClientIP:#ClientIP# "]
						};
						var jsonStr = JSON.stringify(data);
						$.ajax({
							url: serverURL,
							type: 'POST',
							data: jsonStr,
							dataType: 'json',
							contentType: 'application/json',
							success: function(data, status, xhr) {
								//完整的返回值
								$("#t_all").text(JSON.stringify(data))
								if(data.Error == null) {
									//所需要的核心返回值
									$("#t_return").text(data.Result);
									//parse table
									$("#jsontotable-obj").html("no data table");
								} else {
									//Error 系统返回错误信息
									alert(data.Error.Message + "(" + data.Error.Code.toString() + ")")
								}
							},
							error: function(xhr, error, exception) {
								//ajax 发生错误    
								alert(error + " " + exception.toString() + " (status:" + xhr.status + " state:" + xhr.readyState + ")");
							}
						});
					} catch(e) {
						//代码发生异常
						alert(e.name + ":" + e.message + " code:" + e.number);
					}
					return false;
				});

				//=====================================================令牌访问===================================================================
				//令牌访问吉安C#示例代码
			});
		</script>

	</head>

	<body>
		<form id="form1" runat="server">
			<h3>WebAPI 调用示例</h3>
			<h4>
            完整信息</h4>
			<textarea id="t_all" style="width: 559px; height: 80px;"></textarea>
			<h4>
            核心信息</h4>
			<textarea id="t_return" style="width: 559px; height: 70px;"></textarea>
			<h4>
            构建数据表</h4>
			<div id="jsontotable-obj" class="jsontotable">
			</div>
			<h4>
            服务器URL</h4>
			<div>
				<input type="text" id="t_server" value="http://localhost:8088/api" onchange="serverURL=this.value;" style="width:500px" /></div>

			<h4>
            用户登录</h4>
			<p> &nbsp; 项目发布时设置身份验证为【用户登录】时就需要执行一个登录，对象名或者函数以_nv结尾
			</p>
			&nbsp;<button id="b_login">用户登录</button>
			<h4>匿名访问</h4> &nbsp;
			<button id="b_get_text">
        Get请求text</button> &nbsp;
			<button id="b_get_json">
        Get请求json</button> &nbsp;
			<button id="b_get_data">
        Get请求Data</button> &nbsp;
			<button id="b_post_text">
        Post请求(返回text)</button> &nbsp;
			<div>
				<p>
					下面的示例同样都是post返回json,分别调用了f_getdata和f_getdata_json,这两个函数的代码是完全一样的。</p>
				<p>
					区别是当函数名以 _json 结尾时，PB的返回值将以json对象作为json的一部分，以对象方式获取值:data.Result.rows (类型:object)
				</p>
				<p>
					否则PB返回值将以字符串的形式作为Result的值，获取值: data.Result(类型:string)</p>
				<br />
			</div>
			&nbsp;
			<button id="b_post_json">
        Post请求(返回json)</button> &nbsp;
			<button id="b_post_json2">
        Post请求2(返回json)</button>
			<h4>
            错误处理</h4>
			<p>
				&nbsp;
				<button id="b_error_text">
            错误处理(text)</button> &nbsp;
				<button id="b_error_json">
            错误处理(json)</button> </p>
			<h4>
            转义关键字</h4>
			<p>传入参数中包含下列关键字#ServerPath#、#ServerUrl#、#ServerTemp#、#ServerTempUrl#、#ClientIP#，</p>
			<p>将被VDN替换为对应的值，详见帮助</p>
			<p>&nbsp;<button id="b_post_key">转义关键字(返回json)</button></p>
			<h4>
            令牌访问 见外部.Net示例代码</h4> &nbsp;

			<div>
				<p>
					注：示例里为了便于查看，每个按钮都编写了独立完整的代码，实际应用中可编写为一个函数传参集中调用。</p>
				<br />
			</div>
		</form>
	</body>

</html>