Question

我有2个HTML文件和2个js文件。

在App.html中，我想要包含login.html，需要从login.html获取数据，并且需要在App中使用。

App.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Insert title here</title>    
        <script type="text/javascript" src='js/jquery.js'></script>        
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/login.js"></script>
    </head>
    <body>  
        <div id="content"></div>
    </body>
</html>

的login.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Insert title here</title>    
        <script type="text/javascript" src='js/jquery.js'></script>
    </head>     
    <body>      
    <div>
        <div data-role="fieldcontain">
            <label for="userid" id="luserid" ><strong>UserId : </strong></label>
            <input type="text" name="userid" id="userid" value="" class="logon" placeholder="Username" required/>
        </div>
        <div data-role="fieldcontain">
            <label for="password" id="lpassword"><strong>Password :</strong></label>
            <input type="password" name="password" id="password" class="logon" value="" placeholder="Password" required/>
        </div>
        <div class="ui-body">
            <fieldset class="ui-grid-a">                            
                    <div class="ui-block-a"><a data-role="button" id="loginbtn" data-theme="b">Login</a></div>                          
            </fieldset>
        </div>              
    </div>
    </body>
</html>

app.js

  $(document).ready(function(){ 
  $('#content').load('login.html'); 
  });

login.js

$(document).ready(function(){   
    var userid= $("#userid").val();
    var upassword= $("#password").val();
    alert(userid);
    alert(upassword);               
});

请帮我解决这个问题。

注意：我不想在Login.html中包含login.js.

Answer 1

您应该检查submit事件的用户和密码，即：

$("form").submit(function(e){
  var userid= $("#userid").val();
  var upassword= $("#password").val();
  alert(userid);
  alert(upassword); 
});

您还需要将代码包装在<form>：

中

<form>
    <div data-role="fieldcontain">
    ...
    </div>    
</form>

Answer 2

您应该尝试以下方法：

$(document).ready(function(){ 
    $('#content').load('login.html', function() {
        var userid= $('#content').find("#userid").val();
        var upassword= $('#content').find("#password").val();
        alert(userid);
        alert(upassword); 
    }); 
});

这将确保已成功加载login.html的内容。如果是这样，您可以获取#userid和#password的值。

由于在创建DOM时未创建这些内容，因此您无法通过$('#userid')和$('#password')直接访问其值，而您可能必须使用方法find()。

PS：我认为此链接可能会让您感兴趣：Calling function after .load (Jquery)

希望这有帮助。

无法从jQuery中的内容中获取数据？

2 个答案: