2017-05-09 14 views
0

送信時に取得しない入力フィールドの値を指定して、メソッドの投稿フォームを送信していました。私がJqueryでAjaxを呼び出すと、フォームの値がシリアル化されて正しく送信されますが、javascriptではFormDataを使用してAjaxの呼び出しがエラーになります。ajaxでフォームを送信中にエラーが発生しました

誰でも問題を解決できますか?

エラー:

  1. Error: Can't set headers after they are sent. at ServerResponse.OutgoingMessage.setHeader (_http_outgoing.js:356:11)

  2. apollo.model.save.unsetkey: Primary Key Field: name must have a value

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
<form id="myForm" method="post" action=""> 
    <div> 
     <label for="name">Enter name:</label> 
     <input type="text" id="name" name="name"> 
    </div> 
    <div> 
     <label for="surname">SurName:</label> 
     <input type="text" id="surname" name="surname"> 
    </div> 
    <div> 
     <label for="age">Age:</label> 
     <input type="text" id="age" name="age"> 
    </div> 
    <input type="submit" value="Submit!" onclick="loadForm()"> 
</form> 
<p id="demo"></p> 

<script> 
    function loadForm() { 
     var xhttp = new XMLHttpRequest(); 
     var myForm = document.getElementById('myForm'); 
     var formData = new FormData(myForm); 

     xhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       document.getElementById("demo").innerHTML = 
         this.responseText; 
      } 
     }; 
     xhttp.open("POST", "http://127.0.0.1:8080/user", true); 
     xhttp.setRequestHeader('Accept', 'application/json'); 
     xhttp.setRequestHeader('Content-Type', 'application/json'); 
     var data = JSON.stringify(formData); 
     console.log('data = ', data); 
     xhttp.send(data); 
    } 
</script> 
</body> 
</html> 
+1

あなたは、万が一、あなたのページを更新できますか? –

+0

私達にエラーを表示できますか? – Thierry

答えて

1

フォームのデフォルトの提出を停止しないので、誰かがフォームがアヤックスを使用して、通常と同様に提出する送信ボタンをクリックしたとき。解決策は、リスナーをフォーム送信にバインドして、デフォルトの動作を防止することです。

はこれを試してみてください:

document.querySelector("#myForm").addEventListener("submit", function (event) { 
    event.preventDefault(); 
    // ... Ajax call here ... 
}) 
+0

エラー名に値が必要ですが、入力フィールドに値を与えました。私はFormDataが正しく与えられたと伝えられますか? – user306128

関連する問題