1

ajaxを学んでいます。以下のコードを見つけてください。

     <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1"%>
     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org         /TR/html4/loose.dtd">
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
     <title>Insert title here</title>
     <script type="text/javascript" src="/MyApp/js/jquery.js"></script>
     <script type="text/javascript">
         function doAjax() {
             alert('yes');
           $.ajax({
             url: 'register.html',
             data: ({name : "me"}),
             success: function(data) {
               $('#time').html(data);
             }
           });
         }
       </script>  
     </head>
     <body>
     <form action="">
     <button id="demo" onclick="doAjax()" title="Button">Get the time!</button>
     <div id="time">
     </div>
     </form>
     </body>
     </html>

このコードは、Springコントローラーへのajax呼び出しを成功させ、フォームタグを削除した場合にのみデータを返します。そうしないと、ajaxメッセージが表示されません(エラーもありません)。

ログを確認しました。フォームタグを削除すると、最後に受信したリクエストは「register.html」であり、これは非常に正しいです。フォームタグを配置すると、ボタンをクリックすると、上記のコードを保持するページである「hello.html」にリクエストが送信されます。これがどのように起こっているのか理解できません。

私が疑っていたのは、フォームがコミットされていることです。しかし、ボタンをクリックしたときにサミットイベントを発生させていない場合、これはどうすれば起こりますか。

このページにフォームタグが必要なので、アドバイスをお願いします。

以下のコントローラー機能、

     @RequestMapping("/hello")
           public ModelAndView helloWorld() {
           return new ModelAndView("hello", "message", "Spring MVC Demo");
           }

     @RequestMapping(value = "/register", method = RequestMethod.GET)
           public @ResponseBody String registerUser(@RequestParam String name) {
             String result = "Time for registration" + name + " is " + new Date().toString();
             return result;
           }
4

2 に答える 2

1

まず、html フォーム内でボタンタグを使用すると、ブラウザが送信要求として解釈する場合があります。これが、Ajax リクエストではないフォームでボタンを押す理由です。ホームページをレンダリングすると、URL は localhost:8000/home のようになりますが、ボタンをクリックすると URL は localhost:8000/home になります。これは、通常の get 要求があったことを示します

ボタンでフォーム内に ajax リクエストを作成する場合は、次のようにします。

 <script type="text/javascript">
 $(function(){
    $('button').click(function(e){
        e.preventDefault();
        doAjax();
    })
 })


     function doAjax() {
         alert('yes');
       $.ajax({
         url: '/register/',
         data: ({name : "me"}),
         success: function(data) {
           $('#time').html(data);
         }
       });
     }
   </script>  
 </head>
 <body>
    <form action="">
 <button id="demo" title="Button">Get the time!</button>
 </form>
 <div id="time">
 </div>

次に、Ajax 関数の URL を「/register.html/」に変更してみてください。スラッシュに注意してください。jquery が指定された URL をページの URL に追加することを提案する場合がある可能性があるためです。

たとえば、ページの URL が localhost:8000/home. 生成されるリクエストは、localhost:8000/home/register の可能性があります。そのため、URL を定義するときは常にスラッシュを使用することをお勧めします。

最後に、html の代わりに他の拡張子を使用してみてください。html は通常、静的コンテンツの生成に使用され、動的コンテンツの修道院は htm です。それは良い練習のための単なる慣例であり、あなたの選択です。

于 2012-11-10T19:48:24.053 に答える
0

ボタンでフォームを送信する場合は、「送信」のタイプを指定します。また、ボタン要素のインライン onclick ハンドラーを使用する代わりに、フォームの送信ハンドラーを定義します。

于 2012-11-10T19:49:50.420 に答える