尝试学习ajax以及jquery时总结的小知识

1、在用ajax提交from表单的时候，保存按钮的type一定不要是“submit”，否则会出现导航栏回到最初的问题，具体原因尚不清楚。即下面代码的第二段才是对的。

<button type="submit" class="btn btn-sm btn-green" id="saverevise">保存</button>
<button type="button" class="btn btn-sm btn-green" id="saverevise">保存</button>

2、用ajax提交from表单的模板：

其中savebutton是模态框的保存按钮的id，MyController是url，myfrom是from的id，mymodal是模态框的id。

 $("#savebutton").on("click",function(){
	 $.post("MyController",$("#myform").serialize(),function(data,status){
                 //对数据进行处理
		 $('#mymodal').modal('hide');//关闭模态框
	 });
			 
});
//模态框关闭的时候刷新页面
$('#mymodal').on('hide.bs.modal',function(){
		//刷新页面
	});
});

on和click的区别见链接：https://blog.csdn.net/hesterrocks/article/details/64442442

3、当表格中存在“修改”按钮的时候，用jquery获取这一行的数据。

这是一个很有趣的例子，简单明了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title> 页面名称 </title>
</head>
<body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<table id="tab">
    <tr><td>aaaaa</td><td>1111</td><td><input type="button" value="button" ></td></tr>
    <tr><td>bbbbb</td><td>2222</td><td><input type="button" value="button" ></td></tr>
    <tr><td>ccccc</td><td>3333</td><td><input type="button" value="button" ></td></tr>
    <tr><td>ddddd</td><td>4444</td><td><input type="button" value="button" ></td></tr>
</table>
<input type="text" id="text" />
<script type="text/javascript">
$(function(){
    $("#tab").on("click", ":button", function(event){
          $("#text").val($(this).closest("tr").find("td").eq(0).text());
       // $("#text").val($(this).closest("tr").find("td").eq(1).text());
    });
});
</script>
</body>
</html>

附上jquery获取父级元素、同级元素、后代元素的链接：https://www.jb51.net/article/133319.htm

尝试学习ajax以及jquery时总结的小知识

猜你喜欢