如何使用 jquery submit 提交表单

Question

这是我的 jquery 代码

$(document).ready(function () {
    $('.bar_dropdown').on('change', function() {
        console.log("dropdown changed")
        $('#bar_graph_form_id').submit(function(event) {
            event.preventDefault();
            var data = new FormData($('#bar_graph_form').get(0));

            $.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: data,
                cache: false,
                processData: false,
                contentType: false,

                success: function (data) {
                    console.log('form submitted successfully')
                    console.log(data)
                }
            })
        })
    })
})

这是我的 HTML

<form id="bar_graph_form_id" method="post" action="display_bar_graph" name="bar_graph_form">
    {% csrf_token %}
    <select class="form-select bar_dropdown" aria-label="Default select example" name="bar_graph_dropdown">
        <option selected>Select data to visualise</option>
        <option value="1">By category</option>
        <option value="2">By language</option>
    </select>
</form>

<div class="bar_graph_container">
</div>

当下拉值发生变化时，我希望提交表单并触发 django 视图。这是我的看法

def display_bar_graph(request):
    if request.method == 'POST':
        user_select = request.POST['bar_graph_dropdown']

        if int(user_select) == 1:
            graph = open('./graphs/bar1.html', 'r').read()
        
        if int(user_select) == 2:
            graph = open('./graphs/bar2.html', 'r').read()
        
        context = {'html_data': graph}
        
        print('the form was submitted using ajax')
        return JsonResponse(context)

想法是，当下拉值发生变化时，在 bar_graph_container div 中显示一个绘图图。

但我注意到此代码 $('#bar_graph_form_id').submit(function(event) { 不起作用。我按如下方式从提交中删除了该功能 $('#bar_graph_form_id').submit() 并且效果很好。

我想知道我做错了什么。

Answer 1

像这样更改您的代码

<select class="form-select bar_dropdown" aria-label="Default select example" name="bar_graph_dropdown">
        <option selected>Select data to visualise</option>
        <option value="1">By category</option>
        <option value="2">By language</option>
</select>

在你的javascript里面添加这个

<script>
    $('.bar_dropdown').on('change', function () {
        $.ajax({
            type: "GET",
            url: '{% url "your_url" %}',
            data: {
                'bar_graph_dropdown': this.value
            },
            success: function (data) {
                console.log(data)
            },
            error: function (err) { 
                console.log(err)
            },
        });
    })
</script>

并在您的 python 文件中添加这个

def display_bar_graph(request):
    user_select = request.GET.get('bar_graph_dropdown')
    if user_select:
        if int(user_select) is 1:
            graph = open('./graphs/bar1.html', 'r').read()

        if int(user_select) is 2:
            graph = open('./graphs/bar2.html', 'r').read()

    context = {'html_data': graph}
    print('the form was submitted using ajax')
    return JsonResponse(context)

如何使用 jquery submit 提交表单

How to submit form using jquery submit

javascript

python

django

ajax

jquery