溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

ajax +jquery 基本

發(fā)布時(shí)間：2020-07-09 15:00:09 來(lái)源：網(wǎng)絡(luò) 閱讀：327 作者：yuetushen 欄目：web開(kāi)發(fā)

ajax格式，(key:value,)value值用單引號(hào)括起來(lái)

$.ajax({

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

url:,        //action的路徑

data:,    //傳到后臺(tái)的參數(shù),多個(gè)參數(shù)的連接符為'&'

success:function(msg){}//對(duì)返回的JSP頁(yè)面或結(jié)果進(jìn)行處理

});

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的值表示把頁(yè)面的值傳到后臺(tái)(/GetSN.action)，多個(gè)參數(shù)的連接符為'&'

執(zhí)行成功后把結(jié)果放到一個(gè)JSP頁(yè)面(ajaxSN.jsp)，通過(guò) 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; /*隱藏了小三角，因?yàn)閷挾葹?10px,而select寬度為130px*/
     border-width:0px;
     border-top-style: none; 
     border-right-style: none; 
     border-left-style: none; 
     border-bottom-style: none;
}

/*設(shè)置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>

 

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手