如何在网页中

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

如果数据是您的服务器的响应。