在 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">×</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/