如何在網頁中

Question

我這裏有一個情況處理後臺的Ajax調用：

我有一箇中間對話框彈出用戶登錄形式（由一個下拉菜單），以驗證其通過填充的用戶角色阿賈克斯呼籲。

問題是，當我點擊提交表單提交表單中間對話框彈出窗口，下拉列表中沒有填充角色時，填充5-7秒後下拉列表爲空。

我們可以在ajax中處理，使用狀態或ajax完成後，我們可以彈出對話框並填充下拉列表。

下面是我的代碼：

形式

<form name = "loginForm" method="post" action="#"> 
    <div class = "container"> 
    <table> 
     <tr> 
      <td> 
       <h1 class = "heading">Enhanced Quality Control 2.0</h1><br> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <table class = "maintable"> 
        <tr> 
         <td> 
          <table> 
           <tr> 
            <td> 
             <label for="login">Login ID&nbsp;&nbsp;</label> 
            </td> 
            <td>  
             <input id="login" type="text" onfocus="clearDefault(this.value);" onblur="setDefault();" value="Enter your Login ID" style="position:relative; margin-left: 80px; background-color:#19A053;border:none;width:100%;height:26px;color:#FFFFFF;font-size:20px;padding-left:10px;font-style:italic"/> 
            </td> 
           </tr> 
           <tr> 
            <td> 
             <br><label for="password" >Password&nbsp;&nbsp;</label> 
            </td> 
            <td> 
             <br> 
             <input id="password" type="password" onfocus="clearDefault(this.value);" onblur="setDefault();" value="Enter Password" style = "position:relative; margin-left: 80px; background-color:#19A053;border:none;width:100%;height:26px;color:#FFFFFF;font-size:20px;padding-left:10px;font-style:italic"/> 
            </td> 
           </tr> 
           <tr> 
            <td></td> 
            <td> 
             <br> 
             <input type = "checkbox" style= "background-color:#19A053" style="position:relative; margin-left: 80px; background-url:images/user.png">&nbsp;&nbsp;Remember me next time</input> 
            </td> 
           </tr> 
           <tr> 
            <td></td> 
            <td> 
             <br> 
             <img class="submit" src = "images/button.PNG" name = "image" style="position:relative; margin-left: 80px; background-color:#19A053;border:none;" /> 
             <input type="hidden" value="" id="role" /> 
            </td> 
           </tr> 
          </table> 
         </td> 
         <td> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
    </div> 
    </form> 

Intermediate Dialog Code 


<div id="dialog" title="Select User Role" style="display:none;"> 
     <p>You have multiple user roles assigned. Please select any one of the roles and click on the 'Continue' button.</p> 
     <table> 
      <tr> 
       <td>Select user role</td> 
       <td> 
        <div class="dropdown" id="dropdown"> 
         <select id="roles" name="Select user role" style="z-index: 10;"> //EMPTY DROPDOWN 
        </select> 
       </div> 
       </td> 
      </tr> 
     </table> 
    </div> 

SCRIPT CODE 
    ** 

    $(document).ready(function(){ 
       // Dialog Link 
       $('.submit').click(function() { 
        makeGetRequest();   //Call for First Click and shoot ajax call 
       }); 


       function makeGetRequest() { // AJAX CALL METHOD 
        var login = document.getElementById('login').value; 
        var password = document.getElementById('password').value; 
        http.open('get', 'ajax.jsp?login=' + login+ '&password=' + password); 
        http.onreadystatechange = processResponse; //CALLBACK FUNCTION 
        http.send(null); 
       } 

    //AJAX CALLBACK FUNCTION - Issue is the dialog opens up before the dropdown is populated i need to wait a bit 
       function processResponse() { 
        if(http.readyState == 4 && http.status == 200){ 
         var response = http.responseText; 

** 
        document.getElementById('roles').innerHTML = response; 
        $('#dialog').dialog('open'); //Dialog Opens before data is ready in my "roles" dropdown 
       } 

      } 

在此先感謝!!!! 乾杯......

Answer 1

考慮使用jQuery.get()功能添加要在返回功能AJAX返回執行（數據）的腳本：

​​3210

如果數據是您的服務器的響應。