关于bootstrap模态框传值到后台的问题

模态框传值到后台困扰了好久，因为我同时要传一个id和模态框中的数据，关于传id我是将id放入a标签中以传参数的方式传递，这就不用多说了，模态框我用的是这位大佬的方法：原文地址：https://blog.csdn.net/baalhuo/article/details/51178154

模态框具体代码如下：

1. <!-- 模态框（Modal） -->
2. <div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
3. <div class="modal-dialog">
4. <div class="modal-content">
5. <div class="modal-header">
6. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
7. <h4 class="modal-title" id="myModalLabel">修改信息 </h4>
8. </div>
9. <div class="modal-body">
10. 学号： <input type="text" name="stuno" id="stuno" />
11. 密码： <input type="text" name="pass" id="pass"/>
12. 姓名： <input type="text" name="stuname" id="stuname"/>
13. 性别： <input type="radio" name="sex" class="sex" id="man" value="男"/>男
14. <input type="radio" name="sex" class="sex" id="women" value="女"/>女
15. </div>
16. <div class="modal-footer">
17. <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
18. <button type="button" class="btn btn-primary" onclick="update()">提交更改 </button>
19. </div>
20. </div>
21. <!-- /.modal-content -->
22. </div>
23. <!-- /.modal -->
24. </div>
25. <!-- 模态框（Modal）end -->

单击编辑图标时触发模态框，并将此行数据传入模态框。

传入后如下：

具体传值方法如下

1. //触发模态框的同时调用此方法
2. function editInfo(obj) {
3. var id = $(obj).attr( "id");
4. //获取表格中的一行数据
5. var stuno = document.getElementById( "table").rows[id].cells[ 0].innerText;
6. var pass = document.getElementById( "table").rows[id].cells[ 1].innerText;
7. var name = document.getElementById( "table").rows[id].cells[ 2].innerText;
8. var sex = document.getElementById( "table").rows[id].cells[ 3].innerText;
9. //向模态框中传值
10. $( '#stuno').val(stuno);
11. $( '#pass').val(pass);
12. $( '#stuname').val(name);
13. if (sex == '女') {
14. document.getElementById( 'women').checked = true;
15. } else {
16. document.getElementById( 'man').checked = true;
17. }
18. $( '#update').modal( 'show');
19. }
20. //提交更改
21. function update() {
22. //获取模态框数据
23. var stuno = $( '#stuno').val();
24. var pass = $( '#pass').val();
25. var name = $( '#stuname').val();
26. var sex = $( 'input:radio[name="sex"]:checked').val();
27. $.ajax({
28. type: "post",
29. url: "update.do",
30. data: "stuno=" + stuno + "&pass=" + pass + "&name=" + name + "&sex=" + sex,
31. dataType: 'html',
32. contentType: "application/x-www-form-urlencoded; charset=utf-8",
33. success: function(result) {
34. //location.reload();
35. }
36. });
37. }

注：从表格中获取数据试了几种方法好像只有通过document.getElementById("table").rows[id].cells[0].innerText;方式可以获取。