2017-04-20 18 views
0

私はSpring Bootで作業します。 web.xmlとjspファイルがありませんHTMLからコントローラへのデータ転送方法Spring

データを処理してデータベースに書き込むコントローラがあります。

@RequestMapping(value = "/registration", method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE) 
@ApiOperation(value = "Registration user", response = Account.class) 
public AccountDto registration(@Valid @RequestBody RegistrationDto registration, HttpServletResponse response) { 
    Account account = new Account(registration.getEmail(), registration.getPassword()); 
    return new AccountDto(account); 
} 

私はSwaggerの助けを借りてコントローラをチェックしました。

私は、ユーザーがデータを入力するHTMLページを持っています。コントローラにページからデータを転送する方法

<body> 
    <h1 th:inline="text">Please register</h1> 

    <form th:action="@{/logout}" method="post"> 
     <div> 
      <label> 
       E-mail:<input type="email" name="email"/> 
       Password:<input type="password" name="password"/> 
      </label> 
     </div> 
     <input type="submit" name="registration" value="Registration"/> 
    </form> 
</body> 

ありがとうございました

+0

あなたは= '消費を指定MediaType.APPLICATION_JSON_VALUE'、Jsonデータをコントローラに送信する必要があります。 – Zorglube

答えて

1

それはあなたが作るために使用しているかに依存クライアント(ブラウザ)とサーバ 間の呼び出し、私はjQueryのを使用して、この

var dataObj = new Object(); 
dataObj.email = $("#email").val(); 
dataObj.password = $("#passord").val(); 

$.ajax({ 
url : '/registration', 
dataType : 'json', 
contentType : 'application/json; charset=UTF-8', 
type : 'POST', 
data: JSON.stringify(dataObj),    
beforeSend : function(){ 
    //do something before send (e.g. show a message like: please wait) 
}); 

}, 
complete : function(){ 
    //do something after sent (e.g. remove the message please wait) 
}, 
success : function(data) { 
    //handle the success response 
}, 
error : function(data) { 
    //handle the error response 
} 
}); 

ような何かを行うことによって、AJAX呼び出しを使用することになり、私はそれが役に立つ

願っていますアンジェロ

EDIT

あなたは(jQueryのを使用することにより、常に)、このように提出するにリスナーを追加することができ、データを提出するために

//This is called after the DOM is fully loaded 
$(function() { 
    $("#mySubmitId").click(function(evt){ 
     //Prevent the default submit 
     evt.preventDefault(); 
     //call the submit funtion 
     submitData(); 
    }); 
}); 

function submitData() 
{ 
    var dataObj = new Object(); 
    dataObj.email = $("#email").val(); 
    dataObj.password = $("#passord").val(); 

    $.ajax({ 
    url : '/registration', 
    dataType : 'json', 
    contentType : 'application/json; charset=UTF-8', 
    type : 'POST', 
    data: JSON.stringify(dataObj),    
    beforeSend : function(){ 
     //do something before send (e.g. show a message like: please wait) 
    }); 

    }, 
    complete : function(){ 
     //do something after sent (e.g. remove the message please wait) 
    }, 
    success : function(data) { 
     //handle the success response 
    }, 
    error : function(data) { 
     //handle the error response 
    } 
    }); 
} 

アンジェロ

+0

正しく理解しています。 この関数が呼び出されると、データはjson形式でコントローラに送信されます。 ここに登録されているというメッセージをユーザーに表示できますか? 成功:関数(データ){ //成功応答を処理する }、 – Garazd

+0

@ Garazd;はい、それはあなたが送信にリスナーを追加することができます正しいです。私の答えの編集を参照してください –

+0

ありがとう – Garazd

0

フォームを送信すると、フォームデータが収集されます。それは入力、テキストエリア、選択、チェックボックスなどのすべての入力コントロールを取得し、入力されたすべてのコンテンツを送信します。

送信ボタンを押すと、データを送信する必要があります。フォームのアクションは/logoutですが、コントローラーは予期しています/registration

アクションを変更してください。

また、RegistrationDtoに送信されたデータを取得するためのメールとパスワードのフィールドがあるかどうかを確認してください。

そして@Zorglubeコメントで述べたようにするだけで consumesを除去しても、フォームを確認する必要がありますしようとは番目の属性を持っています。オブジェクト=「登録」

+0

コンシューマが削除され、がエラーでクラッシュしました。オブジェクト選択に使用される式が登録であり、無効です。変数式($ {...} )は、Spring対応環境の「th:object」属性で許可されています – Garazd

関連する問題