JQuery并使用POST使用AJAX调用PHP

时间:2013-05-17 15:30:20

标签: php jquery ajax

我正在尝试为我的物理课程制作期末考试复习指南,但我希望能够在文本文件日志中查看我(以及其他人)之前的分数。我所拥有的是一个名为“scorelog.txt”的预制文本文件,我的javascript文件名为“phpjs.js”,HTML文件名为“physics-with-php.hmtl”,我的PHP文件名为“submitlog.php” ”。我的问题是: 当我最后一次按下我的html中的“下一步”按钮时,它会给出警告框,但似乎它没有向PHP发送数据它可能是PHP不是写入文本文件。我很确定它不是后者,因为我已经一次又一次检查了我的PHP。

的Javascript

$(window).load(function() {
    $(document).ready(function() {
        var totalQuestions = $('.questions').size();
        var currentQuestion = 0;
        $questions = $('.questions');
        $submitBtn = $('.subBtn');
        $questions.hide();
        $submitBtn.hide();
        $($questions.get(currentQuestion)).fadeIn();
        $('#next').click(function() {
            $($questions.get(currentQuestion)).fadeOut(function() {
                currentQuestion = currentQuestion + 1;
                if (currentQuestion == totalQuestions) {
                    var score = 0;
                    score = parseInt($("input:radio[name='1']:checked").val()) + parseInt($("input:radio[name='2']:checked").val()) + parseInt($("input:radio[name='3']:checked").val()) + parseInt($("input:radio[name='4']:checked").val()) + parseInt($("input:radio[name='5']:checked").val());
                    alert("Your score: " + score + " / 5");
                    var fullname = $('$.FullName').val();
                    $.ajax({
                        type: "POST",
                        url: "submitlog.php",
                        data: {"finalscore: score, name: fullname"},
                        success: function(data) {
                            alert("Your score of " + data + " has been logged");
                        }
                    });
                } else {
                    $($questions.get(currentQuestion)).fadeIn();
                }
            });

        });

    });
});

HTML

<html>
    <head>
        <title>Cumulative Practice</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js"></script>
        <script type='text/javascript' src='phpjs.js'></script>
    </head>
    <body>
        <div>
            <h1>Cumulative Test</h1>
            Full Name: <input type="text" id="FullName" name="Fullname" class="FullName"/>
            <p class="instructions">
                Select the best answer for each question, then press next.
            </p>
        </div>
        <div class="questions">
            <p>1. Two vertical walls are separated by a distance of 1.5 m, as the
                drawing shows. Wall 1 is smooth, while wall 2 is not smooth. A uniform
                board is propped between them. The coefficient of static friction
                between the board and wall 2 is 0.98. What is the length of the longest
                board that can be propped between the walls?</p>
            <form class="options">
                <input class="option" type="radio" name="1" value=0> 43 meters<br>
                <input class="option" type="radio" name="1" value=1> 67 meters<br>
                <input class="option" type="radio" name="1" value=0> 63.5 meters<br>
                <input class="option" type="radio" name="1" value=0> 57 meters<br>
            </form>
        </div>
        <div class="questions">
            <p>2.  Two submarines are under water and approaching each
                other head-on. Sub A has a speed of 12 m/s and sub B has a speed
                of 8 m/s. Sub A sends out a 1550-Hz sonar wave that travels at a
                speed of 1522 m/s. What is the frequency detected by sub B?</p>
            <form class="options">
                <input class="option" type="radio" name="2" value=0> 1495 Hz<br>
                <input class="option" type="radio" name="2" value=0> 1625 Hz<br>
                <input class="option" type="radio" name="2" value=1> 1570 Hz<br>
                <input class="option" type="radio" name="2" value=0> 1590 Hz<br>
            </form>
        </div>
        <div class="questions">
            <p>3. Two converging lenses are separated by 24.00 cm. The focal
                length of each lens is 12.00 cm. An object is placed 36.00 cm to the
                left of the lens that is on the left. Determine the final image distance
                relative to the lens on the right. Hint: Try drawing a ray diagram.</p>
            <form class="options">
                <input class="option" type="radio" name="3" value=0> 12 cm<br>
                <input class="option" type="radio" name="3" value=0> -10 cm<br>
                <input class="option" type="radio" name="3" value=0> 13 cm<br>
                <input class="option" type="radio" name="3" value=0> -24 cm<br>
                <input class="option" type="radio" name="3" value=1> -12 cm<br>
            </form>
        </div>
        <div class="questions">
            <p>4. A mirror produces an image that is located 34.0 cm behind the
                mirror when the object is located 7.50 cm in front of the mirror. What
                is the focal length of the mirror, and is the mirror concave or convex? </p>
            <form class="options">
                <input class="option" type="radio" name="4" value=0> 9.62 cm; Concave<br>
                <input class="option" type="radio" name="4" value=1> 9.62 cm; Convex<br>
                <input class="option" type="radio" name="4" value=0> 0.104 cm; Concave<br>
                <input class="option" type="radio" name="4" value=0> 8.104 cm; Convex<br>
            </form>
        </div>
        <div class="questions">
            <p>5. An object is located 14.0 cm in front of a convex mirror, the
                image being 7.00 cm behind the mirror. A second object, twice as tall
                as the first one, is placed in front of the mirror, but at a different location.
                The image of this second object has the same height as the other
                image. How far in front of the mirror is the second object located?</p>
            <form class="options">
                <input class="option" type="radio" name="5" value=0> 21 cm<br>
                <input class="option" type="radio" name="5" value=0> 28 cm<br>
                <input class="option" type="radio" name="5" value=1> 42 cm<br>
                <input class="option" type="radio" name="5" value=0> 7 cm<br>
            </form>
        </div>
        <br>
        <input type="button" id='next' value="Next" />
    </body>
</html>

PHP

<?php
$logfile = "scorelog.txt";
$fh = fopen($logfile, 'a') or die("can't open file");
$score = $_POST['finalscore'];
$fullname = $_POST['name'];
$stringdata = "$fullname scored $score points\n";
fwrite($fh, $stringdata);
fclose($fh);
?>

提前致谢。

2 个答案:

答案 0 :(得分:5)

您的data参数看起来很糟糕:

data: {"finalscore: score, name: fullname"},

应该是:

data: { "finalscore": score, "name": fullname },

data必须是一个关键值对。

您的PHP脚本可能也不是非常健壮,如果输入它不期望的抛出错误。它有点高级但你希望你的脚本表现得那样。验证您的输入并提前崩溃将为您节省大量时间从长远来看:)然后您不必说像“我认为这很好”之类的东西,因为您将知道

答案 1 :(得分:0)

您的数据参数应如下所示

data: {finalscore: score, name: fullname},