javascript 如何使用 AJAX 从数据库中检索数据并将结果保存在变量中？

sgtfey8w 于 2023-05-21 发布在 Java

关注(0)|答案(2)|浏览(219)

我是jQuery和 AJAX 的新手，我正在做一个登录页面的项目，我需要使用AJAX从数据库中检索数据。我不是100%流利的英语，所以我会尽我所能来解释这个问题（在谷歌翻译的帮助下）。下面是我使用的代码：index.html

<!DOCTYPE html>
<html>
  <head>
  <title>Login</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  </head>
  <body>
    <form validate="">
      <input type="text" placeholder="Username" id="username" required/><br />
      <input type="password" placeholder="Password" id="password" required/><br />
      <input type="submit" id="submit" value="Login" />
    </form>
    <script type="text/javascript">
    // when document is loaded
    $(document).ready (
      // when submit is clicked
      $("#submit").click (
        // sets test to null
        var test = null;
        // sets username to value of username input
        var username = document.getElementById("username").value;
        // AJAX request 
        $.ajax({
          type: "POST",
          async: true,
          url: test.php,
          data: {username: username},
          success: function (data) {
            test = data;
            console.log(test);
            return test;
          }
        });
      );
    );
    </script>
  </body>
</html>

test.php

<?php
// connects to database
$conn = mysqli_connect('server', 'username', 'password', 'database');

// sets var username to POST username value
$username = $_POST['username'];

// SQL Query
$sql = "SELECT * FROM users WHERE username='" . $username . "'";
$result = mysqli_query($conn, $sql);

// sets result to mysqli_fetch_assoc()
$result = mysqli_fetch_assoc( $result );

// echos $result
echo $result['password'];

// closes database connection
mysqli_close( $conn );
?>

控制台日志

控制台输出：

[DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://www.googlesite.com)
<input type="password" placeholder="Password" id="password" required>

Uncaught SyntaxError: Unexpected token var ajax.html:19

我看了代码，似乎找不到错误。先谢谢你了！;）

JavaScript

来源：https://stackoverflow.com/questions/59760481/how-can-i-retrieve-data-from-a-database-using-ajax-and-save-the-results-in-a-var

2条答案

按热度按时间

xbp102n01#

你可以使用submit事件代替click事件。
在您的情况下，只需将id输入到form，如下所示-

<form validate="" id="submit">

现在，在您的js脚本中-

$(function() { //shorthand document.ready function
    $('#submit').on('submit', function(e) { 
        e.preventDefault();  //prevent form from submitting
        console.log(data);
        $.ajax({
          type: "POST",
          async: true,
          url: test.php,
          data: $(this).serializeArray(),
          success: function (data) {
            console.log(data);
          }
        });
    });
});

所以检查你的整个代码-

<!DOCTYPE html>
<html>
  <head>
  <title>Login</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  </head>
  <body>
    <form validate="" id="submit">
      <input type="text" placeholder="Username" id="username" required/><br />
      <input type="password" placeholder="Password" id="password" required/><br />
      <input type="submit" value="Login" />
    </form>
    <script type="text/javascript">
    // when document is loaded
    $(function() { //shorthand document.ready function
    $('#submit').on('submit', function(e) { 
        e.preventDefault();  //prevent form from submitting
        console.log(data);
        $.ajax({
          type: "POST",
          async: true,
          url: test.php,
          data: $(this).serializeArray(),
          success: function (data) {
            console.log(data);
          }
         });
        });
     });
    </script>
  </body>
</html>

希望这对你有帮助。

赞(0）回复(0）举报 2023-05-21

pcrecxhr2#

您需要向document.ready（）调用和click（）调用传递一个函数。

<script type="text/javascript">

        $(document).ready(function() {
            Your variables here...

            $('#submit').click(function() {
                ... Ajax call here.
            });
        });
    </script>

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 如何使用 AJAX 从数据库中检索数据并将结果保存在变量中？

我是jQuery和 AJAX 的新手，我正在做一个登录页面的项目，我需要使用AJAX从数据库中检索数据。我不是100%流利的英语，所以我会尽我所能来解释这个问题（在谷歌翻译的帮助下）。下面是我使用的代码：index.html

test.php

控制台日志

2条答案

相关问题

热门标签

最新问答