AJAX+JSP 项目总结
最近做了一个jsp+ajax的小项目 把学到的一些东西记录下来 主要针对ajax做一些总结
ajax提交表单ajax更新页面数据ajax向后台传送数据双击表单单元格使之可编辑jsp从数据库拉取数据
ajax提交表单
在使用下面代码之前需要引用jquery函数库
$(
function(){
$(
'#subbtn').click(
function(){
$.ajax({
type:
"POST",
dataType:
"html",
url:
"./updatdata.jsp",
data: $(
'#myform').serialize(),
success:
function (result) {
alert(
"信息修改完成！");
},
error:
function(data) {
alert(
"查询数据失败");
}
});
})
});
ajax更新页面数据
function showemp(str)
{
var xmlhttp;
if (str==
"")
{
document.getElementById(
"txtHint").innerHTML=
"";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=
new XMLHttpRequest();
}
else
{
xmlhttp=
new ActiveXObject(
"Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=
function()
{
if (xmlhttp.readyState==
4 && xmlhttp.status==
200)
{
document.getElementById(
"txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(
"GET",
"text/getemp.jsp?q="+str,
true);
xmlhttp.send();
}
双击使单元格可编辑
function ShowElement(element) {
var oldhtml = element.innerHTML;
var newobj = document.createElement(
'input');
newobj.type =
'text';
newobj.value = oldhtml;
newobj.onblur =
function() {
element.innerHTML =
this.value == oldhtml ? oldhtml :
this.value;
}
element.innerHTML =
'';
element.appendChild(newobj);
newobj.setSelectionRange(
0, oldhtml.length);
newobj.focus();
}
jsp从数据库拉取数据放到select中
<select size=
"8" style=
"width:100px" name=
"emp" onchange=
"showemp(this.value)" style=
"font-family:Verdana, Arial, Helvetica, sans-serif;">
<%
//con database
String url=
"jdbc:derby://localhost:1527/HR"
Class
.forName(
"org.apache.derby.jdbc.ClientDriver")
Connection con = DriverManager
.getConnection(url,
"a",
"a")
PreparedStatement stmt = con
.prepareStatement(
"select * from train_exam_dept")
ResultSet rst = stmt
.executeQuery()
int dept_id =
0
while(rst
.next()){
String name = rst
.getString(
"name")
dept_id = rst
.getInt(
"id")
out.println(
" <option value = "+ dept_id +
" >"+name+
"</option> ")
// String id = rst
.getString(
"id")
//
out.println(id)
}
%>
</select>
以上 新人练手，望大佬指教！
