如何在按钮单击时提交表单，然后运行分配给同一按钮的AJAX调用

Question

我是一个简单的Airbnb刮刀。当用户提交填写了城市名称的表单时，他将获得一张表格，其中包含AJAX在同一页面上呈现的价格和链接。

表格在我的“index.html”中：

<form action="" method="post">
    {% csrf_token %}
    {{ form }}
    <input id="create_table" type="submit" value="View results" />
</form>
<div id="table">Place for table</div>

我使用两种观点：“索引”和“结果”。 “索引”仅用于收集城市名称并将其传递给“结果”（由AJAX调用，见下文）：

def index(request):
    if request.method == 'POST':
        form = RoomForm(request.POST)
        if form.is_valid():
            city = form.cleaned_data['city'].title()
            request.session['city'] = city
    else:
        form = RoomForm() 

    context = {'form': form}
    return render(request, 'javascript/index.html', context)

def results(request):
    if request.is_ajax():
        city = request.session.get('city')
        url = 'https://www.airbnb.pl/s/' + str(city) +'
        # "results" scraping code continues...

我需要将city变量从“index”传递给“results”，因此request.session部分。

但是我认为变量永远不会被分配，因为以下.load AJAX调用（对API的另一个调用与示例无关）

function create_table() {
    $.ajax({
        method: "GET",
        url: "/api/data/",
        success: function(data){
            $('#table').load('http://127.0.0.1:8000/results', function(){
              $('#go_back').remove();
            });
        },
        error: function(error_data){
            console.log("errorrr")
            console.log(error_data)
        }
    })
}
document.getElementById("create_table").onclick = function() {
    create_table();
    return false;

首先启动分配给相同提交按钮的

，并加载“结果”视图，跳过表单提交，因此变量将作为None传递。

最终结果如下（注意链接文本中的“无”而不是“巴塞罗那”）：

我该如何解决这个问题？

Answer 1

您是否尝试将javascript代码分配给onsubmit属性

<form onsubmit="return create_table()" action="" method="post>

确保在不需要数据时返回默认的空状态。