Question

提交表单后，我的javascript会隐藏一个div并显示另一个：

function deviceReady() {
    console.log("deviceReady");
    $("#loginPage").on("pageinit",function() {
        console.log("pageinit run");
        $("#loginForm").on("submit",handleLogin);
        checkPreAuth();
    });
    $.mobile.changePage("#loginTest");
    $('#loginTest').html('Hello World!');
}

底线是我正在尝试向动态显示的div添加一些文本。但是，div中没有显示任何内容。我还想在同一个文件中显示另一个函数的变量。

这是下面代码中的var e = $("#username").val();，我想最终添加到div中。

function init() {
    document.addEventListener("deviceready", deviceReady, true);
    delete init;
}

function checkPreAuth() {
    console.log("checkPreAuth");
    var form = $("#loginForm");
    if(window.localStorage["username"] != undefined && window.localStorage["password"] != undefined) {
        $("#username", form).val(window.localStorage["username"]);
        $("#password", form).val(window.localStorage["password"]);
        handleLogin();
    }
}

function handleLogin() {
    var e = $("#username").val();
    var p = $("#password").val();

    if(e != "" && p != "") {
        $.ajax({ 
                 type: 'POST', 
                 url: 'http://localhost/php/log.php', 
                 crossDomain: true,
                 data:  {username: e, password :p},
                 dataType: 'json', 
                 async: false,

                 success: function (response){ 
                    if (response.success) { 
                        $.mobile.changePage("#loginTest");
                     } 
                    else {
                        alert("Your login failed");
                    }
                 },
                 error: function(error){
                    alert('Could not connect to the database' + error);
                 }
               }); 
    }
    else {
        alert("You must enter username and password");
    }
    return false;
}

function deviceReady() {
    console.log("deviceReady");
    $("#loginPage").on("pageinit",function() {
        console.log("pageinit run");
        $("#loginForm").on("submit",handleLogin);
        checkPreAuth();
    });
    $.mobile.changePage("#loginTest");
    $('#loginTest').html('Hello World!');
}

HTML代码：

<body>
<div id="loginPage" data-role="page">
  <div data-role="header">
    <h1>Auth Demo</h1>
  </div>
  <div data-role="fieldcontain" class="ui-hide-label">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" value="" placeholder="Username" />
  </div>
  <div data-role="fieldcontain" class="ui-hide-label">
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" value="" placeholder="Password" />
  </div>
  <input type="button" value="Login" id="submitButton" onclick="handleLogin()">
  <div data-role="footer">
  </div>
</div>

<div id="loginTest" data-role="page">
<div id="name">
</div>
</div>


</body>

Answer 1

在元素id loginTest（#loginTest）

上尝试此操作

document.getElementById('loginTest').innerHTML= your variable here; //or any string

如果您使用的是jquery

$( '#loginTest' ).text( your variable ); //or any string

Answer 2

你不能更好地限制帖子：

<input type="button" value="Login" id="submitButton" onClientClick="handleLogin()">

然后从函数返回false。

在html div中显示javascript变量

2 个答案: