index - 副本

  • 格式:docx
  • 大小:16.18 KB
  • 文档页数:11

html<!DOCTYPE HTML><html lang="en"><head><!-- 关键字--><meta name="keywords" content="your tags" /><!-- 关键词--><meta name="description" content="150 words" /><!-- 移动端--><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>搜索工具</title><link rel="stylesheet" type="text/css" href="../css/reset.css"><link rel="stylesheet" type="text/css" href="../css/index.css"><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"><script type="text/javascript" src="js/lib/jquery-2.2.4.min.js"></script><script type="text/javascript" src="js/app/index.js"></script></head><body><div class="wp"><div class="input-group"><span class="input-group-addon" id="sizing-addon2">URL</span><input type="text" class="form-control" placeholder="Url" aria-describedby="sizing-addon2"></div></div><div class="col-lg-4"><div class="input-group"><input type="text" class="form-control" placeholder="Search for..."><span class="input-group-btn"><button class="btn btn-default" type="button">Search</button></span></div></div><div class="content"><div class=" left"><p>explain</p><div>内容</div></div><div class=" right"><p>结构化</p><div>内容</div></div></div></body></html>CssIndex.css.wp{margin: 50px 0 50px 20%;}.wp .input-group .form-control{width:25%;}.col-lg-4{margin: 0px 0 50px 19.2%;}.content{min-height: 600px;width:1200px;margin: 0 auto;margin-top: 200px;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;background: rgba(212, 212, 212, 0.8);}.content .left {width: 590px;min-height: 588px;margin: 5px;float:left;border: 2px solid #35dcb7;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}.content .right{width: 590px;min-height: 588px;margin: 5px;float:right;border: 2px solid #35dcb7;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}.content p{padding-left: 20px;height: 30px;font-family: '微软雅黑';font-size: 20px;line-height: 30px;border-bottom: 1px solid #35dcb7;}.content .left div{padding-left: 20px;}.content .right div{padding-left: 20px;}reset.css/* v2.0 | 20110126/eric/tools/css/reset/ License: none (public domain)*/html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body {color: #6a6a6a;font-family: '微软雅黑',arial;font-size: 12px;}ol, ul {list-style: none;}blockquote, q {quotes: none;}a{text-decoration: none;color: #6a6a6a;} blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}.clear{clear:both;width: 100%;}XMLHttpRequestJson.html<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Demo</title><style>body, input, select, button, h1 {font-size: 28px;line-height:1.7;}</style></head><body><h1>员工查询</h1><label>请输入员工编号:</label><input type="text" id="keyword" /><button id="search">查询</button><p id="searchResult"></p><h1>员工新建</h1><label>请输入员工姓名:</label><input type="text" id="staffName" /><br><label>请输入员工编号:</label><input type="text" id="staffNumber" /><br><label>请选择员工性别:</label><select id="staffSex"><option>女</option><option>男</option></select><br><label>请输入员工职位:</label><input type="text" id="staffJob" /><br><button id="save">保存</button><p id="createResult"></p><script>document.getElementById("search").onclick = function() {var request = new XMLHttpRequest();request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").value);request.send();request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) {var data = JSON.parse(request.responseText);if (data.success) {document.getElementById("searchResult").innerHTML = data.msg;} else {document.getElementById("searchResult").innerHTML = "出现错误:" + data.msg;}} else {alert("发生错误:" + request.status);}}}}document.getElementById("save").onclick = function() {var request = new XMLHttpRequest();request.open("POST", "serverjson.php");var data = "name=" + document.getElementById("staffName").value+ "&number=" + document.getElementById("staffNumber").value+ "&sex=" + document.getElementById("staffSex").value+ "&job=" + document.getElementById("staffJob").value;request.setRequestHeader("Content-type","application/x-www-form-urlencoded");request.send(data);request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) {var data = JSON.parse(request.responseText);if (data.success) {document.getElementById("createResult").innerHTML = data.msg;} else {document.getElementById("createResult").innerHTML = "出现错误:" + data.msg;}} else {alert("发生错误:" + request.status);}}}}</script></body></html>XMLHttpRequestjQuery.html<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Demo</title><style>body, input, select, button, h1 {font-size: 28px;line-height:1.7;}</style></head><body><h1>员工查询</h1><label>请输入员工编号:</label><input type="text" id="keyword" /><button id="search">查询</button><p id="searchResult"></p><h1>员工新建</h1><label>请输入员工姓名:</label><input type="text" id="staffName" /><br><label>请输入员工编号:</label><input type="text" id="staffNumber" /><br><label>请选择员工性别:</label><select id="staffSex"><option>女</option><option>男</option></select><br><label>请输入员工职位:</label><input type="text" id="staffJob" /><br><button id="save">保存</button><p id="createResult"></p><script src="/libs/jquery/1.11.1/jquery.js"></script><script>$(document).ready(function(){$("#search").click(function(){$.ajax({type: "GET",url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),dataType: "json",success: function(data) {if (data.success) {$("#searchResult").html(data.msg);} else {$("#searchResult").html("出现错误:" + data.msg);}},error: function(jqXHR){alert("发生错误:" + jqXHR.status);},});});$("#save").click(function(){$.ajax({type: "POST",url: "serverjson.php",data: {name: $("#staffName").val(),number: $("#staffNumber").val(),sex: $("#staffSex").val(),job: $("#staffJob").val()},dataType: "json",success: function(data){if (data.success) {$("#createResult").html(data.msg);} else {$("#createResult").html("出现错误:" + data.msg);}},error: function(jqXHR){alert("发生错误:" + jqXHR.status);},});});});</script></body></html>XMLHttpRequestjQueryJsonp.html<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Demo</title><style>body, input, select, button, h1 {font-size: 28px;line-height:1.7;}</style></head><body><h1>员工查询</h1><label>请输入员工编号:</label><input type="text" id="keyword" /><button id="search">查询</button><p id="searchResult"></p><h1>员工新建</h1><label>请输入员工姓名:</label><input type="text" id="staffName" /><br><label>请输入员工编号:</label><input type="text" id="staffNumber" /><br><label>请选择员工性别:</label><select id="staffSex"><option>女</option><option>男</option></select><br><label>请输入员工职位:</label><input type="text" id="staffJob" /><br><button id="save">保存</button><p id="createResult"></p><script src="/libs/jquery/1.11.1/jquery.js"></script><script>$(document).ready(function(){$("#search").click(function(){$.ajax({type: "GET",url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php?number=" + $("#keyword").val(),dataType: "jsonp",jsonp: "callback",success: function(data) {if (data.success) {$("#searchResult").html(data.msg);} else {$("#searchResult").html("出现错误:" + data.msg);}},error: function(jqXHR){alert("发生错误:" + jqXHR.status);},});});$("#save").click(function(){$.ajax({type: "POST",url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php",data: {name: $("#staffName").val(),number: $("#staffNumber").val(),sex: $("#staffSex").val(),job: $("#staffJob").val()},dataType: "json",success: function(data){if (data.success) {$("#createResult").html(data.msg);} else {$("#createResult").html("出现错误:" + data.msg);}},error: function(jqXHR){alert("发生错误:" + jqXHR.status);},});});});</script></body></html>。