0

我正在开发一个 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。

4

1 回答 1

0

您当前的代码不是实现您想要实现的目标的最佳方式。但你几乎接近了。

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

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

没有这样的属性。我想你对<form>element的 action 和 method 属性感到困惑

两种解决方案。

  1. 将表单标记中的操作和方法用作正确用法并在您的代码中使用。

    <form id="myForm" method="GET" action="https://google.com">

并使用 Jquery

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

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

    <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)
    },
  })
})
于 2019-03-19T08:04:29.480 回答