0

そのため、JQueryUI を使用して JSP で単純な Ajax 関数を使用しようとしています。フォームで使用される 2 つのテキスト フィールドを渡し、それらを 2 つの div に入力しようとしています。ボタンをクリックしても何も起こりません。console.logs を ajax 関数に入れてみましたが、何も出力されません。

ボタンクリック呼び出し用の JSP コード (要求に応じて完全な jquery)

<script type="text/javascript">
      $('#saveBtn').click(function() {  
          //define the handler function for click event inline (it doesn't need a name because we're just using it one time)
          // get the value of the search box
          console.log("you are in the ajax");
          var addressValue = $("#address").val();
          var creditValue = $('#creditcard').val();
          System.out.println("you are in the function");
          // send to the server (this is relative to our current page)
          $.ajax({

            url: "actions.InfoAjax.action",
            data: { // this is an embedded JSON object we'll send to server
              address: addressValue,
              creditcard: creditValue
            },
            dataType: 'json',  // tell JQuery to expect JSON back from the server
            success: function(ret) {  // this is called as soon as the server returns

              console.log(ret.address);
              console.log(ret.creditcard);
              $('#savedAddress').html(ret.address);
              $('#savedCC').html(ret.creditcard);


            }//success
          });//ajax

        });//click
      });//ready
    </script>

これが私のhtmlです：

<form action="post">
          <input type = "text" name="address" placeholder="Address" ></input></br>
           <input type = "text" name="creditcard" placeholder="Credit Card Number">  </input></br>
          <button type ="button" class ="btn btn-small" id="saveBtn">Save</button>
</form>

私はこれを何時間も機能させようとしてきましたが、助けていただければ幸いです。

コンソールから取得しているエラーは次のとおりです。

 readyState: 4
responseText: "
↵
↵{
↵  "address": [null],
↵  "creditcard": [ test ]
↵}
↵
↵"

1: "parsererror"
2: SyntaxError
get stack: function () { [native code] }
message: "Unexpected token e"
set stack: function () { [native code] }
__proto__: Error
callee: function () {
length: 3
__proto__: Object
4

5 に答える 5

1

試す：

$('#saveBtn').click(function (e) { //define the handler function for click event inline (it doesn't need a name because we're just using it one time)
    e.preventDefault();
    // get the value of the search box
    console.log("you are in the ajax");
    var addressValue = $("#address").val();
    var creditValue = $('#creditcard').val();
    //System.out.println("you are in the function");
    // send to the server (this is relative to our current page)
    $.ajax({

        url : "actions.InfoAjax.action",
        data : { // this is an embedded JSON object we'll send to server
            address : addressValue,
            creditcard : creditValue
        },
        dataType : 'json', // tell JQuery to expect JSON back from the server
        success : function (ret) { // this is called as soon as the server returns

            console.log(ret.address);
            console.log(ret.creditcard);
            $('#savedAddress').html(ret.address);
            $('#savedCC').html(ret.creditcard);

        }, //success
        error : function () {
            console.log(arguments);
        }
    }); //ajax

}); //click
于 2013-03-17T04:57:37.030 に答える
0

jQuery Docs から、.click は .on('click', handler) のショートカットです。

$(".foo").on("click", function(){
    //your code here
});

また、ページの読み込み時に jQuery とともに、コードまたはインライン スクリプトを含む JS ファイルが読み込まれていることを確認してください。

于 2013-03-17T05:11:19.133 に答える
0

あなたも新しい機能を作ることができます。フォームを作成します。

$(document).ready(function() {
   $('#foo').submit(function() {
      // function here. try it!
      return false;
   });
});
于 2013-03-17T07:19:53.840 に答える
0 
$('#foo').click(function() {
   return false;
});

$('#foo').live('click', function() {
   return false;
});

それを試してみてください。関数を閉じる前の最後の行で「return false」を使用すると、関数が機能する場合があります。

于 2013-03-17T07:14:32.133 に答える
-2

これを試して教えてください

//System.out.println ?? check this
 });//ajax
    return false; 
});//click
于 2013-03-17T04:52:43.643 に答える