Question

我是编程新手。我已经在HTML，CSS和jQuery方面做得很好，但我可能不小心对这个项目深入了解。在我回去以正确的方式了解服务器端编程之前，我决定让这个页面起作用。

我有一个HTML页面设置，需要四个输入（firstName，lastName，grade和PR），我希望这些输入保存到下面的表格中（我使用bootstrap，不确定是否会影响任何东西）。这是HTML：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <h1 style="text-align:center">1600M Run - PR Sheet</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <form style="text-align: center;">
                First name: <input type="text" id="firstName"></input>
                Last name: <input type="text" id="lastName"></input>
                Grade: <input type="text" id="grade"></input>
                1600M PR: <input type="text" id="PR"></input>
                <input type="submit" value="Enter" id="enterInfo"></input>
            </form>
        </div>
    </div>
</div>
<table class="table">
    <thead>
        <tr>
            <td><strong>First Name</strong></td>
            <td><strong>Last Name</strong></td>
            <td><strong>Grade</strong></td>
            <td><strong>PR</strong></td>
        </tr>
    </thead>
    <tbody id="runnerInfo">
        <tr>
            <td>Brady</td>
            <td>Sheridan</td>
            <td>12</td>
            <td>4:42</td>
        </tr>
    </tbody>
</table>

我使用jQuery + AJAX和PHP将输入发送到名为＆＃34; runnerdata＆＃34;的MySQL数据库，然后将输入记录到表中。这是javascript：

$(function(){
$('#enterInfo').click(function (){

    var firstName = $('#firstName').val();
    var lastName = $('#lastName').val();
    var grade = $('#grade').val();
    var PR = $('#PR').val();

    $.ajax({
        url: 'prentry.php',
        type: 'post',
        datatype: 'json',
        data: {'firstName': firstName, 'lastName': lastName, 'grade': grade, 'PR': PR},
        success: function(data){
            var firstName = data[0];
            var lastName = data[1];
            var grade = data[2];
            var PR = data[3];

            $('#runnerInfo').append("<tr><td>"+firstName+"</td><td>"+lastName+"</td><td>"+grade+"</td><td>"+PR+"</td></tr>");  
        };
    });

});
});

这是PHP：

<?php

    //Connect to database
    $host = "localhost";
    $user = "root";
    $pass = "root";
    $databaseName = "prentry";
    $tableName = "runnerdata";

    $con = mysql_connect($host,$user,$pass);
    $dbs = mysql_select_db($databaseName, $con);

    //Retrieve input from jQuery
    var $fname = $_POST['firstName']
    var $lname = $_POST['lastName']
    var $grade = $_POST['grade']
    var $PR = $_POST['PR']

    //Store input in database
    $sql = "INSERT INTO runnerdata (firstName, lastName, grade, PR)
    VALUES ($fname, $lname, $grade, $PR)";

    //Return data
    $result = mysql_query("SELECT * FROM $tableName");
    $array = mysql_fetch_row($result);

    echo json_encode($array);

?>

当我测试页面时，没有任何反应。当我检查我的数据库时，它也没有更新。我毫不怀疑我做了一件非常糟糕的事情，这个项目的服务器端部分只是6个不同教程的集合体。我确信的一件事是我在<head></head>标签中链接了所有正确的库。

感谢任何帮助，我真的很想继续这个项目！

Answer 1

您应该运行查询来存储data.use -

mysql_query($sql);

Answer 2

我没有看到任何不合适的东西，但我会怀疑某些HTML部分或者网址上的错误引用？

尝试将php文件的路径改为绝对路径，
尝试将文字'post'更改为'POST'
尝试打开开发人员或Google Chrome控制台，查找javascript红色错误，之后将其发布在此处

Answer 3

这是什么

//Retrieve input from jQuery
    var $fname = $_POST['firstName']
    var $lname = $_POST['lastName']
    var $grade = $_POST['grade']
    var $PR = $_POST['PR']

应该是

//Retrieve input from jQuery
    $fname = $_POST['firstName'];
    $lname = $_POST['lastName'];
    $grade = $_POST['grade'];
    $PR = $_POST['PR'];

和

//Store input in database
    $sql = "INSERT INTO runnerdata (firstName, lastName, grade, PR)
    VALUES ($fname, $lname, $grade, $PR)";

应该是字符串引用而不是整数

//Store input in database
        $sql = "INSERT INTO runnerdata (firstName, lastName, grade, PR)
        VALUES ('$fname', '$lname', $grade, $PR)";

当您尝试使用ajax提交表单时，请为表单提供CLASS或ID 并在js

$('#my_form').on('submit',function(){
  // your code here
});

如果你想在发送到php之前检查js中的变量

$('#my_form').on('submit',function(e){
      e.preventDeafault();
      // your code here
      return false;
    });

并在你的ajax成功使用

window.location.href = 'url';

在ajax完成后重定向用户

使用jQuery，PHP，AJAX和MySQL存储和检索数据

3 个答案: