javascript - 请问JS怎样可以获取数据库里面的数据，并且可以修改数据以后再提交回去
问题描述
现在在做一个表格，表格的行数列数和内容都是数据库里面遍历来显示到网页的。网页需要动态获取数据库里的表格，做到修改表格里的数据，并且传回到数据库里。后台是用asp.net写的,数据库是SQL server。后台没有能实现，老师让前端动态获取数据库的数据然后修改。我不知道怎么样才能做到这样，甚至不知道可不可以做得到。
我的JS是通过JQ找父级子级关系来实现修改静态表格的，表都是我写死的，但是现在要加数据库，后台是遍历的，这样我找的关系应该就不能实现了。
----------------------补充提问--------------------------
既然前端无法获取后端数据库的数据，只能通过接口访问，请问我是不是只要实现可以对一行的修改然后提交，其他的就不用管了？后台他们会有ID还是隐藏域什么的来判断行号，点哪行的操作按钮就能直接对哪行的内容进行操作了？关于接口，我查了，但是没太懂，是不是要学了JSON才行？
前端页面：
显示状态：
更改状态：
HTML：
<!--表格开始-->
<form action="">
<div id="table">
<!--机电类检验项目单价表开始-->
<table id="ele_table" class="hidden">
<tr>
<th colspan="6" style="width: 978px;">机电类检验项目单价表（单位：元） <a class="add">添加</a> </th>
</tr>
<tr>
<th class="th2">序号</th>
<th class="th2">部门</th>
<th class="th2">项目</th>
<th class="th2">简称</th>
<th class="th2">单价</th>
<th class="th2">操作</th>
</tr>
<tr>
<td>1</td>
<td>机电类</td>
<td class="update_proj">
电梯定期检验
<input type="text" name="" class="text_proj" value=""/>
</td>
<td class="update_abb">
TD
<input type="text" name="" class="text_abb" value=""/>
</td>
<td class="update_price">
44.00
<input type="text" name="" class="text_price" value=""/>
</td>
<td>
<input type="submit" name="" class="save" value="保存" />
<input type="button" name="" class="cancel" value="取消" />
<input type="button" name="" class="delete" value="删除" />
</td>
</tr>
<tr>
<td>2</td>
<td>机电类</td>
<td class="update_proj">
未知名称
<input type="text" name="" class="text_proj" value=""/>
</td>
<td class="update_abb">
TDF
<input type="text" name="" class="text_abb" value=""/>
</td>
<td class="update_price">
44.00
<input type="text" name="" class="text_price" value=""/>
</td>
<td>
<input type="submit" name="" class="save" value="保存" />
<input type="button" name="" class="cancel" value="取消" />
<input type="button" name="" class="delete" value="删除" />
</td>
</tr>JS：
//----当一行中所有text都取消，保存按钮消失，取消键变删除键----function caozuo(){
if(temp1 == "1"||temp2 == "1" ||temp3 =="1"){
$(".delete").css({"display":"none"});
$(".save").css({"display":"inline-block"});
$(".cancel").css({"display":"inline-block"});
}}
//----当一行中所有text都取消，保存按钮消失，取消键变删除键----
//----取消文本框----
$(".cancel").click(function(){
$(".save").css({"display":"none"});
$(".delete").css({"display":"inline-block"});
$(this).css({"display":"none"});// $(".text_proj").css({"display":"none"});
$(this).parent().siblings().children(".text_proj").css({"display":"none"});
$(this).parent().siblings().children(".text_abb").css({"display":"none"});
$(this).parent().siblings().children(".text_price").css({"display":"none"});})
//----取消文本框----
//----双击对应的项目框，只显示点击的td里的框----
$(".update_proj").dblclick(function(){
temp1 = 1;
$(this).children(".text_proj").css({"display":"block"});
caozuo();
$(this).parents("tr").siblings().find(".cancel").css({"display":"none"});
$(this).parents("tr").siblings().find(".save").css({"display":"none"});
$(this).parents("tr").siblings().find(".delete").css({"display":"inline-block"});})
//----双击对应的项目框，只显示点击的td里的框----
//----双击对应的简称框，只显示点击的td里的框----
$(".update_abb").dblclick(function(){
temp2 = 1;
$(this).children(".text_abb").css({"display":"block"});
caozuo();
$(this).parents("tr").siblings().find(".cancel").css({"display":"none"});
$(this).parents("tr").siblings().find(".save").css({"display":"none"});
$(this).parents("tr").siblings().find(".delete").css({"display":"inline-block"});})
//----双击对应的简称框，只显示点击的td里的框----
//----双击对应的价格框，只显示点击的td里的框----
$(".update_price").dblclick(function(){
temp3 = 1;
$(this).children(".text_price").css({"display":"block"});
caozuo();
$(this).parents("tr").siblings().find(".cancel").css({"display":"none"});
$(this).parents("tr").siblings().find(".save").css({"display":"none"});
$(this).parents("tr").siblings().find(".delete").css({"display":"inline-block"});})
//----双击对应的价格框，只显示点击的td里的框----
后台遍历表格（与HTML有些不一样，这个是前一版，现在HTML改了一些）：
<%for (int i = 0; i < projectInfoList.Count; i++) {%>
<tr>
<td><%=(i+1) %></td>
<td><% =projectInfoList[i].Department %></td>
<td><% =projectInfoList[i].Project %></td>
<td><% =projectInfoList[i].ProjShortName %></td>
<td><%=projectInfoList[i].Price %></td>
<td><a class="update">修改</a> <a class="delete" href="Delete.ashx?id=<%=projectInfoList[i].Id%>">删除 </a></td>
</tr>
<% } %>
1.前端采用ajax发起请求
2.后端接受请求，访问数据库，取出数据，返回给浏览器
3.操作dom，将获取的数据展示出来
这篇关于javascript - 请问JS怎样可以获取数据库里面的数据，并且可以修改数据以后再提交回去的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
