2016-11-15 13 views
7

まず最初に、私は同じタイトルで多くの質問があることを知っています。私はたくさんのものを見ましたが、これまでのところ何も私のために働いていません。それは私がこの質問を開いた理由です。HTMLフォームデータをJSONとしてサーバーに送信する方法は?

私は基本的に2つのシナリオを持っています 1)html形式で "アクション"と "メソッド"を定義しています。 2)HTML形式の "action"と "method"なし。だからここ

は、私はちょうど2つの分野、すなわちメールアドレスとパスワードを使用してフォームを持っている

1)、最初のシナリオです。ここ

は私がフォームを送信する際snippit

<form id="login-form" action="http://192.168.52.166:6000/api/2/users/login/" method="post"> 

<p><label for="email">Email</label> 
<input type="email" name="email" id="email"></p> 

<p><label for="password">Password</label> 
<input type="password" name="password" id="password"></p> 

<button value="Submit" type="submit">Login</button> 
</form> 

はまず、それがエンコードされたURLとすべての私のフィールドの値を送信します。フォームのデフォルトのコンテンツタイプはURLエンコードされています。そんなこと知ってる。だから今私がやったことは、jsonとして送るためにajaxを追加したことです。私はJSONにフォームデータをserealizeするSerializeJSONライブラリを使用しています

