Jquery AJAX调用点击事件提交按钮

12

我已经编写了一个 AJAX 调用,当用户点击提交按钮时就会提交。我已经包含了 jQuery 并编写了以下代码(摘自 jQuery 文档):

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
  $("Shareitem").click(function(e){
      e.preventDefault();
    $.ajax({type: "POST",
            url: "/imball-reagens/public/shareitem",
            data: { id: $("Shareitem").val(), access_token: $("access_token").val() },
            success:function(result){
      $("sharelink").html(result);
    }});
  });
});
</script>

Html:

HTML:

<div id="sharelink"></div>
[...]
<input type="hidden" name="id" value="" id="id"></dd>
<dd id="access_token-element">
<input type="hidden" name="access_token" value="xxxxxxxx" id="access_token"></dd>
<dt id="Shareitem-label">&#160;</dt><dd id="Shareitem-element">
<input type="submit" name="Shareitem" id="Shareitem" value="UpdatedByPreviousAjaxCall"></dd></dl></form>

问题是:提交操作被执行了,但ajax调用没有执行,所以表单执行了请求的提交操作,而不是停留在同一页上并更新 div 标签的内容。

我错在哪里?我错过了什么吗? 提前感谢任何提示。


1
$('Shareitem')$('sharelink')不是很好的选择器... - Karl-André Gagnon
1个回答

17
你没有在按钮的id前添加#。你的jquery代码选择器不正确。所以jquery不会在按钮点击时执行,而是直接提交了你的表单,没有通过任何ajax请求。
请查看文档:http://api.jquery.com/category/selectors/
它是你的朋友。
尝试这个:
似乎如果您想传递值,则id:$(“ Shareitem”).val()是错误的。
<input type="hidden" name="id" value="" id="id">

你需要更改这行代码:

id: $("#Shareitem").val()

通过

id: $("#id").val()

全部在一起:

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#Shareitem").click(function(e){
          e.preventDefault();
        $.ajax({type: "POST",
                url: "/imball-reagens/public/shareitem",
                data: { id: $("#Shareitem").val(), access_token: $("#access_token").val() },
                success:function(result){
          $("#sharelink").html(result);
        }});
      });
    });
    </script>

你的答案很有效而且精确(因为当时已经太晚了,我的头脑有些混乱,但是无论如何,我还是不得不改变jQuery包含的方式,因为我正在使用SSL,我遵循了这个教程)。 - softwareplay

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接