2017-11-01 46 views
0

Webアプリケーションを作成しようとしていますが、Tomcatサーバーのサーブレットにデータを送信する際に問題があります。ブートストラップモーダルボタンをクリックしてサーブレットにデータを渡す方法は?

  1. 管理ボタンをクリックすると、モーダルウィンドウが表示されます。
  2. モーダルウィンドウでは、モーダルウィンドウの送信ボタンをクリックしてサーブレットに送信したい年を入力します。
  3. しかし、私は $.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> 
+0

だけFYIあなたは、二回のjQueryを追加している2つ目jQuery UIの統合を上書きします。スクリプトをjQuery 3.2.1に変更してから、jQuery UI、次にブートストラップに変更します。 jQuery 1.9.1を完全に削除します。 –

答えて

0

あなたは以下のようにnameのようなフォームデータを渡す必要があります:

$.post('http://localhost:9280/dummy.html',{name:name}, function(data) { ..

参考:https://api.jquery.com/jquery.post/

関連する問題