Question

我正在使用Django应用程序来显示图形。我想与此应用程序一起使用ajax来防止页面刷新。问题是我不知道如何使用锚标记执行此操作。我尝试过使用表单提交之前的ajax。这是表单提交的代码

$(document).on('submit', '.csv_upload_form', function(event) {
    event.preventDefault();
    csvUploadAjax();
});

function csvUploadAjax() {
    let $form = $(".csv_upload_form");
    let form_data = new FormData($form[0]);
    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: form_data,
        dataType: 'html',
        processData: false,
        contentType: false,
        success: function (data) {
            displayTable(data);
        },
        error: function (xhr, status, err) {
            console.log("Something went wrong: " + err);
        }
    });
}

但是我不知道如何在锚标记上复制它。到目前为止，这是我的代码

html模板

<ul>
    <li><a href="{% url 'visualize' %}" class='link1'>Line Chart</a></li>
    <li><a href="#">Scatterplot</a></li>
    <li><a href="#">Bar Graph</a></li>
    <li><a href="#">Pie Chart</a></li>
    <li><a href="#">Heat Maps</a></li>
    <li><a href="#">Histogram</a></li>
</ul>

index.js

$(document).on('click', 'a', function(event) {
    event.preventDefault();
    onLinkClick();
})

function onLinkClick() {
    let $link = $('.link1');
    let link_data = new FormData($link[0]);
    $.ajax({
        url: $link.attr('action'),
        type: $link.attr('method'),
        data: link_data,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function (data) {
            showGraph(data);
        },
        error: function (xhr, status, err) {
            console.log("Something went wrong: " + err);
        }
    });
}

我面临的问题是，我没有使用表单，而是使用了锚标记链接。因此，我不确定如何向其中添加Ajax。

Answer 1

您当前的代码不是完成您想要实现的最佳方法。但是你快要接近了。

$link.attr('action')将尝试获取锚标记的action属性。但是在您的html

<li><a href="{% url 'visualize' %}" class='link1'>Line Chart</a></li>

没有这样的属性。我认为您对<form>元素的action和method属性感到困惑

两种解决方案。

可以正确使用form标记中的操作和方法，并在代码中使用它们。
```
<form id="myForm" method="GET" action="https://google.com">
```

并使用jQuery

$('#myForm').attr('method')
$('#myForm').attr('action')

或将属性方法和操作作为自定义属性添加到锚标记。

<a href="{% url 'visualize' %}" class='link1' method="GET" action="https://google.com">Line Chart</a>

现在您的代码应该可以使用

对此答案添加编辑以适合OP的问题格式。

<a id="link" href="https://google.com/q?" data-query="cat" data-method="GET">Search for cat</a>

$('#link').click(function(e) {
    e.preventDefault();
  $.ajax({
        url: $(this).attr('href'),
    type: $(this).attr('method'),
    data: $(this).attr('cat'),
    dataType: 'json',
    success: function (data) {
      console.log(data)
    },
  })
})

如何在锚链接上使用ajax

1 个答案: