Php 如何使用AJAX提交表单

我有一个测验网站。我想重新设计我的问题表单，通过AJAX提交用户给出的答案，在服务器上验证答案，并将结果与下一个答案一起显示给用户。 请指导我怎么做。我已经使用的代码是：

<?php

$a = $_REQUEST['ad'];
include("connection.php");
if (isset($_REQUEST['ad']))
{
if ($_REQUEST['ad'] == $a)
{

$q1 = "select * from question WHERE q_id= '$a' AND cat_id='General Knowledge'";
$rw = mysql_query($q1);
if ($row = mysql_fetch_assoc($rw))
{
if ($a % 10 == 0) {
    $qno = 10;
} else {
    $qno = substr($a, -1, 1);
}
?>
<b><?php echo "Q" . $qno . ". ";
    echo $row['q_desc']; ?></b><br/><br/>
<div class="quizimage">
    <img src="images/<?php echo $a; ?>.jpg" alt="General Knowledge Quiz"/>
</div>
<font class="common">
    <table align="center">
        <form action="general-knowledge.php?ad=<?php echo $a; ?>" method="post">
            <tr align="center">
                <input type="radio" name="ans"
                       value="<?php echo $row['ans1']; ?>"  <?php echo($_POST['ans'] == $row['ans1'] ? 'checked' : '') ?>/>
                <?php echo $row['ans1']; ?>
                <br/>
                <input type="radio" name="ans"
                       value="<?php echo $row['ans2']; ?>"  <?php echo($_POST['ans'] == $row['ans2'] ? 'checked' : '') ?>/>
                <?php echo $row['ans2']; ?><br/>
                <input type="radio" name="ans"
                       value="<?php echo $row['ans3']; ?>"  <?php echo($_POST['ans'] == $row['ans3'] ? 'checked' : '') ?>/>
                <?php echo $row['ans3']; ?><br/>
                <input type="radio" name="ans"
                       value="<?php echo $row['ans4']; ?>"  <?php echo($_POST['ans'] == $row['ans4'] ? 'checked' : '') ?>/>
                <?php echo $row['ans4']; ?><br/>
</font>
<tr>
    <td><input type=submit name=sub value=Submit_Answer></td>
</tr></form></table>
<table border="1" align="center">
    <div class="adunit3">
        <?php
        include "adunit3.php";
        ?>
    </div>
    <?php
    }
    $_SESSION['quiz_visited'] = $a;
    if (isset($_POST['sub'])) {
        $a_value = $a;
        $answer = $_POST['ans'];
        $q2 = "select * from question where q_id=$a_value";
        $r2 = mysql_query($q2);
        if ($row = mysql_fetch_array($r2))
            $trueans = $row['true_ans'];

        if ($answer == $trueans) {
            $score = $_SESSION['score'];
            $score = ++$score;
            $_SESSION['score'] = $score;
            ?>

            <div class="resultdisplay">
                Your answer is correct. <h3>General Knowledge Trivia</h3><?php echo $row['trivia']; ?> <br/>       <?php
                if ($a % 10 == 0) {
                    $a = ++$a;
                    ?>
                    <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> to view your result.</b>

                <?php
                } else {
                    $a = ++$a;
                    ?>
                    <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> for next question.</b>
                <?php
                }

                ?>
            </div>
        <?php
        } else {
            ?>
            <div class="resultdisplay">
                Your answer is wrong. The correct answer is <i>'<?php echo $trueans; ?>'</i>.
                <h3>General Knowledge Trivia</h3><?php echo $row['trivia']; ?> <br/>
                <?php $a = ++$a; ?>

                <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> for next question.</b>
            </div>
        <?php
        }
    }

    ++$a;
    $a = ++$a;

    }
    }

    ?>

</table>

.jpg“alt=”常识问答“/>
使用此javascript（Jquery代码提交表单）

作为回答（数据），您可以提供下一个问题的详细信息。
试试这样的方法

$("#form_id").submit(function() {
    $.ajax({
           type: "POST",
           url: this.action,
           data: $(this).serialize(), //Serialize a form to a query string.
           success: function(response){
               alert(response); //response from server.
           }
         });
    return false; // prevent form to submit.
});

参考

jQuery Ajax（）=>

序列化（）=>

jQuery提交（）=>

jquerypost=>

示例





您可以使用以下结构来实现这一点：

首先将
$ad
变量放入表单中的隐藏元素中

<input type="hidden" name="ad" value="<?php echo $a?>"/>

使用表单变量和问题id检查表单结果，并在服务器端返回结果

2-在head标记上加载jquery库，如下所示

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>



3-创建新的隐藏输入
你没有javascript代码，你需要使用jsI请求帮助获取JS代码我对JS非常缺乏经验，你能提供更多帮助吗这段代码像往常一样提交表单…为你当前的代码编辑的页面似乎这段代码将刷新页面..我想在没有引用的情况下这样做刷新页面。不刷新页面。它根据结果用ajax发送请求，决定是否继续下一个问题
$.ajax({
  type: "POST",
  url: 'general-knowledge.php',
  data: $(".common form").serialize(),
  success: function(data) {
    if (data.result == true) {
        alert("It is correct");
        window.location = "next_question.html"
    } else {
        alert("Incorrrect result");
    }
  }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<?php
mysql_connect('localhost', 'root', 'root');
mysql_select_db('test');

$a = filter_var($_POST['q_id'], FILTER_SANITIZE_NUMBER_INT);
$ans = filter_var($_POST['ans'], FILTER_SANITIZE_STRING);

$q1 = "select * from question WHERE q_id=" . $a;
$rw = mysql_query($q1);
$row = mysql_fetch_object($rw);
?>

<?php if ($ans == $row->true_ans): ?>
    <div class="resultdisplay">
        Your answer is correct. <h3>General Knowledge Trivia</h3><?php echo $row->trivia; ?> <br/>       <?php
        if ($a % 10 == 0) {
            $a = ++$a;
            ?>
            <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> to view your result.</b>

            <?php
        } else {
            $a = ++$a;
            ?>
            <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> for next question.</b>
            <?php
        }
        ?>
    </div>
<?php else: ?>
    <div class="resultdisplay">
        Your answer is wrong. The correct answer is <i>'<?php echo $row->true_ans; ?>'</i>.
        <h3>General Knowledge Trivia</h3><?php echo $row->trivia; ?> <br/>
        <?php $a = ++$a; ?>

        <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> for next question.</b>
    </div>
<?php endif;

        <script>
        $(document).ready(function() {
            $("#general-knowledge-form").submit(function(event) {
                var ans = $('input[name=ans]:checked').val();

                if (ans !== undefined) {
                    var q_id = $("#q_id").val();
                    $.ajax({
                        type: "POST",
                        url: "ajax.php",
                        data: {q_id: q_id, ans: ans}
                    })
                            .done(function(html) {
                                $("#resultdisplay").empty();
                                $("#resultdisplay").append(html);
                            });

                } else {
                    alert('Plz select your answer.');
                }

                event.preventDefault();
            });
        });
    </script>