$('form').submit(function(){ 

    var obj = $('form').serializeJSON(); 

    $.ajax({ 
     type: 'POST', 
     url: 'http://192.168.52.166:6000/api/2/users/login/', 
     dataType: 'json', 
     data: JSON.stringify(obj), 
     contentType : 'application/json', 
     success: function(data) { 
      alert(data) 
     } 
    }); 

は、ここでは、私のjqueryのsnippitです。

同じことが起こると、フォームデータがurlencodedとして送信され、サーバーにjsonとして送信されます。

serializeJSON();の後にデータを警告すると、正常にjsonとして表示されます。ここ

は、私はそれが正常に私のフォームフィールドのJSON値を私に警告

var obj = $('form').serializeJSON(); 
var jsonString = JSON.stringfy(obj); 
alert(jsonString) 

をやったことです。しかし、上記のjqueryフォームのデモで示したようにajax jqueryで使用すると、そのjson文字列がサーバーに移動すると仮定します。しかし、そうではなく、代わりにそれはurlencodedのようになります。

2)SECONDシナリオは、最初のシナリオと同じですが、今回はフォームのアクションとメソッドがありません。私のフォームメソッドはGETとして機能しますが、私はjqueryでPOSTを説明しています。

注:すべてのレポートをWiresharkでチェックして、HTTP要求と応答を確認しました。

私はここで間違っていますか? JSONデータをURLEncodedではなくサーバーに送信したいだけです。私は何をすべきですか?

編集:私は別のことを見つけました。 htmlフォームでアクションとメソッドを定義せずにフォームデータを送信すると、サーバーからの要求と応答に従います。 (これらの応答はWiresharkから取られています)

私はjqueryの代わりにhtml形式でPOSTを言います。それは動作していません。

ここでは、私がアクションとメソッドをhtml形式で使用したときの結果を示します。

POST /api/2/users/login/ HTTP/1.1 
Host: 192.168.52.166:6000 
Content-Length: 48 
Cache-Control: max-age=0 
Origin: http://localhost 
Upgrade-Insecure-Requests: 1 
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36 
Content-Type: application/x-www-form-urlencoded 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 
Referer: http://localhost/app/login.html 
Accept-Language: en-US,en;q=0.8,ca;q=0.6 
Cookie: csrftoken=M5ItY7prMtJLBZWOJAN4D9uMDs2uFz5d 
Accept-Encoding: gzip 

email=emjimadhu%40email.com&password=qwerty123 

HTTP/1.1 201 CREATED 
Server: nginx/1.4.6 (Ubuntu) 
Date: Sun, 13 Nov 2016 18:11:51 GMT 
Content-Type: application/json 
Transfer-Encoding: chunked 
Connection: keep-alive 
Vary: Accept, Cookie 
X-Frame-Options: SAMEORIGIN 
Allow: POST, OPTIONS 
Set-Cookie: csrftoken=tFSyA9OSfyBi4NHoU6FVFSD7BZOE6S1a; expires=Sun, 12-Nov-2017 18:11:51 GMT; Max-Age=31449600; Path=/ 
Set-Cookie: sessionid=eoaq13tgrjdmsqwcke7zbhgv92dec9c3; expires=Sun, 27-Nov-2016 18:11:51 GMT; httponly; Max-Age=1209600; Path=/ 

回答すべての

まず、あなた..コーディングに問題がなかったことの原因を...答えのどれもが私のために働いていない答えることをしようとしたすべての人に感謝発見..私はjqueryのを読みますAjaxをAPIとして使用し、contentTypeにURLエンコード以外のものを定義すると、POSTではなくOPTIONSフラグがトリガーされます。基本的にブラウザはOPTIONSフラグ付きの事前要求を送信し、サーバーのHTTPステータスに基づいて実際の要求を送信します。それは私のバックエンドサーバーがクロス起源の要求を許可していない原因です。そのため、私はそれらの問題を持っています。私はクロス原点を一時的に許可するクロムエクステンションを見つけました。 roblem ..ここ

...それは非常に適切なソリューションではありません..しかし、あなたは私と同じような状況を持っている場合、あなたはそれを使用することができるChromeの拡張機能

Link to chrome extension

へのリンクです

私の状況は私がフロントエンドを開発し、APIを要求することです。しかし私のバックエンド、私はそれを開発していない..ソースが遠いです..プロダクション環境では、すべての私のファイルがサーバーにマージされます..しかし、今のところ、テストのために、私のAPIを使ってこのエクステンションを使う必要がありました。

答えて

0

イベントリスナーとして機能を変更する必要があります。

$('#form').on('submit', function(event){ 

     var obj = $('form').serializeJSON(); 

     $.ajax({ 
      type: 'POST', 
      url: 'http://192.168.52.166:6000/api/2/users/login/', 
      dataType: 'json', 
      data: JSON.stringify(obj), 
      contentType : 'application/json', 
      success: function(data) { 
       alert(data) 
      } 
     }); 

     return false; 
    }); 
+0

申し訳ありませんが、私はjqueryのreturn文を持っています。私はそれを言い忘れました... –

+0

コードを変更しました。イベントリスナーとして機能するのではなく、 – nrhode

-2

これを試すJSON.stringify()from data。 $アヤックス({ タイプ: 'POST'、 URL: 'http://192.168.52.166:6000/api/2/users/login/'、 データ型: 'JSON'、 データ:OBJ、 のcontentType: 'アプリケーション/ JSON'、 成功:機能(データ){ アラート(データ) } });

+0

いいえ動作しません.. –

0

フォームを送信してから、Ajaxリクエストを送信しないでください。フォームのボタンを送信タイプではなく、Ajaxをonclickから呼び出すだけです。

それとも、あなたはあまり仕事をしたい場合は、単にいくつかのアイドル値「のjavascript://」に、フォームのアクションを変更するだけでAJAXリクエストが実際に提出するイベントでサーバーに送信されるように、:

<form id="login-form" action="javascript://" method="post"> 
0

あなたはあなたの要求のPOSTからhttp://192.168.52.166:6000/を削除してみてください、あなたは外部要求を行うことなく、サーバー上のディレクトリ内のファイルのパスを配置する必要があり、ポスト内のHTTPプロトコルを使用するか、または要求を取得することはできません

$.ajax({ 
     type: 'POST', 
     url: 'api/2/users/login/', 
     dataType: 'json', 
     data: JSON.stringify(obj), 
     contentType : 'application/json', 
     success: function(data) { 
      alert(data) 
     } 
    }); 
+0

あなたはPOSTまたはGETでAjaxリクエストについて話していますか?一般的にはPOSTの '.post()'とGET '$ .get()'ですか? –

+0

あなたはPOSTまたはGETでAjaxリクエストについて話していますか?一般的にはPOSTの '.post()'とGET '$ .get()'ですか? –

+0

postまたはgetのいずれかのリクエストでは、安全でないためアクションURL「http」を入れることができません。あなたが知っているURLだけにリクエストを送ることができると想像してください。サーバー内にディレクトリを置くだけでよいのですが、それが唯一の問題かどうかはわかりません。 –

0
here is my code It will help you: 
     <script> 
     <form name="myform" id="myform"> 
     <div class="form-group"> 
     <label for="fullName">Name:</label> 
     <input type="text" name="fullName" class="form-control"> 
     </div> 
     <div class="form-group"> 
     <label for="email">Email:</label> 
     <input type="email" name="email" class="form-control"> 
     </div> 
     <div class="form-group"> 
     <label for="subject">Subject:</label> 
     <input type="text" name="subject" class="form-control"> 
     </div> 
     <div class="form-group"> 
     <label for="mark">Mark:</label> 
     <input type="number" name="mark" class="form-control"> 
     </form> 
     </div> 
     <button type="submit" class="btn btn-success " id="submitform">Submit</button> 





     $(document).ready(function(){ 
     $("#submitform").click(function(e) 
     { 
     var MyForm = JSON.stringify($("#myform").serializeJSON()); 
     console.log(MyForm); 
     $.ajax(
     { 
     url : "<your url>", 
     type: "POST", 
     data : MyForm, 

     }); 
     e.preventDefault(); //STOP default action 

     }); 
     }); 
     </script> 
0
$('#form').on('submit', function(event){ 

     var obj = $('form').serialize(); 

     $.ajax({ 
      type: 'POST', 
      url: 'http://192.168.52.166:6000/api/2/users/login/', 
      dataType: 'json', 
      data: obj, 
      contentType : 'application/json', 
      success: function(data) { 
       alert(data) 
      } 
     }); 

     return false; 
    }); 
+0

ようこそStackoverflowへ!答えをありがとう、あなたの答えにもう少し説明を追加することがあります。 あなたの回答は元の質問のコードと非常によく似ています。 –

関連する問題