任何人都知道爲什麼我得到一個PHP定義的索引錯誤？

Question

所以，我是使用PHP的新手，但想要將用戶輸入到此表單中的任何內容添加到數據庫中。

但是，我得到名稱，角色和工資的每個索引的錯誤。它似乎沒有選擇那個。

HTML：

<form id="input" name="input" action="employees.php" method="post"> 
    <div id="boxes"> 
     <input type="text" name="name" placeholder="Input" class="name" required><br/> 
     <input type="text" name="role" placeholder="Role" class="role" required><br/> 
     <input type="number" step="any" name="wage" placeholder="Wage" class="wage" required> 
     <br /> 
     <br /> 
    </div> 
    <button type="submit" onsubmit="return ajaxFunction()" class="button">Submit</button> 
    <button type="reset" class="button">Reset</button>    
</form> 

PHP：

<?php 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "employees"; 

$conn = new mysqli($servername, $username, $password, $dbname); 

if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 
echo "Connected successfully<br/>"; 

$name2 = $_POST['name']; 
$role2 = $_POST['role']; 
$wage2 = $_POST['wage']; 

if (mysql_query("INSERT INTO employees VALUES ('$name2', '$role2', '$wage2')")) 
    echo "Successfully inserted"; 
else 
    echo "Insertion failed"; 

$conn->close(); 

?> 

我也有一些JavaScript設置捕捉到每一個字段的值，並把它們發送到PHP文件。我可能做一些非常錯誤的......但無論如何，這裏的JS：

function ajaxFunction() { 
    var name = $('.name').val(); 
    var role = $('.role').val(); 
    var wage = $('.wage').val(); 
    var dataString = '&name1' + name + '&role1' + role + '&wage1' + wage; 
    $.post('employees.php', {name1:name, role1:role, wage1:wage}, function(data){ 
     $('#main').html(data); 
    }); 

    if (name == '' || role == '' || wage == '') { 
     alert("Please fill in all fields."); 
    } else { 
     $.ajax({ 
      type: "POST", 
      url: "employees.php", 
      data: dataString, 
      cache: false, 
      success: function(html) { 
       alert(html); 
      } 
     }); 
    } 

    return false; 
} 

Answer 1

在你的Ajax dataString是

var dataString = '&name1' + name + '&role1' + role + '&wage1' + wage; 

但在你的PHP

$name2 = $_POST['name']; 
$role2 = $_POST['role']; 
$wage2 = $_POST['wage']; 

應該是

$name2 = $_POST['name1']; 
$role2 = $_POST['role1']; 
$wage2 = $_POST['wage1']; 

Answer 2

未定義的er ror意味着你的數據沒有找到，這是因爲你的php正在尋找一個「name」的POST索引，而javascript正在發送「name1」。

在這裏可以大大提高設置的幾個問題。

首先onsubmit需要移動到窗體標籤。

<form onsubmit="return isFormValid()" id="input" name="input" action="employees.php" method="post"> 

其次，你實際上並不需要真正讓從Javascript Ajax請求，因爲在提交回報說，如果js函數的返回值是真實的提交表單，否則沒有。因此，我們只需要基於表單驗證返回true或false。

這裏是更新的JS函數。

function isFormValid(){ 
    var name = $('.name').val(), 
     role = $('.role').val(), 
     wage = $('.wage').val(), 
     data = [name, role, wage], 
     isValid = true; 

    data.forEach(function(el){ 
    if(isValid && !el.trim()){ 
     alert("Please fill in all fields."); 
     isValid = false; 
    } 
    }); 

    return isValid; 
} 

還有一些關於MySQL注入的安全問題，從表單數據如何輸入數據庫而不被轉義。

一個快速解決方案是添加一個基本的PHP方法來在命中數據庫之前轉義字符串。

// add at the top of your php file 
function escape($value){ 
    return mysql_real_escape_string($value); 
} 

// then update your variables 
$name2 = escape($_POST['name']); 
$role2 = escape($_POST['role']); 
$wage2 = escape($_POST['wage']); 

你可以閱讀更多關於MySQL注入和如何防止它在這裏： http://php.net/manual/en/function.mysql-real-escape-string.php

編輯---------------------- -----

我簡化了JS並刪除了您遇到的令牌問題。如果添加更多的輸入字段，您可以簡單地添加一個新變量來存儲它的值，並將該變量名稱添加到數據數組中。

我也更新了JS和html中的函數名，因爲它與任務的目的更相關。

這裏是一個工作示例： http://codepen.io/davidbattersby/pen/LVabQe

明顯PHP文件不存在，因此將指向一個空白頁，如果提交通過驗證，它會提醒，如果無效，不發送。