2017-07-27 45 views
0

在github上找到了这个GPA calc的代码,并且无法使它工作。外观正确显示,但不会计算GPA,添加/删除行按钮不起作用。这里是链接到github上的文件。 https://github.com/xandroxygen/GPACalc找不到为什么javascript不能在我的php文件中工作

<?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."; 
?> 

拆分

<!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> 

拆分

// --- 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部分仍然不起作用,并且添加/删除行不起作用,因为我认为代码段缺失。我不知道如何获得添加/删除行代码的工作。

+1

你得到任何错误? –

+0

@RAUSHANKUMAR它不会给我任何错误,引导工作正常,但任何功能都不起作用。添加/删除行将不起作用,并且当我尝试计算GPA时,它仅表示0.0。我以为我正确地调用JavaScript文件,但功能似乎不工作。我也不确定如何从index.php文件调用php文件。 –

+0

@BradleyNewman我看到两个错误 - 第一个$ raw_data = file_get_contents('php:// input'); $ json_data = json_decode($ raw_data,true); - > $ raw_data不是json。 Sec - validate_input($ json_data [0] [“person_name”]); - >你发送的名字不是person_name – Matx132

回答

1

在你的javascript中,我没有看到任何绑定到添加/删除行按钮的动作。这可能是他们为什么不做任何事情的原因。

将表单数据提交给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"是从哪里来的,因为你不发送任何类服务器。

+0

我做了您所建议的更改,但仍然无法正常工作。我相信这可能是因为我没有在原始文件中调用PHP代码?我应该只是粘贴在index.php文件的正文中的某个地方的PHP? –

+0

不,这不应该是必要的。你的浏览器的控制台告诉你什么?你得到的JavaScript错误? – rickdenhaan

+0

我正在使用Dreamweaver尝试将其更新到网站。 Dreamweaver告诉我的唯一错误是位于script.js文件中,它表示在第3行和预期的===上缺少使用strict语句,而是在第15行上看到== –

0

我觉得你必须分析乌尔后数据,试试这个

// 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"]; 
+0

这实际上比其他解决方案更有效,但它只有名称字段才能起作用。做完你建议的更改后,其他字段仍未被计算。这是一个JavaScript错误? –

+0

@BradleyNewman有你连接你的索引,脚本和PHP文件在一起,bcaz我没有看到它在你的github存储库文件,他们是互不相连的。我也无法得到什么是$ class = $ json_data [0] [“类”]的立场,如果你描述我可以更轻松地帮助你,也可以更新你的github文件,如果可能的话用新的文件 –

+0

我编辑过原帖以反映当前文件。 –

相关问题