ajax格式,(key:value,)value值用单引号括起来
$.ajax({
type:, //'post','get'
url:, //action的路径
data:, //传到后台的参数,多个参数的连接符为'&'
success:function(msg){}//对返回的JSP页面或结果进行处理
});
1)jsp:
<td style="width:155px;">
<input type="text" name="sn" id="sn" onkeyup="getsn()" value ="${sn}" autocomplete="off"/>
</td>
<td style="width:155px;">
<%--<div id="div_sn" style="position:absolute;left :150;top:10;z-index:0;width:155px;"> </div> --%>
<div id="div_sn" style="width:155px;"> </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',
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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。