|
|
@@ -1,39 +1,51 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html>
|
|
|
-<head>
|
|
|
-<meta charset="UTF-8">
|
|
|
-<title>Input Your website</title>
|
|
|
-<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
|
|
|
- <style>
|
|
|
- .css-input { margin-bottom: 0; text-shadow:0px 0px 0px rgba(42,42,42,.75); text-align:left; border-radius:8px; border-width:3px; border-style:solid; background-color:#ffffff; border-color:#419fd1; box-shadow: -7px 0px 10px 0px rgba(7,76,214,.0); font-weight:normal; font-family:sans-serif; font-size:16px;width:500px }
|
|
|
- .css-input:focus { outline:none; }
|
|
|
+<style>
|
|
|
+.css-input {
|
|
|
+ margin-bottom: 0;
|
|
|
+ text-shadow: 0px 0px 0px rgba(42, 42, 42, .75);
|
|
|
+ text-align: left;
|
|
|
+ border-radius: 8px;
|
|
|
+ border-width: 3px;
|
|
|
+ border-style: solid;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-color: #419fd1;
|
|
|
+ box-shadow: -7px 0px 10px 0px rgba(7, 76, 214, .0);
|
|
|
+ font-weight: normal;
|
|
|
+ font-family: sans-serif;
|
|
|
+ font-size: 16px;
|
|
|
+ width: 500px
|
|
|
+}
|
|
|
+
|
|
|
+.css-input:focus {
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
.btn {
|
|
|
- display: inline-block;
|
|
|
- padding: 6px 12px;
|
|
|
- margin-bottom: 0;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 1.42857143;
|
|
|
- text-align: center;
|
|
|
- white-space: nowrap;
|
|
|
- vertical-align: middle;
|
|
|
- -ms-touch-action: manipulation;
|
|
|
- touch-action: manipulation;
|
|
|
- cursor: pointer;
|
|
|
- -webkit-user-select: none;
|
|
|
- -moz-user-select: none;
|
|
|
- -ms-user-select: none;
|
|
|
- user-select: none;
|
|
|
- background-image: none;
|
|
|
- border: 1px solid transparent;
|
|
|
- border-radius: 4px;
|
|
|
- color: #fff;
|
|
|
- background-color: #337ab7;
|
|
|
- border-color: #2e6da4;
|
|
|
- margin-left: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 6px 12px;
|
|
|
+ margin-bottom: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 1.42857143;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ vertical-align: middle;
|
|
|
+ -ms-touch-action: manipulation;
|
|
|
+ touch-action: manipulation;
|
|
|
+ cursor: pointer;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+ background-image: none;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #337ab7;
|
|
|
+ border-color: #2e6da4;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
</style>
|
|
|
- <script type="text/javascript">
|
|
|
+<script type="text/javascript">
|
|
|
$(document).ready(function () {
|
|
|
$("#button").click(function () {
|
|
|
if($("#url").val() == '') return false;
|
|
|
@@ -44,7 +56,13 @@
|
|
|
data: $('#shorturl').serialize(), // 要提交的表单,必须使用name属性
|
|
|
//async: false,
|
|
|
success: function (data) {
|
|
|
- $("#result").html(data);//输出提交的表表单
|
|
|
+ var parsedJson = jQuery.parseJSON(data);
|
|
|
+ if(parsedJson.status == 1){
|
|
|
+ var msg = parsedJson.url
|
|
|
+ }else if(parsedJson.status == 0){
|
|
|
+ msg = parsedJson.msg
|
|
|
+ }
|
|
|
+ $("#res").val(msg);
|
|
|
},
|
|
|
error: function (request) {
|
|
|
alert("Connection error");
|
|
|
@@ -53,13 +71,12 @@
|
|
|
return false;
|
|
|
});
|
|
|
});
|
|
|
- </script>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
+</script>
|
|
|
<h2>请输入需要转换的网址</h2>
|
|
|
<form id="shorturl" action method="POST">
|
|
|
-<input type="text" id="url" name="url" class="css-input" ><button class="btn" id="button">提交</button>
|
|
|
+ <input type="text" id="url" name="url" class="css-input">
|
|
|
+ <button class="btn" id="button">提交</button>
|
|
|
</form>
|
|
|
-<div id="result"></div>
|
|
|
-</body>
|
|
|
-</html>
|
|
|
+<div>
|
|
|
+ <input id="res" readonly="true" placeholder="输出结果" />
|
|
|
+</div>
|
