Question

我想要做的是在使用欢迎消息登录后替换div的内容。我读过AJAX教程，但我可能错了。

是不是logIn函数应该更改具有给定id的元素的内容，并且内容由php文件回显？

因为现在，登录已完成，但php文件回显的内容显示在login.php中，而不是替换我的“user_panel”div的内容。

我的HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>

    <title>My awesome blog!</title>

<script>
  function logIn(u,p) {

    if (u== "" && p== "") {
      document.getElementById("user_panel").innerHTML = "";
      return;
    } else {
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    }  

    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("user_panel").innerHTML = xmlhttp.responseText;
      }
    }
    xmlhttp.open("POST","login.php?u="+u+"&p="+p,true);
    xmlhttp.send();
    }
  }

</script>
  </head>
<body>
    <div class="nav">
      <div class="container">
    <div id="user_panel">
      <ul>
        <li><a href="login.html">Login</a></li>
        <li><a href="register.html">Register</a></li>
      </ul>
        </div>
      </div>
    </div>


         <form class="login" action="login.php" method="post">
            <label class="login_label" for="username">Username:</label>
            <input type="text" id="username" name="username">
            <br>
            <label class="login_label" for="password">Password:</label>
            <input type="password" id="password" name="password">
            <br><br>
            <input type="submit" value="Login" onclick="logIn(document.getElementById('username'),document.getElementById('password'))">
        </form> 


  </body>
</html>

我的php

<?php

$server = "localhost";
$username = "root";
$password = "123456";
$dbname = "BlogDb";


    // Create connection
    $con = mysqli_connect($server, $username, $password,$dbname);

    // Check connection
    if (!$con) {
    die("Connection failed: " . mysqli_connect_error());
    }
    //echo "Connected successfully2";

    $u = $_POST['username'];
    $p = $_POST['password'];
    setcookie("User_in", $u, time() + (86400 * 30), "/");
    // Set session variables
    $_SESSION["user_on"] = $u;

    $sql= "SELECT username,is_admin FROM User WHERE username ='".$u."' and password='".$p."'";
    $result = mysqli_query($con, $sql);

    if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
    echo "<ul>";
    echo "<li>";
    echo "Welcome " . $row['username'] . "! How are you today?";
    echo "</li><li>";
    echo "<a href=logout.php>Log out</a>";
    echo "</li></ul>";
  }
    mysqli_close($con);
    ?>

我在这里做错了什么？

Answer 1

输入类型=＆＃39; sumbit＆＃39;点击提交此表单的位置，因此您必须阻止此默认事件，您可以更改此类型=＆＃39;按钮＆＃39;！

document.getElementById（＆＃39; username＆＃39;）其中返回节点n＆t; t输入值获取输入值可以使用

 document.getElementById('username').value

下面是我的更改代码：的 HTML：

<input type="submit" value="Login" onclick="logIn()">

<强> JS：

function logIn(e) { e = e || window.event; e.preventDefault(); var u = document.getElementById('username').value, p = document.getElementById('password').value; if (u== "" && p== "") { document.getElementById("user_panel").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("user_panel").innerHTML = xmlhttp.responseText; } } xmlhttp.open("POST","login.php?u="+u+"&p="+p,true); xmlhttp.send(); } }

Answer 2

***这是评论，因为我无法访问我添加的评论部分作为答案****** 嗨，马特，

如果使用Ajax，则无需使用html - ＆gt; input - ＆gt; submit。使用<button>标记然后调用js函数。

Ajax调用不替换内容

2 个答案: