Jquery ajax调用单击事件提交按钮。

时间:2022-10-07 18:02:07

I've to build an ajax call when the user clicks a submit button, so i've included jquery and i've written the following code (taken from the jquery documentation):

当用户单击submit按钮时,我必须构建一个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>

The problem is the following, the submit action is executed but the ajax call is not, so the form is performing the requested submit action instead of staying in the same page and updating the content of the required "div".

问题是这样的,提交操作被执行,但是ajax调用没有执行,因此表单正在执行请求的提交操作,而不是停留在相同的页面并更新所需的“div”的内容。

What am I missing? Where am I wrong? Thanks in advance for any tip.

我缺少什么?我在哪儿错了?提前谢谢你的小费。

1 个解决方案

#1


15  

You did not add # before id of the button. You do not have right selector in your jquery code. So jquery is never execute in your button click. its submitted your form directly not passing any ajax request.

您没有在按钮的id之前添加#。在jquery代码中没有正确的选择器。所以jquery永远不会在你的按钮点击中执行。它直接提交了表单,没有传递任何ajax请求。

See documentation: http://api.jquery.com/category/selectors/
its your friend.

参见文档:http://api.jquery.com/category/selectors/它是你的朋友。

Try this:

试试这个:

It seems that id: $("#Shareitem").val() is wrong if you want to pass the value of

如果要传递值,id: $(“#Shareitem”).val()似乎是错误的

<input type="hidden" name="id" value="" id="id">

you need to change this line:

你需要改变这条线:

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

by

通过

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

All together:

在一起:

 <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>

#1


15  

You did not add # before id of the button. You do not have right selector in your jquery code. So jquery is never execute in your button click. its submitted your form directly not passing any ajax request.

您没有在按钮的id之前添加#。在jquery代码中没有正确的选择器。所以jquery永远不会在你的按钮点击中执行。它直接提交了表单,没有传递任何ajax请求。

See documentation: http://api.jquery.com/category/selectors/
its your friend.

参见文档:http://api.jquery.com/category/selectors/它是你的朋友。

Try this:

试试这个:

It seems that id: $("#Shareitem").val() is wrong if you want to pass the value of

如果要传递值,id: $(“#Shareitem”).val()似乎是错误的

<input type="hidden" name="id" value="" id="id">

you need to change this line:

你需要改变这条线:

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

by

通过

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

All together:

在一起:

 <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>