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

【问题标题】：Alert function is not working in the js code警报功能在 js 代码中不起作用
【发布时间】：2014-11-12 11:59:41
【问题描述】：

这是我的索引文件：

<!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 文件中不起作用，以及为什么数据没有插入到数据库中。

【问题讨论】：

你是导入jQuery库吗？
您的控制台中是否有任何 JavaScript 错误？
给你的ajax添加一个'error`回调，这样你就可以查看是否有服务器端错误，并在js控制台中查看js错误
查看浏览器的开发者工具。查看 JavaScript 控制台。它是否报告任何错误？查看“网络”选项卡。是否正在提出请求？它得到回应了吗？它们是否包含您期望的数据？

标签： javascript php jquery ajax pdo

【解决方案1】：

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

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

交换脚本元素的顺序。

【讨论】：

【解决方案2】：

在 sub.js 中调用其函数之前更正您的 HTML 并使用 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>

【讨论】：

为什么要添加name属性？

【解决方案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
})

希望对你有帮助

【讨论】：