我发送确定，但浏览器显示错误请求 [英] I am sending Ok but the browser is showing bad request
问题描述
我正在从HTML页面将JSON发送到Play服务器.但是服务器代码的行为方式却很奇怪.使用调试器，我可以看到服务器首先发送错误的请求响应，然后处理我的控制器消息并响应确定".
I am sending JSON to Play server from HTML page. but the server code is behaving in a strange way. Using debugger, I can see that the server first sends bad request response, then it processes my controller message and responds Ok.
在图像1中，我发送了一个请求，该图像具有JSON的快照，我立即收到错误的请求响应，如图3所示.在图2中，控制器代码得到执行(我假设服务器发送了错误的请求之后)，服务器又发送了200 OK.我在JQuery中使用的内容类型是text/json.如果我使用application/json，则只会收到错误的请求消息，而根本不会执行控制器代码
In image 1, I send a request, the image has snapshot of JSON and I immediately get bad request response which is shown in image3. In image 2, the controller code gets executed (I assume after the server has sent bad request) and the server sends another 200 OK. The content type I am using in JQuery is text/json. If I use application/json, I get only bad request message and the controller code doesnt get executed at all
我怀疑问题出在杰森.
@(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-->
<!--div class="col-md-4 col-lg-4" >
<div>
<img src="@routes.Assets.at("images/SalesWorkspaceLogo303x64.png")" alt="SalesWorkspace Logo" height="64" width="303">
</div>
</div-->
<!--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 =>
Ok("hello " + name)
}.getOrElse{
BadRequest("bad request")
}
}
}
myScripts.js
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*/
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);
}
})
});
});
推荐答案
您忘记取消原始的提交事件，因此发送了两次表单.一次以琐碎的HTML形式出现，因此播放会发回错误的请求. javascript再次将其作为JSON，因此播放对其进行处理并发送回200.
You forget to cancel the original submit event, so you send form twice. One time as trivial HTML form, so play sends a bad request back. Another time by javascript as JSON, so play process it and sends back 200.
只需在您的JS函数中添加一个字符串即可.
Just add one string to your JS function.
发件人:
$('#registration-form').on('submit',function(e){
收件人:
$('#registration-form').on('submit',function(e){
e.preventDefault(); //prevent form from default submitting
这篇关于我发送确定，但浏览器显示错误请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
