Django: отправка html-формы без перехода на новую страницу или обновления/перезагрузки
Я новичок в django и html. ниже приведена моя первая тестовая веб-страница простого онлайн-калькулятора.
Я обнаружил проблему, что при нажатии кнопки "submit" происходит переход на новую веб-страницу или новую веб-вкладку. это не то, что я хочу. Когда пользователь вводит данные и нажимает кнопку "отправить", я хочу, чтобы поле "результат" на странице непосредственно показывало результат (т.е. частично обновляло только это поле) без обновления/перехода на новую страницу. Также я хочу, чтобы введенные пользователем данные оставались на той же странице после нажатия кнопки "submit".
Я видел, что есть несколько различных способов сделать эту работу, iframe/AJAX. Поскольку я новичок, какой действительно самый простой способ достичь этой цели? BTW, я не пишу javascripts.
html:
<form method="POST">
{% csrf_token %}
<div>
<label>num_1:</label>
<input type="text" name="num_1" value="1" placeholder="Enter value" />
</div>
<div>
<label>num_2:</label>
<input type="text" name="num_2" value="2" placeholder="Enter value" />
</div>
<br />
<div>{{ result }}</div>
<button type="submit">Submit</button>
</form>
view.py
def post_list(request):
result = 0
if request.method == "POST":
num1 = request.POST.get('num_1')
num2 = request.POST.get('num_2')
result = int(num1) + int(num2)
print(request.POST)
print(result)
context = {
'result': result
}
return render(request, 'blog/post_list.html', context)
Это простой пример использования Ajax, который, я надеюсь, будет вам полезен.
сначала вам нужно изменить post_list
вид:
view
from django.http import JsonResponse
def post_list(request):
if request.method == "POST":
num1 = request.POST.get('num_1')
num2 = request.POST.get('num_2')
result = int(num1) + int(num2)
return JsonResponse({"result":result})
else:
return render(request, 'blog/post_list.html', context={"result":0})
Я использую JsonResponse
, потому что я просто хочу получить данные result
в ajax и отобразить их в html, для GET
запроса вывести html файл и для POST
запроса использовать JsonResponse, чтобы вернуть json как контекст.
И ваш html файл должен выглядеть следующим образом:
html
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<form method="POST" id="post-form">
{% csrf_token %}
<div>
<label>num_1:</label>
<input type="text" name="num_1" value="1" placeholder="Enter value" />
</div>
<div>
<label>num_2:</label>
<input type="text" name="num_2" value="2" placeholder="Enter value" />
</div>
<br />
<div id="result" >{{ result }}</div>
<button type="submit" >Submit</button>
</form>
<script>
$(document).ready(
$('#post-form').submit(function(e){
e.preventDefault();
var serializedData = $(this).serialize();
$.ajax({
type:"POST",
url: "/your_url/",
data: serializedData,
success: function(data){
$("#result").text(data["result"]);
},
});
})
);
</script>
Сначала я использую jQuery cdn, а затем ваш html файл, за исключением того, что я добавил атрибут id=post-form
к форме и добавил id=result
, затем был добавлен тег <script>
и функция jquery внутри тега была выполнена, когда ваша форма Submited (обнаружить событие по id #post-form
). Затем вы получаете данные(num_1, num_2
) методом serialize и используете Ajax для отправки запроса POST
в функцию представления(post_list
), в Ajax вам просто нужно передать serializedData
и url(также вы можете использовать тег Django url или установить его в форме действия или...), После этого нам нужно отправить данные в html(означает результат, который мы получили от представления).
в
success
функции Ajax вы можете добавить html тег в ваш html файл или заменить некоторые значения,...