使用jQuery，PHP，AJAX和MySQL存儲和檢索數據

Question

我是編程新手。 我在HTML，CSS和jQuery方面已經變得相當不錯，但是我可能不小心涉足了這個項目。 在我回過頭來以正確的方式學習服務器端編程之前，我決心讓此頁面正常工作。

我設置了一個HTML頁面，該頁面接受四個輸入（firstName，lastName，grade和PR），我希望將這些輸入保存到下表中（我正在使用引導程序，不確定是否會影響任何內容）。 這是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將輸入發送到名為“ runnerdata”的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

您應該運行查詢來存儲數據。

mysql_query($sql);

Answer 2

我在這里看不到任何不正常的東西，但是我懷疑在某些html部分或URL上的錯誤引用？

嘗試將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 個解決方案

解決方案1
2 2015-04-26 21:35:48

解決方案2
0 2015-04-26 21:29:19

解決方案3
0 已采納 2015-04-26 21:31:30

使用jQuery，PHP，AJAX和MySQL存儲和檢索數據

問題描述

3 個解決方案

解決方案1 2 2015-04-26 21:35:48

解決方案2 0 2015-04-26 21:29:19

解決方案3 0 已采納 2015-04-26 21:31:30

解決方案1
2 2015-04-26 21:35:48

解決方案2
0 2015-04-26 21:29:19

解決方案3
0 已采納 2015-04-26 21:31:30