Question

<head>  
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
         $(document).ready(function(){
              $("#submit").click(function(){
                     $.get("invite_friends_session.php", function(){
                    });
               });
          });
</script>
</head>
<body>
<form >
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</form>
</body>

$.get("invite_friends_session.php")部分不起作用。但是如果我将它保留在回调函数之外，它就可以工作。

但是只要点击#submit，我就需要调用invite_friends_session.php。

怎么做？

Answer 1

由于提交按钮位于form内，点击提交按钮会冒泡并提交表单。您需要在处理程序的末尾添加return false：

$("#submit").click(function(){
    $.get("invite_friends_session.php", function(){
    });
    return false;
});

Answer 2

[编辑] 您应该在点击时阻止默认表单提交操作。

$(document).ready(function(){
  $("#submit").click(function(e){
    e.preventDefault(); //edit
    $.get({ url: "invite_friends_session.php",
            success: function() {
              alert('success');
            },
            error: function() {
              alert('error');
            },
            complete: function() {
              alert('complete');
            }
          });
  });
});

Answer 3

删除提交按钮周围的<form>标记。由于您使用的是jQuery的.get方法，因此您不需要该表单标记（从技术上讲，它甚至不需要是提交输入按钮）。现在，它试图发布使用表单，而不是通过jquery获取页面。

示例：http://jsfiddle.net/R3CWp/

<head>  
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
         $(document).ready(function(){
              $("#submit").click(function(){
                     alert("i got clicked");
                     $.get("invite_friends_session.php", function(){
                    });
               });
          });
</script>
</head>
<body>
<input type="submit" name="submit" id="submit" style="margin-top:100px; margin-left:100px;" />
</body>

jquery，在回调函数中不能有ajax调用

3 个答案: