Question

这是我的索引文件：

<!Doctype html>
<html>
<head><title>The Database Entry Project</title></head>
<body>
    <div>
        <form>
            <h3>Input Details Here</h3>
            <label for="fn">First Name</label>
            <input id="fn" type="text">
            <label for="ln">Last Name</label>
            <input id="ln" type="text">
            <br><br>
            <input type="submit" value="Register" id="sub">
            <input type="submit" value="Login" id="log">
            <input type="reset" value="Reset">
        </form>

    </div>
    <script type="text/javascript" src="js/sub.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
</body>
</html>

这是sub.js

//-------------------------------Register----------------------------
$(function () {
    $('#sub').on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();

        var fn = $('#fn').val();
        var ln = $('#ln').val();
        $.ajax({
            url: 'php/login.php',
            type: 'post',
            data: {
                'fn': fn,
                'ln': ln
            },
            success: function (data) {
                alert(data);
            },
            cache: false
        }); // end ajax call
    });
});
//-------------------------Login---------------------------------------
$(document).ready(function(){
  $('#log').on("click",function(e){
    e.preventDefault();
    e.stopPropagation();

    var fn = $('#fn').val();
   var ln = $('#ln').val();

   $.ajax({
      url: 'php/log.php',
      type: 'post',
      data: { 'fn': fn , 'ln': ln },
      success: function(data) {
        alert(data);

      },
      cache: false
    }); // end ajax call

   });
});

这是sub.php

<?php
session_start();
require 'config.php';
$fn = $_POST['fn'];
$ln = $_POST['ln'];
$stmt = $dbh->prepare("INSERT INTO tab1(fn,ln)VALUES(?,?)");
$stmt->execute(array($fn, $ln));
echo "Saved Successfully";
?>

这是log.php

<?php
session_start();
require 'config.php';

$fn = $_POST['fn'];
$ln = $_POST['ln'];
$stmt = $dbh->prepare("SELECT fn, ln FROM tab1 WHERE fn=? AND ln=?");
// $stmt->bindValue(1, $fn);
// $stmt->bindValue(2, $ln);
$stmt->execute(array($fn,$ln));
$row = $stmt->fetch();

if($row > 0) {
  echo "Login Successful";
}

else {
  echo "Login failed.";
}

?>

用于连接数据库的配置文件正常工作。

PHP文件正常工作（单独测试时）

我不明白为什么警报功能在sub.js文件中不起作用，以及数据未插入数据库的原因。

Answer 1

您的JavaScript错误控制台会抱怨$未定义。

您包括sub.js（取决于jQuery）之前包含jquery.js。

交换脚本元素的顺序。

Answer 2

更正您的HTML＆amp;在sub.js中调用函数之前使用jquery：

<!Doctype html>
<html>
<head><title>The Database Entry Project</title></head>
<body>
    <div>
        <form>
            <h3>Input Details Here</h3>
            <label for="fn">First Name</label>
            <input id="fn" type="text" /> 
            <label for="ln">Last Name</label>
            <input id="ln" type="text" /> 
            <br /><br />
            <input type="submit" value="Register" id="sub" />
            <input type="submit" value="Login" id="log" />
            <input type="reset" value="Reset" />
        </form>

    </div>
    <!-- JQUERY should be called before using it's functions-->
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/sub.js"></script>
</body>
</html>

Answer 3

昆汀的回答是正确的。此外，我希望您建议，为了更好地处理现在和将来的jQuery ajax调用，最好使用done（）和fail（）构造方法，如here所述：

jQuery.ajax({
url: 'myurl',
cache: false,
async: true,
data: {}, // object to pass
type: 'post',
dataType: 'json' // if necessary
}).done(function(d){
    // some stuffs here...alert(d)?
}).fail(function(j,s,e){
    // manage errors here
})

希望这有帮助

警报功能在js代码中不起作用

3 个答案: