app_interface_debug
/
index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta content="" name="description" />
    <meta content="webthemez" name="author" />
    <title>Title</title>
    <!-- Bootstrap Styles-->
    <link href="css/bootstrap.css" rel="stylesheet" />
    <style>
		.group {
			width: 570px;
			margin: 20px auto;
		}
		label {
			width: 50px;
		}
		.input2 {
			width: 430px !important;
		}
	</style>
</head>

<body>
	<img src="/front/anon/getImgCode.htm" class="code-img newImgCod" style="display: none;"/>
	<div class="group form-inline">
		<div class="form-group">
			<label for="type">Type</label>
			<select class="form-control" name="type" id="type">
				<option value="post">post</option>
				<option value="get">get</option>
			</select>
		</div>
	</div>
	<!--
	<div class="group form-inline">
		<div class="form-group">
			<label for="host">Host</label>
			<input type="text" class="form-control input2" id="host" placeholder="host" value="http://127.0.0.1:40070">
		</div>
	</div>
	 -->
	<div class="group form-inline">
		<div class="form-group">
			<label for="url">Url</label>
			<input type="text" class="form-control input2" id="url" placeholder="url">
		</div>
	</div>
	<div class="group form-inline">
	--------------------------------------------------------------------------
	</div>
	<div id="filed-groups">
		<div class="group form-inline filed-group">
			<div class="form-group">
				<label for="filedName">Name</label>
				<input type="text" class="form-control" name="filedName" placeholder="filedName">
			</div>
			<div class="form-group">
				<label for="filedValue">Value</label>
				<input type="email" class="form-control" name="filedValue" placeholder="filedValue">
			</div>
			<button type="submit" class="btn btn-danger btn-delete">delete</button>
		</div>
	</div>
	<div class="group">
		<button type="submit" class="btn btn-info" id="btn-submit">Submit</button>
		<button type="submit" class="btn btn-default" id="btn-add">Add filed</button>
		<button type="submit" class="btn btn-default" id="btn-export">Export data</button>
		<button type="submit" class="btn btn-default" id="btn-import">Import data</button>
		<button type="submit" class="btn btn-warning" id="btn-reset">Reset</button>
	</div>
	<div class="group">
		<textarea class="form-control" rows="6" id="result-msg"></textarea>
	</div>

    <!-- Bootstrap Js -->
	<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="js/popper.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

	<!-- My Js -->
	<script type="text/javascript">
		// 提交
		$('#btn-submit').click(function() {
			var type = $.trim($('#type').val());
			var host = $.trim($('#host').val());
			var url = $.trim($('#url').val());
			if (host != '') {
				url = host + url;
			}
			if (url == '') {
				alert('input url');
				return;
			}
			$.ajax({
				type: type,
				url: url,
				dataType: 'json',
				crossDomain: true,
				data: getData(),
				success: function(res){
					console.log(JSON.stringify(res));
					$('#result-msg').val(JSON.stringify(res));
				},error:function(res){
					alert('error: ' + JSON.stringify(res));
				}
			});
		});

		// 添加字段
		$('#btn-add').click(function() {
			var newFiledGroup = $('.filed-group').eq(0).clone(true);
			newFiledGroup.find('input[name=filedName]').val('');
			newFiledGroup.find('input[name=filedValue]').val('');
			$('.filed-group').last().after(newFiledGroup);
		});

		//删除字段
		$('body').on('click', '.btn-delete', function() {
			$(this).closest('.filed-group').remove();
		});

		//重置
		$('#btn-reset').click(function() {
			$('.filed-group').each(function() {
				var _this = $(this);
				_this.find('input[name=filedName]').val('');
				_this.find('input[name=filedValue]').val('');
			});
		});

		//导出data
		$('#btn-export').click(function() {
			$('#result-msg').val(JSON.stringify(getData()));
		});

		//导入data
		$('#btn-import').click(function() {
			var _dataStr = $.trim($('#result-msg').val());
			var _data = JSON.parse(_dataStr);
			var _index = 0;
			for(var key in _data) {
				var _newFiledGroup = $('#filed-groups').find('.filed-group').eq(0).clone(true);
				_newFiledGroup.find('input[name=filedName]').val(key);
				_newFiledGroup.find('input[name=filedValue]').val(_data[key]);
				if (_index == 0) {
					$('#filed-groups').empty();
				}
				$('#filed-groups').append(_newFiledGroup);
				_index ++;
			}
		});

		// 获得data
		function getData() {
			var data = {};
			$('.filed-group').each(function() {
				var _this = $(this);
				var _key = _this.find('input[name=filedName]').val();
				var _value = _this.find('input[name=filedValue]').val();
				data[_key] = _value;
			});
			return data;
		}

	</script>

</body>

</html>