Question

所以这是我需要帮助的作业。我将在下面提供代码。我需要使用jQuery / Ajax帖子将两个值发送到我的数据库。所有代码都是正确的，我已在单独的测试文件中对其进行了测试。但是，它不能在我的javascript中的函数内部工作。出现这种情况的原因是什么？

主html文件：

<html>
<head>
<title>Shootin' Exposition</title>
<link href='https://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
<style>
html,body {
  background: url(frontierland.jpg) no-repeat center center fixed;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover;    /* Mozilla*/
  -o-background-size: cover;      /* Opera*/
  background-size: cover;         /* Generic*/
  font-family: 'Rye', serif;
  text-decoration: none;
}

.help
{
  background-color: #555555;
  width:250px;
  opacity: 0.7;
}
.score
{
  background-color: wheat;
  opacity: 0.7;
  color:saddlebrown;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
    var tm, crockett;
    $(document).ready(
 function () {
 //start the game
 $('#start').click(function () {

     init();
 }
)

 $('#stop').click(function () {
     flush();
 }
)

 }
);
    var connection = new ActiveXObject("ADODB.Connection");
    var connectionstring="Data Source=<localhose"

    function init() {
        // create crockett
        crockett = $('<img>').attr({
            'src': 'site.gif'
        }).css({
            'position': 'absolute',
            'z-index': 75,
            top: -10,
            left: -10
        });

        //append it to body
        $(document.body).append(crockett);

        //start bullseyeing
        do_bullseye();

    }

    function do_bullseye() {
        //take a random color
        var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' +
                    Math.floor(Math.random() * 255) + ',' +
                    Math.floor(Math.random() * 255) + ')';


        //generate random position
        var x = Math.floor(Math.random() * $(window).width());
        var y = Math.floor(Math.random() * $(window).height());
//            var x = $(window).width() / 2;
//            var y = $(window).height() / 2;
//            crockettx = Math.floor(Math.random() * $(window).width());
//            crocketty = Math.floor(Math.random() * $(window).height());

        crockett = $('<img>').attr({
            'src': 'site.gif'
        }).css({
            'position': 'absolute',
            'z-index': 75,
            top: Math.floor(Math.random() * $(window).height()),
            left: Math.floor(Math.random() * $(window).width())
        });
        $(document.body).append(crockett);

        //decorating the bullseye
        bullseye = $('<span>').css({
            'position': 'absolute',
            height: '25px',
            width: '25px',
            'background-color': '#FF0000',
            'border-color': '#550000',
            'border-style': 'dotted',
            'border-width': '5px',
            'border-radius': '25px',
            '-moz-border-radius': '25px',
            '-webkit-border-radius': '25px',
            top: y - 12, //offsets
            left: x - 12 //offsets
        });

        //append it to body
        $(document.body).append(bullseye);

        //bind the hit on click event
        bullseye.bind('click', function (e) {
            crockett.stop();
            //you won
            won();
            //hide the bullseye
            hit(e.pageX, e.pageY, $(e.target));
        });

        //call crockett to chase the bullseye
        chase(x, y, bullseye);

        //bullseyes are endless
        tm = window.setTimeout('do_bullseye()', 1500);

    }


    function chase(x, y, bullseye) {
        //crockett gets the bullseye
        crockett.animate({
            top: y - 35,
            left: x - 35
        }, 1500, function () {
            //hit the bullseye
            hit(x, y, bullseye);
            //you lose
            lose();
        });
    }


    function hit(x, y, bullseye) {
        bullseye.animate({
            height: '100px',
            width: '100px',
            'border-radius': '200px',
            '-moz-border-radius': '200px',
            '-webkit-border-radius': '200px',
            opacity: 0,
            top: y-50,
            left: x-50

        }, 100, function () {
            bullseye.remove();
        });

    }

    function lose() {
        $("#crockett").html(parseInt($("#crockett").html()) + 1);
        crockett.remove();
        if (parseInt($("#crockett").html()) == 10) {
            alert("You lost!");
            window.location.replace("http://www.google.com/");
        }
    }

    function won() {
        crockett.remove();
        crockett.stop();
        $("#you").html(parseInt($("#you").html()) + 1);
        if (parseInt($("#you").html()) == 10)
        {
            alert("You won!");

            //calling teh post function which does not work

            post();

            window.location.replace("http://www.google.com/");
        }
    }
    function flush() {

        crockett.remove();
        clearTimeout(tm);
        crockett.stop();
        bullseye.hide();

    }

    //this is the function that I am talking about
    function post() {
      $.post("save_score.php", {you: you, crockett: crockett}); 
    }


</script>

<!-- Start of JQuery Code -->

<script type="text/javascript">

</script>

<!-- End of JQuery Code -->

</head>
<body style="cursor:crosshair; background-color:#222222;">
    <div class="help">
        <p>
            Use mouse-clicks to get the bullseye before Davy Crockett 
does...
            <br />
            Fullscreen mode helps
            <br />
            Scores are: You vs. Crockett
            <br />
            <span href="#" id="start" style="color: 
#FDFF00;">Play</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
                href="#" id="stop" style="color: #FDFF00;">Stop</span>
        </p>
    </div>
    <br />
    <span class="score">P1:<span id="you">0</span> / P2:<span 
id="crockett">0</span><br />
    </span>
<br />
</body>
</html>

'save_score.php'：

<?php
  include 'connection.php';

  $Player1 = 'You';
  $Player2 = 'Crockett'

  $you      = $_POST["you"];
  $crockett = $_POST['crockett'];

  //echo $name;
  //echo $score;

  //Send Scores from Player 1 to Database 
  $save1   = "INSERT INTO `galleryscores` (`player_name`, `player_score`) 
    VALUES ('" . $Player1 . "', , '" . $you . "')";

  $success = $mysqli->query($save1);

  if (!$success) {
    die("Couldn't enter data: ".$mysqli->error);
  }

  //Send Scores from Player 2 to Database 
   $save2   = "INSERT INTO `galleryscores` (`player_name`, `player_score`) 
    VALUES ('" . $Player2 . "', , '" . $crockett . "')";

  $success = $mysqli->query($save2);

  if (!$success) {
    die("Couldn't enter data: ".$mysqli->error);
  }

?>

Gyazo控制台截图：

Answer 1

我愿意打赌你猜得到的是Reference Error: you is not defined.或Reference Error: crockett is not defined.。原因是因为在您的函数定义中，您没有列出参数。

因此，我们调用您的函数，不要放置参数，这会导致错误。

尝试以这种方式定义您的功能：

function post(you, crockett) {
  $.post("save_score.php", {you: you, crockett: crockett}); 
}

然后当你调用它时，尝试使用它调用它：

post('me', [1,2,3]);

您应该在Php脚本中拥有这些值。

如果你想要更多的信息来理解究竟发生了什么，那么这个不起作用的原因是你没有在当前的词法范围中声明你或crockett变量。

你应该看看这本书：https://github.com/getify/You-Dont-Know-JS

它会丰富你的javascript功能，因为它有我的。

干杯。

Answer 2

未定义变量你，修复此问题并尝试将所有代码放在Jquery范围内

$(document).ready(
var tm, crockett; //var you is missing
 function () {
 //start the game
 $('#start').click(function () {

     init();
 }
)

 $('#stop').click(function () {
     flush();
 }
)

 }

// <--put your code here
);

另外看到有关AxtiveXOcject的信息，只有IE支持：

https://docs.microsoft.com/en-us/scripting/javascript/reference/activexobject-object-javascript

Answer 3

我明白了！这是来自各地的错误的组合！我尝试过的其他东西的代码错位，而且某些引号和逗号都放错了位置。我需要在通过post函数发送变量之前初始化变量。可能最有用的提示是使用＆＃34; web调试器＆＃34;嵌入Chrome！这对于向我提供有关错误的宝贵反馈很有帮助为了以防万一，我也禁用了我的广告拦截器，我发现我遇到的其中一个错误可能是由它引起的，所以这样做可能会有所帮助。无论如何，我发布了已完成的工作代码。感谢大家的帮助！

＆＃13;

<html>

<head>
  <title>Shootin' Exposition</title>
  <link href='https://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
  <style>
    html,
    body {
      background: url(frontierland.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      /* For WebKit*/
      -moz-background-size: cover;
      /* Mozilla*/
      -o-background-size: cover;
      /* Opera*/
      background-size: cover;
      /* Generic*/
      font-family: 'Rye', serif;
      text-decoration: none;
    }
    
    .help {
      background-color: #555555;
      width: 250px;
      opacity: 0.7;
    }
    
    .score {
      background-color: wheat;
      opacity: 0.7;
      color: saddlebrown;
    }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
    var tm, crockett;
    $(document).ready(
      function() {
        //start the game
        $('#start').click(function() {

          init();
        })

        $('#stop').click(function() {
          flush();
        })

      }
    );

    function init() {
      // create crockett
      crockett = $('<img>').attr({
        'src': 'site.gif'
      }).css({
        'position': 'absolute',
        'z-index': 75,
        top: -10,
        left: -10
      });

      //append it to body
      $(document.body).append(crockett);

      //start bullseyeing
      do_bullseye();

    }

    function do_bullseye() {
      //take a random color
      var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' +
        Math.floor(Math.random() * 255) + ',' +
        Math.floor(Math.random() * 255) + ')';


      //generate random position
      var x = Math.floor(Math.random() * $(window).width());
      var y = Math.floor(Math.random() * $(window).height());
      //            var x = $(window).width() / 2;
      //            var y = $(window).height() / 2;
      //            crockettx = Math.floor(Math.random() * $(window).width());
      //            crocketty = Math.floor(Math.random() * $(window).height());

      crockett = $('<img>').attr({
        'src': 'site.gif'
      }).css({
        'position': 'absolute',
        'z-index': 75,
        top: Math.floor(Math.random() * $(window).height()),
        left: Math.floor(Math.random() * $(window).width())
      });
      $(document.body).append(crockett);

      //decorating the bullseye
      bullseye = $('<span>').css({
        'position': 'absolute',
        height: '25px',
        width: '25px',
        'background-color': '#FF0000',
        'border-color': '#550000',
        'border-style': 'dotted',
        'border-width': '5px',
        'border-radius': '25px',
        '-moz-border-radius': '25px',
        '-webkit-border-radius': '25px',
        top: y - 12, //offsets
        left: x - 12 //offsets
      });

      //append it to body
      $(document.body).append(bullseye);

      //bind the hit on click event
      bullseye.bind('click', function(e) {
        crockett.stop();
        //you won
        won();
        //hide the bullseye
        hit(e.pageX, e.pageY, $(e.target));
      });

      //call crockett to chase the bullseye
      chase(x, y, bullseye);

      //bullseyes are endless
      tm = window.setTimeout('do_bullseye()', 1500);

    }


    function chase(x, y, bullseye) {
      //crockett gets the bullseye
      crockett.animate({
        top: y - 35,
        left: x - 35
      }, 1500, function() {
        //hit the bullseye
        hit(x, y, bullseye);
        //you lose
        lose();
      });
    }


    function hit(x, y, bullseye) {
      bullseye.animate({
        height: '100px',
        width: '100px',
        'border-radius': '200px',
        '-moz-border-radius': '200px',
        '-webkit-border-radius': '200px',
        opacity: 0,
        top: y - 50,
        left: x - 50

      }, 100, function() {
        bullseye.remove();
      });

    }

    function lose() {
      $("#crockett").html(parseInt($("#crockett").html()) + 1);
      crockett.remove();
      if (parseInt($("#crockett").html()) == 10) {
        alert("You lost!");

        post();

        window.location.replace("http://www.yahoo.com/");
      }
    }

    function won() {
      crockett.remove();
      crockett.stop();
      $("#you").html(parseInt($("#you").html()) + 1);
      if (parseInt($("#you").html()) == 10) {
        alert("You won!");

        post();

        window.location.replace("http://www.google.com/");
      }
    }

    function flush() {

      crockett.remove();
      clearTimeout(tm);
      crockett.stop();
      bullseye.hide();

    }

    //
    function post() {

      var you = "You";
      var crockett = "Crockett";
      var you_score = parseInt($("#you").html());
      var crockett_score = parseInt($("#crockett").html());

      $.post("save_score.php", {
          name1: you,
          name2: crockett,
          score1: you_score,
          score2: crockett_score
        })
        .done(function(data) {
          alert("Scores were saved: " + data);
        });
    }
  </script>

  <!-- Start of JQuery Code -->

  <script type="text/javascript">
  </script>

  <!-- End of JQuery Code -->

</head>

<body style="cursor:crosshair; background-color:#222222;">
  <div class="help">
    <p>
      Use mouse-clicks to get the bullseye before Davy Crockett does...
      <br /> Fullscreen mode helps
      <br /> Scores are: You vs. Crockett
      <br />
      <span href="#" id="start" style="color: #FDFF00;">Play</span>&nbsp;&nbsp;&nbsp;&nbsp;<span href="#" id="stop" style="color: #FDFF00;">Stop</span>
    </p>
  </div>
  <br />
  <span class="score">P1:<span id="you">0</span> / P2:<span id="crockett">0</span><br />
  </span>
  <br />
</body>

</html>

＆＃13;

<?php
  include 'connection.php';

  $Player1 = $_POST['name1'];
  $Player2 = $_POST['name2'];

  $Player1_Score = $_POST['score1'];
  $Player2_Score = $_POST['score2'];

  //Send Scores from Player 1 to Database 
  $save1   = "INSERT INTO `galleryscores` (`player_name`, `player_score`) VALUES ('$Player1', '$Player1_Score')";

  $success = $mysqli->query($save1);

  if (!$success) {
    die("Couldn't enter data: ".$mysqli->error);

    echo "unsuccessfully";
  }

  //Send Scores from Player 2 to Database 
  $save2   = "INSERT INTO `galleryscores` (`player_name`, `player_score`) VALUES ('$Player2', '$Player2_Score')";

  $success = $mysqli->query($save2);

  if (!$success) {
    die("Couldn't enter data: ".$mysqli->error);
    echo "unsuccessfully";
  }

  echo "successfully";
?>

＆＃13;

为了便于阅读，将上述内容添加为代码段。

Answer 4

你得到了什么错误？
您是否检查（控制台）以查看jquery帖子值是否为空？

确保php中的帖子值不为空

$you      = (isset($_POST["you"]) AND !empty($_POST["you"])) ? $_POST["you"] : "empty you";
$crockett = (isset($_POST['crockett']) AND !empty($_POST['crockett'])) ? $_POST['crockett'] : "empty crockett";

您的查询不正确;

更改

$save1   = "INSERT INTO `galleryscores` (`player_name`, `player_score`) VALUES ('" . $Player1 . "', , '" . $you . "')";

以

$save1 = "INSERT INTO `galleryscores` (`player_name`, `player_score`) VALUES ('$Player1', '$you')";

更改

$save2 = "INSERT INTO `galleryscores` (`player_name`, `player_score`) VALUES ('" . $Player2 . "', , '" . $crockett . "')";

以

$save2 = "INSERT INTO `galleryscores` (`player_name`, `player_score`) VALUES ('$Player2', '$crockett')";

您有不必要的逗号和引号。

干杯

在Javascript函数中使用jQuery POST - 无法正常工作

4 个答案: