猿问

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

我是jQuery和AJAX的新手,我正在将登录页面作为项目进行处理,我需要使用AJAX从数据库中检索数据。我不是100%流利的英语,所以我会尽我所能解释这个问题(在谷歌翻译的帮助下)。以下是我正在使用的代码:


索引.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>

测试.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] 输入元素应具有自动完成属性(建议:“当前密码”):(更多信息:https://www.googlesite.com)


未捕获的语法错误:意外的令牌 var ajax.html:19


I've looked at the code and I can't seem to find an error.

Thanks in advance! ;)


>P.S.

>It's probably going to end up being some stupid typo.

>Other than that, have a great day!


慕运维8079593
浏览 129回答 2
2回答

至尊宝的传说

您可以使用 不使用事件。clicksubmit在你的情况下,只要给你的喜欢 -idform<form validate="" id="submit">现在,在您的脚本中 -js$(function() { //shorthand document.ready function&nbsp; &nbsp; $('#submit').on('submit', function(e) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; //prevent form from submitting&nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; async: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: test.php,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: $(this).serializeArray(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });});因此,请检查您的整个代码 -<!DOCTYPE html><html>&nbsp; <head>&nbsp; <title>Login</title>&nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <form validate="" id="submit">&nbsp; &nbsp; &nbsp; <input type="text" placeholder="Username" id="username" required/><br />&nbsp; &nbsp; &nbsp; <input type="password" placeholder="Password" id="password" required/><br />&nbsp; &nbsp; &nbsp; <input type="submit" value="Login" />&nbsp; &nbsp; </form>&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; // when document is loaded&nbsp; &nbsp; $(function() { //shorthand document.ready function&nbsp; &nbsp; $('#submit').on('submit', function(e) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; //prevent form from submitting&nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; async: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: test.php,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: $(this).serializeArray(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; </script>&nbsp; </body></html>希望这会帮助你。

青春有我

您需要将一个函数传递给您的 document.ready() 调用和您的 click() 调用。&nbsp; &nbsp; &nbsp;<script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Your variables here...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#submit').click(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ... Ajax call here.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script>
随时随地看视频慕课网APP
我要回答