ajax +jquery 基本

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

$.ajax({

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

url:,        //action的路径

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

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

});

1)jsp：

       
 

<%--  

 --%>
                        div_sn" style="width:155px;"> 

 

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

 

    
        
        
        

.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;
}

    
    
        
           
            ${sn}
             
                 ${char}