个人中心
gpt4 book ai didi

javascript - 无法弄清楚为什么 javascript 在我的 php 文件中不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 08:23:36 27 4
gpt4 key购买 nike

在 github 上找到了这个 GPA 计算器的代码，但无法让它运行。外观显示正确，但它不会计算 GPA，并且添加/删除行按钮不起作用。这是 github 上文件的链接。 https://github.com/xandroxygen/GPACalc 

<?php

    $GRADELIST = array(
        "A+"=>"4.0",
        "A"=>"4.0",
        "A-"=>"3.7",
        "B+"=>"3.4",
        "B"=>"3.0",
        "B-"=>"2.7",
        "C+"=>"2.4",
        "C"=>"2.0",
        "C-+"=>"1.7",
        "D+"=>"1.4",
        "D"=>"1.0",
        "D-"=>"0.7",
        "E"=>"0.0",
    );

    // check input
    function validate_input($data)
    {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }

    // convert grades to points per hour
    // returns -1 if grade not recognized
    function grade_convert($g)
    {   
        global $GRADELIST;
        $p = -1.0;
        if (array_key_exists($g,$GRADELIST))
        {
            $p = $GRADELIST[$g];
        }
        return $p;
    }

    // import JSON string
    $json_data=array();
    $raw_data = file_get_contents('php://input');
    parse_str($raw_data,$json_data);

    // parse form input
    $name = "";
    $points =  $hours = $gpa = 0.0;

    $name = validate_input($json_data["name"]);
    $points = validate_input($json_data["points"]);
    $hours = validate_input($json_data["hours"]);
    $classes = $json_data[0]["classes"];

    // add classes in
    foreach($classes as $c)
    {
        $c_pts_per_hour = grade_convert($c[grade]);
        if ($c_pts_per_hour > -1) // else, invalid grade (lowercase, P, IE, W, etc)
        {   
            // find grade points, multiply by class hours, add to total hours 
            $c_pts = $c_pts_per_hour * $c[hours]; 
            $points += $c_pts;
            $hours += $c[hours];
        }
    }

    // calculate and output GPA
        if (is_numeric($hours) && ($hours > 0))
        {
            $gpa = $points / $hours;
        }
    echo $name . ", your GPA is " . number_format($gpa,2) . ", and you have earned " . $hours . " total hours.";
?>

split 

