как использовать AJAX на ссылку

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') попытается получить атрибут действия тега привязки.Но в вашем html

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

такого атрибута нет.Я думаю, что вас смутил атрибут действия и метода элемента <form> element

Два решения.

1. Либо используйте действие и метод в теге формы в качестве правильного использования, либо используйте его в своем коде.

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

Теперь ваш код должен работать

Добавление к этому ответу правки, соответствующей формату вопроса ОП.

<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)
    },
  })
})