ajax +jquery 基本

前端之家收集整理的这篇文章主要介绍了ajax +jquery 基本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ajax格式,(key:value,)value值用单引号括起来

$.ajax({

type:,//'post','get'

url:,//action的路径

data:,//传到后台的参数,多个参数的连接符为'&'

success:function(msg){}//对返回的JSP页面或结果进行处理

});

1)jsp:

<tdstyle="width:155px;">
<inputtype="text"name="sn"id="sn"onkeyup="getsn()"value="${sn}"autocomplete="off"/>
</td>

<tdstyle="width:155px;">

<%--<divid="div_sn"style="position:absolute;left:150;top:10;z-index:0;width:155px;"></div>--%>
<divid="div_sn"style="width:155px;"></div>
</td>

2)Javascript:

data的值表示把页面的值传到后台(/GetSN.action),多个参数的连接符为'&'

执行成功后把结果放到一个JSP页面(ajaxSN.jsp),通过success:function(msg),放到ID为'div_sn'

functiongetsn(){
document.getElementById("div_sn").style.display="block";
varsn=$('#sn').val();
varproduct=$('#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>
<Metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>JSPPage</title>
<styletype="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><divclass="DivSelect"><selectclass="SelectList"name="select_sn"id="select_sn"onchange="select_getSN();"><optionvalue="${sn}">${sn}</option><s:iteratorvalue="snList"id='char'status='st'><optionvalue="${char}">${char}</option></s:iterator></select></div></body></html>

猜你在找的Ajax相关文章