在 href 点击上调用 Ajax

Question

我有一系列我想使用 Ajax 调用的链接

<a href="AddElement.php?Type=Example">Link</a>
<a href="AddElement.php?Type=ExampleTwo">Link</a>
<a href="AddElement.php?Type=ExampleThree">Link</a>

我尝试了以下方法无济于事：

<a id="data" href="#" data-href="Example">

<script type="text/javascript">
       $(document).on('click','#data',function(e) {
        e.preventDefault();
        e.stopPropagation();
        var data = $(this).data('href');
        $.ajax({
            method: 'get',
            url: 'AddElement.php?Type=',
            data: data,
            async: true,
            cache: false,
            success: function (data){
            alert('Success');  
            }
        });
    });      
</script>           

任何人都可以帮忙吗？

Answer 1

定义自定义属性并在脚本中使用这些属性，如下所示。

data-url="AddElement.php?Type=" href="#" data-value="Example"

 $(document).on('click','#data',function(e) { e.preventDefault(); e.stopPropagation(); var URL = $(this).data('url'); var data = $(this).data('value'); $.ajax({ method: 'get', url: URL, data: data, async: true, cache: false, success: function (data){ alert('Success'); }, error: function (data) { console.log('Error'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <aa id="data" data-url="AddElement.php?Type=" href="#" data-value="Example">Text</a>

Answer 2

您需要在url选项中使用data-href值，而不是在data选项中。 因此应该是

var hrefVal = $(this).data('href');
$.ajax({
   method: 'get',
   url: 'AddElement.php?Type=' + hrefVal,
   async: true,
   cache: false,
   success: function (data){
      alert('Success');  
   }
});