Javascript jQuery ui选项卡表单提交
我正在使用选项卡浏览我的web应用程序。每个选项卡上都有单独的文件,其中包含接收用户输入的表单,并根据输入显示数据表 我想问一下,如何在相同的选项卡中显示结果表,并使输入表单准备好再次接收差异输入 这是我的密码Javascript jQuery ui选项卡表单提交,javascript,jquery,html,jquery-ui,jsp,Javascript,Jquery,Html,Jquery Ui,Jsp,我正在使用选项卡浏览我的web应用程序。每个选项卡上都有单独的文件,其中包含接收用户输入的表单,并根据输入显示数据表 我想问一下,如何在相同的选项卡中显示结果表,并使输入表单准备好再次接收差异输入 这是我的密码 <div id="tabs"> <ul> <li><a href="t1.htm">Tab 1</a></li> <li><a href=
<div id="tabs">
<ul>
<li><a href="t1.htm">Tab 1</a></li>
<li><a href="t2.htm">Tab 2</a></li>
<li><a href="t3.htm">Tab 3</a></li>
</ul>
</div>
我的t1.htm示例
<form action="table.htm" method="POST">
First Name: <input type="text" name="first_name">
<br />
Last Name: <input type="text" name="last_name" />
<input type="submit" value="Submit" />
</form>
而table.htm将根据firstname和lastname的输入创建动态表。但是,现在当我提交表单时,它会立即打开table.htm,但我希望它只显示输入表单下方的结果。如果我正确理解问题,请阅读两遍 只需使用jquery发送ajax请求,表单就可以进行下一次输入了 表单包含字段
<form id="myform">
...
<button id="sub">Submit</button>
</form>
下面的div将包含ajax请求响应,在您的示例中,它主要是一个表
<div id="resultContainer"></div>
下面是通过ajax将表单提交到某个url的脚本
<script>
$("#sub").click(function(){
$.ajax({
type: "POST",
url: "myjsp.jsp",
data: $("#myform").serialize(),
complete: function(xhr, textStatus) {
$("#resultContainer").html(xhr.responseText);
}
});
});
</script>
您希望按照以下思路做一些事情:
<script type="text/javascript">
$('form:eq(0)').submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "table.htm",
data: $(this).serialize(),
dataType: 'text/html',
success: function(response) {
$(this).after(response);
}
});
return false;
});
</script>
您需要为表单指定一个id属性。您的代码纯粹是客户端代码,还是在服务器端使用java或servlet?@GopakumarNG在编辑时,您也可以删除称呼语,感谢您在投票/接受答案时暗示的称呼语,请仅对代码或文件名使用反勾号,而不对关键字或技术名称使用反勾号。我的朋友将为我提供从数据库查询数据的服务,但我必须使jquery选项卡中的内容能够调用该服务,并使用返回的结果在同一选项卡中构建动态表