<!DOCTYPE html>
<html>
<body>
<style>
    .error {color: #FF0000;}
    .input-group-btn {padding-bottom: 10px;}
    h5 {width: 50%;}
</style>
<head>
    <title>GPA Calculator</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Functions for processing and calculating gpa -->
    <script type="text/javascript" src="../Sandbox_4_App/script.js"></script>
</head>

<div class="container">
    <div class="jumbotron">
        <h1>GPA Calculator</h1>
        <p>Use your current points and hours, class enrollment, and projected grades to calculate your GPA!</p>
        <h5>I built this the first week of my current job to teach myself basic principles of web design, like client-side scripting, PHP form handling, and AJAX calls.</h5>
    </div>
</div>

<!-- Current GPA container -->
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">Calculate GPA</div>
        <div class="panel-body">

            <!-- Form for Name/Points/Hours -->
            <form role="form" action="">
                <div class="row">
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label for="name">Name: <span id="nameREQ"><small>(required)</small></span><span id="nameERR" class="error">This field is required!</span></label> 
                            <input type="text" class="form-control" id="name" name="name">
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label for="curr_points">Current Points: 
                                <a data-toggle="tooltip" title="Points and hours are found on your transcript"><span class="glyphicon glyphicon-info-sign"></span></a>
                            </label>
                            <input type="text" class="form-control" id="curr_points" name="curr_points">
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label for="curr_hours">Current Hours: 
                                <a data-toggle="tooltip" title="Points and hours are found on your transcript"><span class="glyphicon glyphicon-info-sign"></span></a>
                            </label>
                            <input type="text" class="form-control" id="curr_hours" name="curr_hours"><br>
                        </div>
                    </div>
                </div>
            <!-- Table for Class/Grade/Hours -->
                <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
                    <tr >
                        <th class="text-center">
                            #
                        </th>
                        <th class="text-center">
                            Class
                        </th>
                        <th class="text-center">
                            Grade
                        </th>
                        <th class="text-center">
                            Hours
                        </th>
                    </tr>
                </thead>
                <tbody id="classes_list">
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                        <input type="text" name='class0'  placeholder='Class' class="class form-control"/>
                        </td>
                        <td>
                        <input type="text" name='grade0' placeholder='Grade' class="grade form-control"/>
                        </td>
                        <td>
                        <input type="text" name='hours0' placeholder='Hours' class="hours form-control"/>
                        </td>

                    </tr>
                </tbody>
                </table>

            <!-- Add/Delete/Submit Buttons -->
                <div class="input-group-btn">
                   <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
                </div>
                <input type="submit" class="btn btn-primary" id="submit" name="submit_form">
            </form>
        </div>
    </div>       
    <div id="showGPA" class="alert alert-success">
        <a  class="close" aria-label="close">&times;</a>
        <p><span id="result"></span></p>
    </div>
</div>


</body>
</html>

split 

// --- main jQuery function ---
$(function() {
    $(".alert.alert-success").hide();
    $(".error").hide();

    // --- submit a form ---

    $(".btn.btn-primary").click(function(e) {
        e.preventDefault();
        $(".error").hide();
        $("#nameREQ").show();

        // validate name, gather input
        var name = $("input#name").val();
        if (name == "")
        {
            $("#nameREQ").hide();
            $(".error").show();
            return false;
        }
        var points = $("input#curr_points").val();
        var hours = $("input#curr_hours").val();

        // process form
        var formData = "name=" + name + "&points=" + points + "&hours=" + hours;
        $.post("getGPA.php", formData, function(data) {
                $("#showGPA").show();
                $("#result").text(data);
            });
    });

    // --- close the alert box and ready for new submit ---

    $(".close").click(function() {
        $(".alert.alert-success").hide();
    });

    // --- enable tooltips
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
});

这是我在进行一些更改后更新的代码。计算 gpa 部分仍然不起作用，添加/删除行也不起作用，因为我认为那部分代码丢失了。我不确定如何让添加/删除行代码正常工作。

最佳答案

在您的 javascript 中，我没有看到任何将操作绑定(bind)到您的添加/删除行按钮的内容。这可能就是他们什么都不做的原因。

您将表单数据提交到 PHP 脚本的代码很好，但最好只发送一个对象而不是自己构建请求主体，因为您目前没有转义任何值。因此，如果名称包含 & 或 / 或任何其他字符，则请求正文将无效:

var formData = {
    "name": name,
    "points": points,
    "hours": hours
};

// just send an object, let jQuery deal with escaping it
$.post("getGPA.php", formData, function(data) {
    $("#showGPA").show();
    $("#result").text(data);
});

在 PHP 方面，您正在访问原始输入。那是完全没有必要的。您正在执行常规 POST 请求并发送正确的值，因此您可以简单地从 $_POST 获取值。您绝对不会向服务器发送 JSON，因此调用 json_decode() 没有意义。

// import JSON string
// $raw_data = file_get_contents('php://input');
// $json_data = json_decode($raw_data, true);
// remove those lines, they don't do anything useful.

// parse form input
$name = "";
$points =  $hours = $gpa = 0.0;

$name = validate_input($_POST["name"]);
// note: you're sending "name" to the server, not "person_name"

$points = validate_input($_POST["points"]);
$hours = validate_input($_POST["hours"]);
$classes = $_POST["classes"];

我不知道 "classes" 是从哪里来的，因为您没有向服务器发送任何类。

关于javascript - 无法弄清楚为什么 javascript 在我的 php 文件中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45358211/

27 4 0
文章推荐： php - CSS 样式的 Id 变量
文章推荐： java - 如何在不支持 Java 7 的情况下将 Java Web Start 限制为 Java 6
文章推荐： java - 如何在 hibernate 映射中添加另一个搜索参数？
文章推荐： python - Django 和单位转换
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com