0
Webアプリケーションを作成しようとしていますが、Tomcatサーバーのサーブレットにデータを送信する際に問題があります。ブートストラップモーダルボタンをクリックしてサーブレットにデータを渡す方法は?
- 管理ボタンをクリックすると、モーダルウィンドウが表示されます。
- モーダルウィンドウでは、モーダルウィンドウの送信ボタンをクリックしてサーブレットに送信したい年を入力します。
- しかし、私は
$.post(....)
の機能を使っているので、私はサーバーに接続できません。
<html>
<head>
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10">
<h1 class="text-center">Admin portal</h1>
</div>
</div>
</div>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myCreateDatabase">CreateDatabase</button>
<div class="modal fade" id="myCreateDatabase" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="text-center">create database</h4>
</div>
<div class="modal-body">
Year: <input type="text" name="year" id="yearvalue"><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> close</button>
<button type="submit" id="submitForm" class="btn btn-default">Send</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#submitForm").click(function(event) {
var name = $("#yearvalue").val();
$.post('http://localhost:9280/dummy.html', function(data) {
/*optional stuff to do after success */
alert("i maskd");
})
});
$("#myCreateDatabase").modal("hide");
});
</script>
</body>
</html>
だけFYIあなたは、二回のjQueryを追加している2つ目jQuery UIの統合を上書きします。スクリプトをjQuery 3.2.1に変更してから、jQuery UI、次にブートストラップに変更します。 jQuery 1.9.1を完全に削除します。 –