javascript - 使用 a 标签中的链接在点击时发出 AJAX 请求

Question

我有一个包含动态值示例的表格，如下所示。我想根据用户点击的 ID 使用带有 AJAX 请求的标签中的动态 url 中的 url。当用户单击下表中的 ID 1 时，我想将该标记中的 url 传递到 AJAX url 部分中的脚本。我将不胜感激任何帮助

<table >
   <thead>
      <th data-field="status">ID</th>
      <th data-field="actions">action</th>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td><a id="test" href="test.php?id=1" >1</a></td>
      </tr>
      <tr>
         <td>2</td>
         <td><a id="test"  href="test.php?id=2" >2</a></td>
      </tr>
   </tbody>
</table>

<script>
    $(document).ready(function(){
        $("#test").click(function(){
            $.ajax({url: "", success: function(result){
                $("#div1").html(result);
            }});
        });
    });

</script>

Answer 1

注意:同一页面上的多个元素不应使用相同的 ID。我将你的 ID 更改为使用类 我还添加了一个 preventDefault() 来阻止链接执行其正常工作(除非您想在这种情况下删除该行)

    $(document).ready(function(){
        $(".test").click(function(e){
          theURL = $(this).attr('href');
          console.log(theURL); // can be removed just included for testing
          e.preventDefault();
            $.ajax({url: theURL, success: function(result){
                $("#div1").html(result);
            }});
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
   <thead>
      <th data-field="status">ID</th>
      <th data-field="actions">action</th>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td><a class="test" href="test.php?id=1" >1</a></td>
      </tr>
      <tr>
         <td>2</td>
         <td><a class="test"  href="test.php?id=2" >2</a></td>
      </tr>
   </tbody>
</table>