ajax格式，(key:value,)value值用单引号括起来
$.ajax({
type:, //'post','get'
url:, //action的路径
data:, //传到后台的参数,多个参数的连接符为'&'
success:function(msg){}//对返回的JSP页面或结果进行处理
});
1)jsp：
<td >
<input type="text" name="sn" id="sn" onkeyup="getsn()" value ="${sn}" autocomplete="off"/>
</td>
<td >
<%--<div id="div_sn" > </div> --%>
<div id="div_sn" > </div>
</td>
2)Javascript:
data的值表示把页面的值传到后台(/GetSN.action)，多个参数的连接符为'&'
执行成功后把结果放到一个JSP页面(ajaxSN.jsp)，通过 success:function(msg)，放到ID为'div_sn'
function getsn(){
document.getElementById("div_sn").style.display="block";
var sn = $('#sn').val();
var product=$('#product').val();
if(sn.length>5){
$.ajax({
type:'post',
/GetSN.action'">url:'<%=request.getContextPath()%>/GetSN.action',
timeout:2000,
data:'sn='+$('#sn').val() +'&product='+$('#product').val(),
success:function(msg){
$("#div_sn").html(msg);
}
});
}
}
3)ajaxSN.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<style type="text/css">
.DivSelect
{
position: relative;
background-color: transparent;
width: 135px;
overflow: hidden; /*隐藏了小三角，因为宽度为110px,而select宽度为130px*/
border-width:0px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}
/*设置Select样式*/
.SelectList
{
position: relative;
background-color: transparent;
border-width: 0px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
width:155px;
display:block;
overflow:hidden;
}
</style>
</head>
<body>
<div class="DivSelect">
<select class="SelectList" name="select_sn" id="select_sn" onchange="select_getSN();">
<option value="${sn}" >${sn}</option>
<s:iterator value="snList" id='char' status='st'>
<option value="${char}"> ${char}</option>
</s:iterator>
</select>
</div>
</body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
