首页 > 数据库 >ajax获取数据,数据库查询

ajax获取数据,数据库查询

时间:2022-11-10 23:55:24浏览次数:41  
标签:name 数据库 getElementById value 获取数据 ajax var td document

<!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>

标签:name,数据库,getElementById,value,获取数据,ajax,var,td,document
From: https://www.cnblogs.com/huojiliaoyuan/p/16879267.html

相关文章

  • 时许数据库clickhouse数据类型
    一:查看ck支持的数据类型SELECT*FROMsystem.data_type_families  二:数值类型数值类型Int类型固定长度的整数类型又包括有符号和无符号的整数类型。    ......
  • 时序数据库clickhouse_数据库操作
    一:新增列ADDCOLUMN[IFNOTEXISTS]name[type][default_expr][codec][AFTERname_after]ALTERTABLEvisitsONCLUSTERcluster_nameADDCOLUMNcolumn_name1,A......
  • MySQL-数据库优化
     数据库优化: 数据库设计:1.字段选型:数字类型:tinyintsmalintmediumintintbigint字符类型:charvarchar事件类型:datedate......
  • XtraBackup数据库备份工具
    XtraBackupPerconaXtraBackup是一款基于MySQL的服务器的开源热备份实用程序,在备份过程中不会锁定数据库。它可以备份来自MySQL5.1,5.5,5.6和5.7服务器上的InnoDB,XtraDB和MyI......
  • 数据库保存经纬度采用什么数据类型好?
    如下表所示赤道周长(米)度数(度)40076000360111322.2222111132.222220.11113.2222220.01111.32222220.00111.132222220.00011.113222222......
  • django-07-操作数据库
    django操作表-models.py(app)-1.创建表;删除表;修改表:在models.py中创建数据库类classUserInfo(models.Model):name=models......
  • django 根据数据库表结构逆向操作model,同步表结构到models.py
    根据数据库表结构的修改,同步models.py,比如我们修改了数据库中某张表的字段类型,或者给这张表又加了好几个字段,这时我们在models.py中一个字段一个字段的加会有点麻烦,并且可......
  • Oracle 数据库更新补丁
              这里以Oracle19cGI、DBforOralceLinux8.6平台跟新官方最新补丁为例,其他版本、平台类似: 1、登录oraclesupport(需购买oracle服务),下载l......
  • ✍72 神通数据库部署
    一.神通数据库部署二进制部署及容器部署相关文件私有库:https://gitee.com/wx_3d25ad0b9a/ShenTong_DB#含win&linux镜像可以拉取⬇⬇⬇⬇二.容器部署1.......
  • JS的原生的Ajax(一)
    古语有云:万恶淫为首,百善孝为先。我们后辈当自勉。这是最下面的一章,没有了,​​跳转到主页​​一.AjaxAjax,全称是AsynchronousJavaScriptAndXML,异步JavaScript......