Fatal编程技术网
  • javascript/
  • Javascript 表单-同步请求并在提交时显示div

Javascript 表单-同步请求并在提交时显示div

javascript jquery html forms

Javascript 表单-同步请求并在提交时显示div,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我在做一个yahtzee类型的双人骰子游戏。要开始游戏，用户输入2个名称并提交，这将启动游戏并显示骰子区域。我做了很多尝试和错误，但我无法提交表单，获取输入，并显示游戏区域 HTML: 我也试过： $(document).ready(function () { $("#new_game").submit(function (event) { var newGameData = { "player1": $("input[name=player

我在做一个yahtzee类型的双人骰子游戏。要开始游戏，用户输入2个名称并提交，这将启动游戏并显示骰子区域。我做了很多尝试和错误，但我无法提交表单，获取输入，并显示游戏区域

HTML:

我也试过：

$(document).ready(function () {

     $("#new_game").submit(function (event) {

        var newGameData = {
            "player1": $("input[name=player1]").val(),
            "player2": $("input[name=player2]").val()
        };

        $.ajax({
                type: "POST",
                url: "http://examples.funwebdev.com/process.php",
                data: formData,
                dataType: 'json',
                encode: true
            })
            .done(function (data) {
                (".play_area").show();
            });

        event.preventDefault();
    });

});
以及：

我怀疑我对表单名称的使用可能是错误的（我应该改用id吗？#正确吗？等等），但我已经尝试过了，但仍然无法得到它。

我尝试过修改您的上一种方法。我希望在您使用以下修改后的代码进行更新后，它将正常工作：

在你的HTML中<代码>播放区是指定给
元素的
id
。因此，为了处理JQuery，我们需要使用
#
，而不是点。比如
$（“#播放区域”）.show（）

CSS:


#play_area{
  display:none;
}


Jquery:


$(document).ready(function () {

    $("form[name=new_game]").submit(function (e) {
         return false;
    });

    $("#newGameSubmit").click(function (event) {
      event.preventDefault();
      var player1 = $("#player1").val();
      var player2 = $("#player2").val();

      var newGameData = {
        "player1": player1,
        "player2": player2
      };

      $.ajax({
        type: "POST",
        url: "http://examples.funwebdev.com/process.php",
        data: newGameData,
        cache: false,
        success: function () {
          $("#play_area").show();
        }
      });
   });
});


我也创作了一把小提琴；但是它不起作用，因为我们不能从
jsfiddle.net
中跨域调用Ajax到您的
funwebdev.com
域。
但你可以参考它：


我试着修改你上次的方法。我希望在您使用以下修改后的代码进行更新后，它将正常工作：

在你的HTML中<代码>播放区
是指定给
元素的
id
。因此，为了处理JQuery，我们需要使用
#
，而不是点。比如
$（“#播放区域”）.show（）

CSS:


#play_area{
  display:none;
}


Jquery:


$(document).ready(function () {

    $("form[name=new_game]").submit(function (e) {
         return false;
    });

    $("#newGameSubmit").click(function (event) {
      event.preventDefault();
      var player1 = $("#player1").val();
      var player2 = $("#player2").val();

      var newGameData = {
        "player1": player1,
        "player2": player2
      };

      $.ajax({
        type: "POST",
        url: "http://examples.funwebdev.com/process.php",
        data: newGameData,
        cache: false,
        success: function () {
          $("#play_area").show();
        }
      });
   });
});


我也创作了一把小提琴；但是它不起作用，因为我们不能从
jsfiddle.net
中跨域调用Ajax到您的
funwebdev.com
域。
但你可以参考它：


修复了未提交的表单。检查以下代码


    <script>
    jQuery(document).ready(function($) {
        $("#new_game").submit(function() {
            var newGameData = {
                "player1": $("input[name=player1]").val(),  
                "player2": $("input[name=player2]").val()
            };

                $.ajax({
                    type: "POST",
                    url: "http://examples.funwebdev.com/process.php",
                    data: newGameData,
                    dataType: 'json',
                    encode: true,
                    success: function(data) {
                       (".play_area").show();
                        alert(data); 
                    }
                });
            return false;
        });
    });

</script>
</head>
<body>
<div id="top_area">
    <div id="new_game_form">
        <form action="#" method="post" id="new_game" name="new_game">
            Player 1:
            <br>
            <input type="text" name="player1">
            <br> Player 2:
            <br>
            <input type="text" name="player2">
            <br>
            <input id="newGameSubmit" type="submit" value="Start Game">
        </form>
    </div>
    <div id="player_turn">
        Please enter player names and load a new game!
    </div>
    <div id="player_scores">
        Current Score
    </div>
</div>
<div id="play_area">
    <div class="play_div" id="game_board">
        <a class="diceimage" id="dice1"></a>
        <a class="diceimage" id="dice2"></a>
        <a class="diceimage" id="dice3"></a>
        <a class="diceimage" id="dice4"></a>
        <a class="diceimage" id="dice5"></a>
    </div>
    <div class="play_div" id="submit_move">
        <form class="play_div" action="http://examples.funwebdev.com/process.php" method="post" name="submit_move">
            <input type="submit" value="Roll the dice!" onclick="rollDice()">
        </form>
    </div>

    <div id="submit_score">
        <form action="">
            <select name="Score">
                <option value="2OfAKind">Two of a kind</option>
                <option value="3OfAKind">Three of a kind</option>
                <option value="4OfAKind">Four of a kind</option>
                <option value="5OfAKind">Five of a kind</option>
                <option value="fullHouse">Full house</option>
            </select>
            <input type="submit" value="Submit your score">
        </form>

    </div>
</div>




jQuery（文档）.ready（函数（$）{
$（“#新游戏”）。提交（函数（）{
var newGameData={
“player1”：$（“输入[name=player1]”）。val（），
“player2”：$（“输入[name=player2]”）。val（）
};
$.ajax({
类型：“POST”，
url:“http://examples.funwebdev.com/process.php",
数据：newGameData，
数据类型：“json”，
编码：对，
成功：功能（数据）{
（“.play_area”）.show（）；
警报（数据）；
}
});
返回false；
});
});
玩家1：



玩家2：




请输入玩家名称并加载新游戏！
当前分数
两个同类
一类三个
一类四个
五种
满座

修复了未提交的表单。检查以下代码


    <script>
    jQuery(document).ready(function($) {
        $("#new_game").submit(function() {
            var newGameData = {
                "player1": $("input[name=player1]").val(),  
                "player2": $("input[name=player2]").val()
            };

                $.ajax({
                    type: "POST",
                    url: "http://examples.funwebdev.com/process.php",
                    data: newGameData,
                    dataType: 'json',
                    encode: true,
                    success: function(data) {
                       (".play_area").show();
                        alert(data); 
                    }
                });
            return false;
        });
    });

</script>
</head>
<body>
<div id="top_area">
    <div id="new_game_form">
        <form action="#" method="post" id="new_game" name="new_game">
            Player 1:
            <br>
            <input type="text" name="player1">
            <br> Player 2:
            <br>
            <input type="text" name="player2">
            <br>
            <input id="newGameSubmit" type="submit" value="Start Game">
        </form>
    </div>
    <div id="player_turn">
        Please enter player names and load a new game!
    </div>
    <div id="player_scores">
        Current Score
    </div>
</div>
<div id="play_area">
    <div class="play_div" id="game_board">
        <a class="diceimage" id="dice1"></a>
        <a class="diceimage" id="dice2"></a>
        <a class="diceimage" id="dice3"></a>
        <a class="diceimage" id="dice4"></a>
        <a class="diceimage" id="dice5"></a>
    </div>
    <div class="play_div" id="submit_move">
        <form class="play_div" action="http://examples.funwebdev.com/process.php" method="post" name="submit_move">
            <input type="submit" value="Roll the dice!" onclick="rollDice()">
        </form>
    </div>

    <div id="submit_score">
        <form action="">
            <select name="Score">
                <option value="2OfAKind">Two of a kind</option>
                <option value="3OfAKind">Three of a kind</option>
                <option value="4OfAKind">Four of a kind</option>
                <option value="5OfAKind">Five of a kind</option>
                <option value="fullHouse">Full house</option>
            </select>
            <input type="submit" value="Submit your score">
        </form>

    </div>
</div>




jQuery（文档）.ready（函数（$）{
$（“#新游戏”）。提交（函数（）{
var newGameData={
“player1”：$（“输入[name=player1]”）。val（），
“player2”：$（“输入[name=player2]”）。val（）
};
$.ajax({
类型：“POST”，
url:“http://examples.funwebdev.com/process.php",
数据：newGameData，
数据类型：“json”，
编码：对，
成功：功能（数据）{
（“.play_area”）.show（）；
警报（数据）；
}
});
返回false；
});
});
玩家1：



玩家2：




请输入玩家名称并加载新游戏！
当前分数
两个同类
一类三个
一类四个
五种
满座

是否有任何错误被抛出或报告？检查浏览器开发工具中的“控制台”和“网络”。请注意，
$.ajax（）
错误会被自动丢弃，除非您通过
错误
选项或方法为它们提供侦听器。是否有任何错误被抛出或报告？检查浏览器开发工具中的“控制台”和“网络”。请注意，
$.ajax（）
错误会被自动丢弃，除非您通过
错误
选项或方法为它们提供侦听器。