1个input输入后,通过Ajax调取SQL的数据,匹配结果到另外的input里

weixin_43095151 2018-09-11 05:10:05
有3个input:
姓名:<input type="text" name="name">
人员账号:<input type="text" name="ryzh">
组别:<input type="text" name="zb">
本地sql:localhost里面有有个数据库test01,里面有个表test,分别有字段name对应input的姓名,usename对应人员账号,team对应组别,想达到的效果是,在姓名这里输入名字人员账号和组别的input从数据库里自动匹配然后填入信息,例如姓名填入:张三,人员账号自动填入:zhangsan01,组别填入:1组。求大神指点下代码如何填写,初学者,希望能提供详细代码,感谢!
...全文
755 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
風灬雲 2018-09-12
  • 打赏
  • 举报
回复
引用 5 楼 weixin_43095151 的回复:
[quote=引用 4 楼 qq_41114603 的回复:]
前端代码

<input type="text" name="name">
<input type="text" name="ryzh">
<input type="text" name="zb">

<script>
$(function(){
$("input").on("blur",function(){
let key = $(this).attr("name");
let value = $(this).val()
$.ajax({
url:"后端接口地址",
data:{
key:key,
val:val
}
}).then((res)=>{
// 后端接口返回数据 res.data 的格式
/*{
name:"姓名",
ryzh:"人员账号",
zb:"组别"
}*/
for (var key in res.data) {
$("input[name="+key+"]").val(res.data[key])
}
})
})
})

后端接口就根据前端传过来的key和val去表里面查,然后返回结果就可以了

后端引用的是SQL里面的表格,链接是:localhost,数据库名:test01,表是:test,里面字段:name对应input的姓名,usename对应人员账号,team对应组别,这个具体要怎么写?[/quote]
后端语言那么多= =!看你自己熟悉什么后端语言,PHP、JAVA还有Node.js都可以用来做后端;
sql语句就是一句查询语句;select * from test where key=val; key和val的值是前端传来的
田小瘦 2018-09-12
  • 打赏
  • 举报
回复
思路就是输入完成以后就通过ajax请求去后台查询对应的数据,返回到前端显示出来
weixin_43095151 2018-09-11
  • 打赏
  • 举报
回复
引用 4 楼 qq_41114603 的回复:
前端代码

<input type="text" name="name">
<input type="text" name="ryzh">
<input type="text" name="zb">

<script>
$(function(){
$("input").on("blur",function(){
let key = $(this).attr("name");
let value = $(this).val()
$.ajax({
url:"后端接口地址",
data:{
key:key,
val:val
}
}).then((res)=>{
// 后端接口返回数据 res.data 的格式
/*{
name:"姓名",
ryzh:"人员账号",
zb:"组别"
}*/
for (var key in res.data) {
$("input[name="+key+"]").val(res.data[key])
}
})
})
})

后端接口就根据前端传过来的key和val去表里面查,然后返回结果就可以了

后端引用的是SQL里面的表格,链接是:localhost,数据库名:test01,表是:test,里面字段:name对应input的姓名,usename对应人员账号,team对应组别,这个具体要怎么写?
風灬雲 2018-09-11
  • 打赏
  • 举报
回复
前端代码

<input type="text" name="name">
<input type="text" name="ryzh">
<input type="text" name="zb">

<script>
$(function(){
$("input").on("blur",function(){
let key = $(this).attr("name");
let value = $(this).val()
$.ajax({
url:"后端接口地址",
data:{
key:key,
val:val
}
}).then((res)=>{
// 后端接口返回数据 res.data 的格式
/*{
name:"姓名",
ryzh:"人员账号",
zb:"组别"
}*/
for (var key in res.data) {
$("input[name="+key+"]").val(res.data[key])
}
})
})
})

后端接口就根据前端传过来的key和val去表里面查,然后返回结果就可以了

weixin_43095151 2018-09-11
  • 打赏
  • 举报
回复
引用 1 楼 lqlqlq007 的回复:
先不说本地sql的问题,如果有两个重名的人怎么处理?

本身样本容量不大,出现重名的可能性不高,如果重名,考虑在姓名后面添加数字或其他来进行区分
讨厌走开啦 2018-09-11
  • 打赏
  • 举报
回复
写一个sql把对应的信息查出来:

select usename, team from table where name='张三' 执行以后把结果集里的usename和team取出来放到对应的input框里。
讨厌走开啦 2018-09-11
  • 打赏
  • 举报
回复
先不说本地sql的问题,如果有两个重名的人怎么处理?

87,942

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