显示按钮上的信息单击java Web应用程序

时间:2017-03-16 02:17:00

标签: javascript java servlets web-applications

我的项目是java动态Web应用程序。我有servlet&我的项目中的jsp页面。在jsp页面之一上,我展示了如下表格:

<table border="2" bordercolor="#81BEF7">
<tr bordercolor="#81BEF7">
	<td>Customer Name</td>
	<td>Address</td>
	<td>Contact Number</td>
</tr>
<tr bordercolor="#81BEF7">
	<td>AA</td>
	<td>AA Address</td>
	<td>1111</td>
 	<td>	
		<form name="detail" action="./custInfo" method="post">
			<input type="submit" name="btnCustomerInfo" value="Detail.." />
		</form>
	</td>
</tr>
<tr bordercolor="#81BEF7">
	<td>BB</td>
	<td>BB Address</td>
	<td>2222</td>
 	<td>	
		<form name="detail" action="./custInfo" method="post">
			<input type="submit" name="btnCustomerInfo" value="Detail.." />
		</form>
	</td>
</tr>
</table>

用户点击按钮后,我想显示客户详细信息,如下所示:

<table><tr><td>First Address</td><td>AAA</td></tr>
<tr><td>Second Address</td><td>BBB</td></tr></table>

我不想再去另一页,我更喜欢用消息框显示。这些客户详细信息在阵列中。我怎样才能做到这一点。

谢谢,

1 个答案:

答案 0 :(得分:0)

您可以通过不同方式实现此目的

选项1 (在您的scnerio中首选):由于您的要求不需要任何服务器数据,您只需使用任何客户端脚本或javascript库即可生成输出输入功能。

例如,您可以使用如下的JQuery:

HTML

<table border="2" bordercolor="#81BEF7">
<tr bordercolor="#81BEF7">
    <td>Customer Name</td>
    <td>Address</td>
    <td>Contact Number</td>
</tr>
<tr bordercolor="#81BEF7">
    <td class="custemorName1">AA</td>
    <td class="address1">AA Address</td>
    <td>1111</td>
    <td>    
        <form id = "target" name="detail" action="./custInfo" method="post">
            <input type="submit" name="btnCustomerInfo" value="Detail.." />
        </form>
    </td>
</tr>
<tr bordercolor="#81BEF7">
    <td class="custemorName2">BB</td>
    <td class="address2">BB Address</td>
    <td>2222</td>
    <td>    
        <form id = "target" name="detail" action="" method="post">
            <input type="button" name="btnCustomerInfo" value="Detail.." />
        </form>
    </td>
</tr>
</table>

<div id="output"></div>

jQuery

$(document).ready(function() {

$( "#target" ).click(function( event ) {
var address1 =$(".address1").text();
var address2 =$(".address2").text();
     $("#output").append(
        "<table><tr><td>First Address</td><td>"+address1+"</td></tr>" +
        "<tr><td>Second Address</td><td>"+address2+"</td></tr></table>" );

});
});

选项2 :如果您真的需要点击服务器中的servlet,可以使用ajax调用(不重新加载页面),也可以在转发时将值添加到请求对象属性中从servlet到jsp页面的请求。