使用ajax处理django表单视图

Question

我正在寻找更优雅的方法来解决这个问题。假设main.html:中有两个按钮x、y

<input class= "btn-check", name = "options", id="x">
<label class="btn btn-lg btn-info", for="x">x</label>

<input class= "btn-check", name = "options", id="y">
<label class="btn btn-lg btn-success", for="y">y</label>

我想做的是在点击按钮后，我将在python中做一些事情，因此在djangoviews中，我将为每个按钮创建一个视图函数(我目前的实现(：

def funcX(request):
booleanX = doSomethingforX()
return JsonResponse({"success": booleanX})
def funcY(request):
booleanY = doSomethingforY()
return JsonResponse({"success": booleanY})

ajax调用将是：

$("[id='x']").on("click", function(e){
e.preventDefault();

$.ajax({
type:"GET",
url: "{% url 'funcX' %}",           
success: function(response){
if(response.success == true){
//Do something
}
}       
})
});

ajax调用将与按钮Y相同。

现在，我想知道是否可以用表格来做这件事？假设html变成：

<form method="POST", class="form-group", id="post-form">
<input type="submit", value="x", class= "btn-check", name = "options", id="x">
<label class="btn btn-lg btn-info", for="x">x</label>
<input type="submit", value="y", class= "btn-check", name = "options", id="y">
<label class="btn btn-lg btn-success", for="y">y</label>
</form>

然后在django视图中，我有一个main.html的视图。这样可以保存很多用django编写的视图。

def main(request):

if request.method == "POST" and request.POST["options"] == "x":
booleanX = doSomethingforX()
return JsonResponse({"success": booleanX})

if request.method == "POST" and request.POST["options"] == "y":
booleanY = doSomethingforY()
return JsonResponse({"success": booleanY)})
return render(request, "main.html")

现在的问题是，我不知道如何编写从views接收的ajax调用，并分别获得X和Y的JsonResponse返回。。。

有什么想法吗？

Answer 1

HTML

<form method="POST", class="form-group", id="post-form">
{% csrf_token %}
<input type="text" class= "btn-check" name = "options" id="options_input">
<button type="submit" id="x">X</button>
<button type="submit" id="y">Y</button>
</form>

JS-

$('#x').click(function(){
$('#options_input').val("X")
})
$('#y').click(function(){
$('#options_input').val("Y")
})

$('body').on('submit','#post-form',function(e){
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:"POST",
url: "/url/",
data: formData, 
success: function(response){
},
error: function (response) {
},
cache: false,
contentType: false,
processData: false
})

})；

查看

def main(request):
if request.method == "POST":
submitted_type = request.POST.get("options")
if submitted_type == "X":
doSomethingforX()
return JsonResponse({"success": X)})
else:
doSomethingforY()
return JsonResponse({"success": Y)})