jquery 在同一页中多次使用表单

7xllpg7q  于 12个月前  发布在  jQuery
关注(0)|答案(2)|浏览(103)

我是新的全栈开发。我试图写一个基于文本的游戏,你得到输入(北,南,东,西),使用该输入访问mySQL数据库以获取新位置,并相应地更新页面上的文本。他们应该能够输入输入,直到他们进入房间与恶棍或直到他们已经收集了所有的项目(每个房间1个)。问题是我目前遇到的问题是用户输入什么都不会发生。在某一点上,它会接受输入并显示一条消息,但不会接受同一形式的进一步输入。我在HTML和CSS方面的经验很少,没有一个是用JavaScript或PHP写的。我知道代码很草率,但现在我只是想弄清楚如何让输入正常工作。我不确定我是否应该使用apache来更新页面在真实的时间或只是使用jQuery。我使用PHP的一些信息应该用JavaScript完成吗?
我试过使用aExclusive,但现在似乎没有输入被传达。在一个点上,它发送数据,但它只会接受输入一次。我完全迷失了,有多少信息在那里不知所措。如果有人能至少指出我在正确的方向上搜索什么,我会很感激。

**编辑为包含准备好的语句。我的输入框现在接受一个输入并做它应该做的事情。但是如果我再次输入相同的输入(即向北输入两次),它不会注册,如果我输入其他任何东西,$_POST是空的。

TL;医生:使用HTML,CSS,JavaScript,PHP,MySQL在同一页面上多次获取和处理输入。Game.php类(如果访问数据库是我的问题):

public function getDirections($conn) {
    $check = "SELECT direction FROM " . $this->currTable;
    $stmt = $conn->prepare($check);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result)) {
        if ($result - > num_rows) {
            while ($row = $result - > fetch_assoc()) {
            echo " [" . $row["direction"] . "]";
      }
    }
  }
}

public function getNextRoom($conn, $direction) {
    $check = "SELECT destination, newtable FROM " . $this->currTable . " WHERE direction=?;";
    $stmt = $conn->prepare($check);
    $stmt->bind_param("s", $direction);
    $stmt->execute();
    $result = $stmt->get_result();  
    if ($result) {
        if ($result - > num_rows) {
            while ($row = $result - > fetch_assoc()) {
            $this - > currRoom = $row["destination"];
            $this - > currTable = $row["newtable"];
            }
        }
    } else {
    echo "That's not a valid direction. Try again.";
  }
  $this - > printStatement($conn);
}

public function getItem() {
  if ($this - > currRoom != 'the parking lot') {
    $result = array_search($this - > currRoom, $this - > items);
    if ($result == 'Toby') {
      echo $this - > fail;
    }
    elseif (!in_array($result, $this - > inventory)) {
      array_push($this - > inventory, $result);
    }
  }
  echo implode($this - > inventory);
}

public function printStatement($conn) {
  $this - > getItem();
  echo "<br> You are in $this->currRoom.";
  echo "<br> Which direction would you like to go?";
  $this - > getDirections($conn);
}

字符串
dwight.php(inside body):

$conn = new mysqli($servername, $username, $password, $db);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

<div id="main">
    <form action="dwight.php" method="POST">
        <input type="text" name="inputDirection" placeholder="Where to?">
        <input type="button" value="Let's Go!">
    </form>
    <?php
    if(!empty($_POST["inputDirection"])){
        $direction = $_POST["inputDirection"];
        $dwight->getNextRoom($conn, $direction);
    }
    else{
        echo "You are in the parking lot. <br> Which direction would you like to go? [north]";
    }
    ?>
</div>

cetgtptt

cetgtptt1#

首先,在指定direction时缺少了一个#,所以

var direction = $("direction").val();

字符串

var direction = $("#direction").val();


其次,你应该让系统知道要调用的php脚本名。比如说,PHP脚本的名字是testajax1Sept2023.php,那么请使用

url: "testajax1Sept2023.php",


因此,为了演示,您可以使用以下HTML:

<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>

<div id="result"></div>

<form>
  <input type="text" id="direction" placeholder="Where to?">
  <input type="button" id="submit" onclick="javascript:testajax();" value="Let's Go!">
</form>

<script type="text/javascript">

function testajax() {
 var direction = $("#direction").val();
   $.ajax({
       type: "GET",
       data: { "direction": direction} ,
       url: "testajax1Sept2023.php",
       success: function(response){
           $("#result").html(response);
         }
   });   
}

</script>


以及以下示例PHP脚本(名称为testajax1Sept2023.php):

<?php
// testajax.php

echo "You have chosen " . $_GET["direction"]; 

?>


您可以通过此sandbox测试运行它
在测试之后,您将了解使用aSQL的基本知识,现在您可以更改代码以链接MySQL数据库(请记住将查询更改为参数化的预处理语句,这对SQL注入具有弹性,如user3783243所建议的那样)

3ks5zfa0

3ks5zfa02#

HTML : 

<div id="main">
    <form id="gameForm" action="dwight.php" method="POST">
        <input type="text" name="inputDirection" placeholder="Where to?">
        <input type="submit" value="Let's Go!">
    </form>
<!-- Show game details within the form -->
    <?php
    $dwight->printStatement($conn);
    ?>
</div>

Script js:

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
    // Intercept form submission
    $("#gameForm").submit(function(e) {
        e.preventDefault(); // Stop the form from being submitted the conventional way.

        // Get the form data
        var formData = $(this).serialize();

        // Send an AJAX request to the server
        $.ajax({
            type: "POST",
            url: "dwight.php",
            data: formData,
            success: function(response) {
                // Update the page's game details.
                $("#main").html(response);
            }
        });
    });
});
</script>

PHP :

if (!empty($_POST["inputDirection"])) {
    $direction = $_POST["inputDirection"];
    $dwight->getNextRoom($conn, $direction);
} else {
    echo "You are in the parking lot. <br> Which direction would you like to go? [north]";
}

字符串
在实现这些修改后,您希望拥有一个响应性更强、交互性更强的基于文本的游戏。

相关问题