1
HTMLページからJSONをPlayサーバーに送信します。 HTMLはユーザーの詳細を取り、JSON形式を使用してサーバーを再生するために詳細を「投稿」する必要があります。私はJQueryを使用しています。デバッガを使用すると、serialize関数が空のデータを返し、データが 'text/jsonまたはapplication/json body'にないため、再生サーバーからのレスポンスが400であることがわかりました。HTMLコードからJSONを送信できません
UPDATE - 空では、入力要素に 'name'属性を指定していないということでした。現在、serializeは空の文字列を返しませんが、エンコーディングはまだJSONにはありません。したがって、私は400の回答を得続けます。
更新 - JSONを送信できましたが、サーバーコードが異常な動作をしています。デバッガを使用して、私は、サーバーがOK resposdingされていることを見ることができますが、私は、エラーページ
Bad request
For request 'POST /newreg' [Expecting text/json or application/json body]
HTMLコード
@(form:Form[User2])
<!DOCTYPE html>
<html lang="en" xmlns:font-variant="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTML Test</title>
<link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/bootstrap.min.css")">
<!--link rel="stylesheet" href="stylesheets/bootstrap-theme.min.css"-->
<style type="text/css">
html, body {
height:100%;
margin:0;padding:0
}
.center-form {
width:100%;
margin:auto;
position:relative;
top:50%;
transform: translateY(-50%)
}
</style>
<script src="@routes.Assets.at("javascripts/jquery-3.1.1.min.js")"></script>
<script src="@routes.Assets.at("javascripts/bootstrap.min.js")"></script>
</head>
<body>
<div class="container center-form" >
<!-- for medium and large screens,
First row of Bootstrap grid contains logo. Total 3 columns (12/4). Logo in middle column-->
<div class="row" >
<!--empty column-->
<div class="col-md-4 col-lg-4" ></div>
<!--logo column-->
<!--empty column-->
<div class="col-md-4 col-lg-4"></div>
</div>
<!-- for medium and large screens,
Second row of Bootstrap grid contains the form for username and password. Total 3 columns (12/4). -->
<div class="row" >
<!--empty column-->
<div class="col-md-4 col-lg-4"></div>
<!--form-->
<div class="col-md-4 col-lg-4">
<form id="registration-form" action="/newreg" method="post">
<div class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" id="first-name" name="first-name" value="@form("name").value" required>
</div>
<div class="form-group">
<label for="last-name">Last Name</label>
<input type="text" class="form-control" id="last-name" name="last-name" value="@form("name").value" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" value="@form("email").value" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirm-password">Confirm password</label>
<input type="password" class="form-control" id="confirm-password" required>
</div>
<div class="form-group">
<label for="street-name">Street Name</label>
<input type="text" class="form-control" id="street-name" name="street-name" required>
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" id="country" name="country" required>
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
<!--empty column-->
<div class="col-md-4 col-lg-4"></div>
</div>
</div>
<script src="@routes.Assets.at("javascripts/myScripts.js")"></script>
</body>
</html>
コントローラー取得 - どちらかの印刷名または不正な要求を返す
def registrationRequest = Action (parse.json){ request =>
(request.body \ "first-name").asOpt[String].map {name =>
/* In debugger, I can see that this code gets hit but I still get an error page!*/
Ok("hello" + name)
}.getOrElse{
BadRequest("bad request")
}
}
をmyScripts.js
function objectifyForm(formArray) {//serialize data function
returnArray = {};
for (var i = 0; i < formArray.length; i++){
returnArray[formArray[i]['name']] = formArray[i]['value'];
}
return returnArray;
}
$(document).ready(function(){
// click on form submit
$('#registration-form').on('submit',function(e){
var details = JSON.stringify(objectifyForm($(this).serializeArray()));
console.log(details)
// send ajax
$.ajax({
url: '/newreg', // url where to submit the request
type : "POST", // type of action POST || GET
datatype : "json", // data type
/* this doesn't work*/
//contentType: "application/json; charset=utf-8",
/*this does STRANGE!!!*/
contentType: "text/json; charset=utf-8",
data : details,
success : function(result) {
// you can see the result from the console
// tab of the developer tools
console.log(result);
},
error: function(xhr, resp, text) {
console.log(xhr, resp, text);
}
})
});
});
StackOverflowの他の質問からコピーしたjqueryコードを追加しました。私が気付いている奇妙な振る舞いは、 'contentType：" application/json; charset = utf-8 "、' doesntは動作しますがcontentType： "text/json; charset = utf-8"です。私が今直面している新しい奇妙な行動についての質問をもう一度見てください！ –
これはフォーラムではありません。問題を解決して別の問題が発生した場合は、問題を終了して新しい質問を開く方がはるかに優れています。理由は - 明快です、私はほとんど誰もこの問題の問題を理解していると想像します。あなたが成功した "ok"という文字列を持っていれば、エラーが出たとは思っていません。ログにエラーがありますか？簡単な例でそれを再現できますか？このすべては新しい質問に記述することをお勧めします。 –
あなたのコメントは有効です。私は新しい問題のための別の質問を開いた（そして解決策も見つけた）。 - http://stackoverflow.com/questions/42637029/i-am-sending-ok-but-the-browser-is-showing-bad-request/42638227#42638227 –