Question

所以我试图在使用JQueryUI的JSP中使用一个简单的Ajax函数。我只是传入一个在表单中使用的两个文本字段，并尝试用它们填充两个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

Answer 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

Answer 2

从jQuery Docs，.click是.on（'click'，handler）的快捷方式，试试

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

还要确保加载包含代码或内联脚本的JS文件，以及页面加载时的jQuery。

Answer 3

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

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

试试吧。在关闭函数之前最后一行“return false”可能有效。

Answer 4

您也可以创建新功能。制作表格：

$(document).ready(function() {
   $('#foo').submit(function() {
      // function here. try it!
      return false;
   });
});

Answer 5

试试这个并告诉我们

//System.out.println ?? check this
 });//ajax
    return false; 
});//click

单击按钮时Ajax不处理

5 个答案: