jdata1.jsp //html要移除乾淨，才不使jquery混亂
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@include file="querydata.jsp"%>
<%
String[][] data=null;
String id=request.getParameter("id");
//String id="p1002";
String databasename="persondata";
String strsql="select * from person where 編號='"+id+"'";
data=querydatafun(databasename,strsql);
String str="";
if(data.length==0)
{
str="查無此資料";
}
else
{
for(int i=0;i<data.length;i++)
{
for(int j=0;j<data[0].length;j++)
{
str+=data[i][j]+" ";
}
}
}
out.print(str);
%>
querydata.jsp
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@page import="java.util.*"%>
<%!
public String[][] querydatafun(String databasename,String strsql)
{
ResultSet rs=null;
String[][] resultdata=null;
try
{
Class.forName("org.gjt.mm.mysql.Driver");
}
catch(Exception e)
{
//out.print("資料庫驅動程式失敗");
}
try
{
Connection myconn=DriverManager.getConnection("jdbc:mysql://localhost/"+databasename+"?useUnicode=true&characterEncoding=utf-8","root","");
Statement mysmt=myconn.createStatement();
rs=mysmt.executeQuery(strsql);
int fieldcount=rs.getMetaData().getColumnCount();
//out.print("總欄位數:"+fieldcount+"<p>");
for(int i=0;i<fieldcount;i++)
{
//out.print(rs.getMetaData().getColumnName(i+1)+"<p>");
}
rs.first();
rs.last();
int rowcount=rs.getRow();
//out.print("總記錄數:"+rowcount+"<p>");
if(rowcount==0)
{
resultdata=new String[0][0];
}
else
{
resultdata=new String[rowcount][fieldcount];
rs.beforeFirst();
int j=0;
while(rs.next())
{
for(int i=0;i<fieldcount;i++)
{
resultdata[j][i]=rs.getString(i+1);
}
j++;
}
rs.close();
myconn.close();
}
}
catch(SQLException er)
{
//out.print("資料庫管理系統無法啟動");
}
return resultdata;
}
%>
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@page import="java.util.*"%>
<%!
public String[][] querydatafun(String databasename,String strsql)
{
ResultSet rs=null;
String[][] resultdata=null;
try
{
Class.forName("org.gjt.mm.mysql.Driver");
}
catch(Exception e)
{
//out.print("資料庫驅動程式失敗");
}
try
{
Connection myconn=DriverManager.getConnection("jdbc:mysql://localhost/"+databasename+"?useUnicode=true&characterEncoding=utf-8","root","");
Statement mysmt=myconn.createStatement();
rs=mysmt.executeQuery(strsql);
int fieldcount=rs.getMetaData().getColumnCount();
//out.print("總欄位數:"+fieldcount+"<p>");
for(int i=0;i<fieldcount;i++)
{
//out.print(rs.getMetaData().getColumnName(i+1)+"<p>");
}
rs.first();
rs.last();
int rowcount=rs.getRow();
//out.print("總記錄數:"+rowcount+"<p>");
if(rowcount==0)
{
resultdata=new String[0][0];
}
else
{
resultdata=new String[rowcount][fieldcount];
rs.beforeFirst();
int j=0;
while(rs.next())
{
for(int i=0;i<fieldcount;i++)
{
resultdata[j][i]=rs.getString(i+1);
}
j++;
}
rs.close();
myconn.close();
}
}
catch(SQLException er)
{
//out.print("資料庫管理系統無法啟動");
}
return resultdata;
}
%>
jquerypost.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.8.0.js" ></script>
<script language="javascript">
$(document).ready(function()
{
$("#bt1").click(function()
{
$.post("jdata1.jsp",{id:$("#t1").val()},function(data,s)
{
$("#dv1").html(data); //html把資料加入div一列，如用append則附加在後
});
});
$("#bt2").click(function()
{
$("#t1").val("");
$("#t1").focus();
});
});
</script>
<body>
<form id="f1" name="f1" method="post" >
<table id="tb1" width="300" border="2">
<tr>
<td>
輸入編號；
</td>
<td>
<input type="text" id="t1" name="t1" size="20" />
</td>
</tr>
<tr>
<td>
<input type="button" name="bt1" id="bt1" value="確認" />
</td>
<td>
<input type="reset" name="bt2" id="bt2" value="清除" />
</td>
</tr>
</table>
</form>
<p>
<p>
<div id="dv1" style="background-color:#9CF; width:300px; height:100px; overflow:scroll">
</div>
</body>
</html>
使用ajax
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax應用</title>
</head>
<script language="javascript" src="jquery-1.8.0.js" ></script>
<script language="javascript">
$(document).ready(function()
{
var table=document.getElementById("tb1");
var i=0;
$("#bt1").click(function()
{
$.ajax({
type:"post",
url:"jdata1.jsp",
data:{id:$("#t1").val()},//送給url 參數
dataType:"html",//可用伺服語言
success:function(data)
{
var tdata=data.split(" ");
var tr=table.insertRow(i);//用來控被移除的列不再出現在div
for(var u=0;u<tdata.length-1;u++)
{
var td=tr.insertCell(u);
td.innerHTML=tdata[u];
}
var ttd=tr.insertCell(5);
ttd.innerHTML="<a herf='javascript:;' onclick='fun(this)'>移除</a>";
i++;
}
});
});
$("#bt2").click(function()
{
$("#t1").val("");
$("#t1").focus();
});
});
function fun(x)
{
var i=x.parentNode.parentNode.rowIndex;
document.getElementById("tb1").deleteRow(i);
}
</script>
<body>
<form id="f1" name="f1" method="post" >
<table width="300" border="2">
<tr>
<td>
輸入編號；
</td>
<td>
<input type="text" id="t1" name="t1" size="20" />
</td>
</tr>
<tr>
<td>
<input type="button" name="bt1" id="bt1" value="確認" />
</td>
<td>
<input type="reset" name="bt2" id="bt2" value="清除" />
</td>
</tr>
</table>
</form>
<p>
<p>
<div id="dv1" style="background-color:#9CF; width:300px; height:100px; overflow:scroll">
<table id="tb1" border="0" width="300">
</table>
</div>
</body>
</html>
沒有留言:
張貼留言