使用jQuery Ajax发送帖子给PHP

Question

我有两页。第一页是发送事件，在第二页我希望接收事件并回显它们。

但它不起作用。

第一页

<form method="post" action="answer.php">
    <div class="row">
        <div class="container">
            <div class="exam pull-left">
                <?php
                //           <?php
                // input1, input2, input3, input4
                while($queryFetched = $FetchedEdit->fetch_assoc()){?>
                    <h5><?php echo $queryFetched['id'];?> - <?php echo $queryFetched['question'];?></h5>
                    <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input1'];?>"><?php echo $queryFetched['input1'];?><br>
                    <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input2'];?>"><?php echo $queryFetched['input2'];?><br>
                    <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input3'];?>"><?php echo $queryFetched['input3'];?><br>
                    <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input4'];?>"><?php echo $queryFetched['input4'];?><br>
                    <br><hr>
                    <?php
                }
                ?>
                <input type="submit" id="submit" class="btn btn-sauces" value="sub" name="submit">
            </div>
        </div>
    </div>
</form>
<script language="JavaScript">
    $(document).ready(function () {
        $('.myRadio').click(function(e){
            var answer =  ($(this).val());
            $.post("answer.php",{
                question: answer
            });
        });
    });
</script>

第二页

<?php
if (isset($_POST['question']))
{
    $name = $_POST['question'];
    echo $name;
}

Answer 1

使用Ajax回调函数，如success，error，complete来跟踪错误。请参阅以下代码以供参考。

$.post("demo_test_post.php",
{
    name: "Donald Duck",
    city: "Duckburg"
},
function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

Answer 2

如果您打算通过AJAX将数据发送到answer.php而没有FORM SUBMIT。

在head

中加入此内容

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

您的form

<form method="post" action="answer.php">
    <div class="row">
        <div class="container">
            <div class="exam pull-left">
                <?php
                    while($queryFetched = $FetchedEdit->fetch_assoc()){?>
                        <h5><?php echo $queryFetched['id'];?> - <?php echo $queryFetched['question'];?></h5>
                        <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input1'];?>"><?php echo $queryFetched['input1'];?><br>
                        <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input2'];?>"><?php echo $queryFetched['input2'];?><br>
                        <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input3'];?>"><?php echo $queryFetched['input3'];?><br>
                        <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input4'];?>"><?php echo $queryFetched['input4'];?><br>
                        <br><hr>
                        <?php
                    }
                ?>

                //****** Change input type to 'button'
                <input type="button" id="submit" class="btn btn-sauces" value="sub" name="submit">
            </div>
        </div>
    </div>
</form>

和你scripts

<script>
    $(document).ready(function () {
        $('.myRadio').click(function () {
            var answer = $("input[name='name']:checked").val();
            //console.log(answer);

            $.ajax({
                type: 'post',
                url: 'answer.php',
                data: { question: answer },
                success: function () {
                  alert('Radio was submitted');
                }
          });

        });
    });
</script>

您的answer.php页面

<?php
    $name = $_POST['question'];
    echo $name;
    .
    .
    .
    .

或

如果通过FORM SUBMIT提交

您的form

<form method="post" action="answer.php">
    <div class="row">
        <div class="container">
            <div class="exam pull-left">
                <?php
                    while($queryFetched = $FetchedEdit->fetch_assoc()){?>
                        <h5><?php echo $queryFetched['id'];?> - <?php echo $queryFetched['question'];?></h5>
                        <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input1'];?>"><?php echo $queryFetched['input1'];?><br>
                        <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input2'];?>"><?php echo $queryFetched['input2'];?><br>
                        <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input3'];?>"><?php echo $queryFetched['input3'];?><br>
                        <input type="radio" class="myRadio" name="name<?php echo $queryFetched['id'];?>" value="<?php echo $queryFetched['input4'];?>"><?php echo $queryFetched['input4'];?><br>
                        <br><hr>
                        <?php
                    }
                ?>

                //****** Change input type to 'submit'
                <input type="submit" id="submit" class="btn btn-success" value="SUBMIT FORM" name="submit">
            </div>
        </div>
    </div>
</form>

您的answer.php页面

<?php
    if (isset($_POST['submit'])) {
        if(isset($_POST['name']))   //******* Radio name
        {
            echo "You have selected :".$_POST['name'];  //  Displaying Selected Value
        }
    }
    .
    .
    .
    .