<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
//内置样式设置
*{
margin: 0px;
padding: 0px;
}
.rg_center1{
font-size:36px;
background:#041D84;
color:white;
text-align: center;
position:absolute;
}
.td_1{
width:80%;
height: 20%;
}
.td_left{
text-align: center;
font-size:26px;
}
.td_right{
width: 80%;
height: 30px;
outline: #041D84;
}
.td_2{
width: 50PX;
}
</style>
//引入javascript文件
<script src=”../js/jquery-1.11.1.min.js” type=”text/javascript”></script>
//通过axios进行数据传输（Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求）
<script src=”js/axios.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function wszx() {//调用方法
var username = document.getElementById(“username”).value;//获取数据，通过id的形式
var zxbt = document.getElementById(“zxbt”).value;
var name = document.getElementById(“name”).value;
var tel = document.getElementById(“tel”).value;
var email = document.getElementById(“email”).value;
var lrnb = document.getElementById(“lrnb”).value;
var nrgk = document.getElementById(“nrgk”).value;
var zxnr = document.getElementById(“zxnr”).value;
var payload = {“username”:username,”zxbt”:zxbt,”name”:name,”tel”:tel,”email”:email,”lrnb”:lrnb,”nrgk”:nrgk,”zxnr”:zxnr};
axios({数据交互
method: ‘post’,//交互方式
url: “http://localhost:9050/common/newSchema?title=oppo”,//通过本地地址进行验证；common下的newSchema方法，数据库为oppo
data: JSON.stringify(payload),//是一种轻量级的、基于文本的、开放的数据交换格式
headers: {
‘Content-Type’: ‘application/json;charset=UTF-8’,
},
}).then(res => {
ConvertList = res.data;
console.log(“aaaaaa”, ConvertList)
}).catch(function (error) {
console.log(error);
});
}
</script>
</head>
<body>
<p class=”rg_center1″ style=”width: 100%;height: 10%;”>昆山市制造业智能化改造和数字化转型平台</p>
<center>
<form action=”data.html”>
<div style=”height: 70px;width: auto;”></div>
<table class=”td_1″ style=”border-collapse: separate;border-spacing: 0px 40px;”>
<tr class=”td_2″>
<td class=”td_left”>姓名/单位:</td>
<td>
<input class=”td_right” required type=”text” name=”username” id=”username”>
</td>
</tr>
<tr>
<td class=”td_left”>咨询标题:</td>
<td >
<input class=”td_right” required type=”text” name=”zxbt” id=”zxbt”>
</td>
</tr>
<tr>
<td class=”td_left”>联系人: </td>
<td>
<input class=”td_right” required type=”text” name=”name” id=”name”>
</td>
</tr>
<tr>
<td class=”td_left”>联系电话:</td>
<td>
<input class=”td_right” required type=”text” name=”tel” id=”tel”>
</td>
</tr>
<tr>
<td class=”td_left”>电子邮件: </td>
<td>
<input class=”td_right” required type=”email” name=”email” id=”email”>
</td>
</tr>
<tr>
<td class=”td_left”>内容类别:</td>
<td class=”td_right” id=”lrnb”>
<input type=”radio” name=”tell”>建议
<input type=”radio” name=”tell” style=”margin-left: 30px;”>提问
<input type=”radio” name=”tell” style=”margin-left: 30px;”>咨询
<input type=”radio” name=”tell” style=”margin-left: 30px;”>需求
<input type=”radio” name=”tell” style=”margin-left: 30px;”>其他
</td>
</tr>
<tr>
<td class=”td_left”>咨询内容:</td>
<td >
<textarea name=”zxnr” class=”td_right” required id=”zxnr”></textarea>
</td>
</tr>
<tr>
<td class=”td_left”>内容公开:</td>
<td class=”td_right” id=”nrgk” >
<input type=”radio” name=”zx”>公开
<input type=”radio” name=”zx” style=”margin-left: 30px;”>不公开
</td>
</tr>
<tr>
<td colspan=”2″ align=”center”>
<input type=”reset” value=”重置” id=”btn_sub” style=”width: 50px;height: 30px ;”>
<input type=”submit” value=”提交” id=”btn_sub1″ onclick=”wszx()” style=”margin-left: 30px;width: 50px;height: 30px ;”>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
原文地址：http://www.cnblogs.com/huojiliaoyuan/p/16879267.html
