無法接收js數組發佈與ajax

我想發送表單數據和js數組到mysql數據庫。我有接收js數組到我的PHP的問題。我從窗體接收數據，但不是數組。我找不到問題。無法接收js數組發佈與ajax

的index.php

<!doctype html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><!--bootstrap--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><!--jquery--> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><!--angular js--> 
<script type="text/javascript" src="assets/js/main.js"></script> 

</head> 
<body> 
<form method="post" action="upload.php"> 
<!--dynamic form created from javascript--> 
<input id="submit" type="submit" value="Upload" name="submit" onclick="upload()"/> 
</form> 
</body> 
</html>

的JavaScript - main.js

var objArray = []; //Array of questions 

function upload(){ 
      var jsonArray = JSON.stringify(objArray); 

      $.ajax({ 
       type:'post', 
       url: 'upload.php', 
       data: { jsonData : jsonArray}, 
       success: function(data){ 
        console.log("success!"); 
       } 
      }); 

    } else { 
     console.log("no data javascript!"); 
    } 
}

upload.php的

<?php 

if(($_SERVER['REQUEST_METHOD'] == "POST") && (isset($_POST['submit']))){ 

    $servername = "......"; 
    $username = "......"; 
    $password = "......"; 
    $dbname = "....."; 

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

    // Check connection 
    if ($conn->connect_error) { 
     die("Connection failed: " . $conn->connect_error); 
    } 

    if(!empty($_POST['jsonData'])){ 
     $json = $_POST['jsonData']; 
     var_dump(json_decode($json, true)); 
     echo "<script type=\"text/javascript\"> 
       console.log('received data'); 
     </script>"; 
    } else { 
     echo "data not received"; 
    } 

    $conn->close(); 

}else {echo "unsecure connection";} 
?>

objArray看起來是這樣的：

[{"questionId":1,"questionTypeObj":"single","options":3},{"questionId":2,"questionTypeObj":"single","options":3}]

所

upload.php的輸出的「數據沒有收到」

當你點擊按鈕的代碼

來源

2016-11-15 Bhups

請忽略main.js中的「else」語句。 – Bhups

您是否嘗試過'print_r（$ _ POST）'？而且你不應該提交你的表單！您應該決定是否使用ajax，或者將其作爲通常的郵寄表單提交。既然你使用了ajax（whats實際用於防止重新編碼頁面），你應該從你的update.php中獲得一個回調函數的結果數據。類似'$ .ajax（...）。complete（function（response）{...}）'但要小心，您可能需要異步調用您的ajax函數。取決於你在做什麼。 – Dwza

你的輸出指示的問題是什麼：你得到的部分，你回聲data not received但你不能發送submit鍵：$_POST['submit']通過Ajax調用時未設置。

所以你提交表單是「正常」的方式，而不是通過ajax。

這是由於您沒有取消您的按鈕的默認submit操作。

來解決（在我看來......），最好的方法是去除內聯JavaScript - 單擊處理 - 與您的替換功能：

$("form").on('submit', function(e) { 
    // Cancel the default form submit 
    e.preventDefault(); 

    // The rest of your function 
    var jsonArray = JSON.stringify(objArray); 
    ... 
});

注意，我抓住形式提交活動。您也可以使用按鈕單擊事件替換它，但當訪問者在表單字段中使用Enter鍵時可能無法正常工作。

來源

2016-11-15 20:51:38 jeroen

我按照你說的完成了，但現在我無法加載php頁面。 – Bhups

@Bhups你是否刪除了'isset（$ _ POST ['submit']）'check？如果沒有，你會最終進入'不安全的連接'部分。 – jeroen

@Bhups另外請注意，你的php腳本的輸出將在'data'變量的'success'函數中可用，並且你還沒有使用它。 – jeroen

將發送2個請求到服務器

首先請求阿賈克斯

這個Ajax請求有你需要jsonData : jsonArray參數和之後，你會再次提出請求

第二請求提交表單

和形式沒有jsonData : jsonArray放慢參數與它

送你不需要這個AJAX了！

所有你需要做的，收到jsonData : jsonArray放慢參數是與形式

例如一起發送：

改變你的表格是這樣

<form method="post" action="upload.php"> 
<input id="jsonData" type="hidden" name="jsonData" value=""> 
<input id="submit" type="submit" value="Upload" name="submit" onclick="upload()"/> 
</form>

，改變你按鈕功能是這樣的

function upload(){ 
    var jsonArray = JSON.stringify(objArray); 
    $('input#jsonData')[0].value=jsonArray ; 
}

編輯：

或者，如果你想upload.php的處理Ajax請求，而不是響應與整個文檔，那麼你並不需要的形式，從你的HTML中刪除的形式，只是添加submit:Upload到Ajax請求

data: { jsonData : jsonArray, submit:"Upload" }

來源

2016-11-15 20:51:24

你不應該這樣做。無法保證在重定向之前JavaScript將執行。事實上，它運行速度不夠快，只會重定向到下一頁。嘗試

<form method="post" action="upload();">

這將獲得數據到頁面，但不會顯示它。如果你想顯示你應該有表單提交它。如果你用ajax發佈，你也可以嘗試用jquery來捕獲響應。

來源

2016-11-15 20:54:17

無法接收js數組發佈與ajax

回答

相關問題