嘗試在PHP中回顯輸入文本時出現未定義的索引錯誤？

Question

我試圖在輸入時回顯輸入字段的內容。 我在此處創建一個文本輸入字段：

echo '<form id="changePassForm" action="" method="post" enctype="multipart/form-data">
  <div class="changePass">
    <div class="changePassBtn">Change Password</div>
    <input class = "passwordText" type="password" placeholder="Password" name="passwordText">
  </div>';

該字段正確調用此javascript函數：

$(".passwordText").keydown(function(event){
    if(event.keyCode == 13){

    $.ajax({
        url: "../php/passwordchange.php", // Url to which the request is send
        type: "POST",             // Type of request to be send, called as method
        data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        datatype: 'text',
        contentType: false,       // The content type used when sending data to the server.
        cache: false,             // To unable request pages to be cached
        processData:false,        // To send DOMDocument or non processed data file it is set to false
        success: function(data)   // A function to be called if request succeeds
        {
            console.log(data);

        }});    
     console.log("WORKS!!");   
    }
});

此處引用密碼change.php：

<?php

session_start();
    echo "Hello world";

    $pass=$_POST['passwordText']; //name of input
    echo $pass;

/*$dbh = new PDO("mysql:host=localhost;dbname=sqlserver", 'username', 'password');
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $checkforpass = "SELECT password FROM sqlserver.accounts WHERE username='".$username."'";*/

?>

我不精通PHP，但是Hello world已輸出到控制台。 如何在$ pass中輸出/存儲文本字段的值？

Answer 1

嘗試如下

$(".passwordText").keydown(function(event){
    if(event.keyCode == 13){
      var postData = $('#changePassForm').serializeArray();
    $.ajax({
        url: "../php/passwordchange.php", // Url to which the request is send
        type: "POST",             // Type of request to be send, called as method
        data: postData, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        datatype: 'text',
        contentType: false,       // The content type used when sending data to the server.
        cache: false,             // To unable request pages to be cached
        processData:false,        // To send DOMDocument or non processed data file it is set to false
        success: function(data)   // A function to be called if request succeeds
        {
            console.log(data);

        }});    
     console.log("WORKS!!");   
    }
});

Answer 2

未經測試，袖套：

$(".passwordText").keydown(function(event){
    if(event.keyCode == 13){
      var pass = $('#changePassForm input').val();
    $.ajax({
        url: "../php/passwordchange.php", // Url to which the request is send
        type: "POST",             // Type of request to be send, called as method
        data: 'passwordText=' + pass, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        success: function(data)   // A function to be called if request succeeds
        {
            console.log(data);

        }});    
     console.log("WORKS!!");   
    }
});

---

還要注意，它是dataType:而不是datatype: ：，並且dataType僅影響返回的數據， 而不影響發送給PHP的數據

因此，首先使其簡單地工作（如上所述），然后再使用$('#changePassForm').serialize()等。

Answer 3

如果要使用FormData ，則可以從手冊中看到FormData對象構造函數采用一個可選的<form>元素，並且正在使用this ，它表示$(".passwordText") ，這是一個jQuery對象。 您可以通過以下方式傳遞表單元素：

var form = document.getElementById("changePassForm");
var fd = new FormData(form);

將所有這些放在一起，我們將得到：

$(document).ready(function() {
  $(".passwordText").keydown(function(event){
    if(event.keyCode == 13){
      event.preventDefault();
      var form = document.getElementById("changePassForm");
      var fd = new FormData(form);

      $.ajax({
        url: "../php/passwordchange.php", // Url to which the request is send
        type: "POST",             // Type of request to be send, called as method
        data: fd, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
        dataType: 'text',
        cache: false,             // To unable request pages to be cached
        processData:false,        // To send DOMDocument or non processed data file it is set to false
        success: function(data)   // A function to be called if request succeeds
        {
            console.log(data);

        }});    
       console.log("WORKS!!");   
    }
  });
});

或者，您可以手動將想要發送的任何值附加到ajax請求中，如下所示：

var fd = new FormData();
fd.append($(this).attr("name"), $(this).attr("value"));

---

免責聲明：

話雖如此，FormData接口僅在IE> = 10中可用，因此如果您擔心跨瀏覽器的兼容性，則可能需要考慮簡單地使用jQuery的serialize（）方法發送data 。 另外，它只有1行代碼。

data: $("#changePassForm").serialize()