まず最初に、私は同じタイトルで多くの質問があることを知っています。私はたくさんのものを見ましたが、これまでのところ何も私のために働いていません。それは私がこの質問を開いた理由です。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の拡張機能へのリンクです
私の状況は私がフロントエンドを開発し、APIを要求することです。しかし私のバックエンド、私はそれを開発していない..ソースが遠いです..プロダクション環境では、すべての私のファイルがサーバーにマージされます..しかし、今のところ、テストのために、私のAPIを使ってこのエクステンションを使う必要がありました。
申し訳ありませんが、私はjqueryのreturn文を持っています。私はそれを言い忘れました... –
コードを変更しました。イベントリスナーとして機能するのではなく、 – nrhode