javascript - 页面加载时发生空请求时如何防止 500 GET 错误?
问题描述
我有一个带有依赖下拉列表的表单,只要提交表单就会加载,以便在提交表单后再次预加载在表单提交之前选择的主要选项。我注意到,GET: 500 Internal Server Error
每当页面第一次加载而没有传递参数时,我都会得到一个,错误如下所示:
Internal Server Error: /operations/ajax/load-stations/
ValueError at /operations/ajax/load-stations/ invalid literal for int() with base 10: ''
Request URL: http://localhost:8000/operations/ajax/load-stations/?work_area=
Request Method: GET
Status Code: 500 Internal Server Error
因为第一次加载页面时 work_area 是空的(work_area = "")并且还没有提交任何表单。如何修改 JS 或函数,以免发生此错误?
enter_exit.html
{% block main %}
<form id="warehouseForm" action="" method="POST" data-stations-url="{% url 'operations:ajax_load_stations' %}" novalidate >
{% csrf_token %}
<div>
<div>
<label>Employee #</label>
{{ form.employee_number }}
</div>
<div>
<label>Work Area</label>
{{ form.work_area }}
</div>
<div id="my-hidden-div">
<label>Station</label>
{{ form.station_number }}
</div>
<!-- Rest of the form -->
</div>
</form>
<script>
function loadStations() {
var url = $("#warehouseForm").attr("data-stations-url");
var workAreaId = $(this).val();
var $stationNumberField = $("#{{ form.station_number.id_for_label }}");
$.ajax({
url: url,
data: {
'work_area': workAreaId
},
success: function (data) {
$("#my-hidden-div").show(); // show it
$stationNumberField.html(data);
// Check the length of the options child elements of the select
if ($stationNumberField.find("option").length === 1) {
$stationNumberField.parent().hide(); // Hide parent of the select node
} else {
// If any option, ensure the select is shown
$stationNumberField.parent().show();
}
}
});
}
$("#id_work_area").change(loadStations);
$("#id_work_area").change();
</script>
{% endblock main %}
视图.py
def load_stations(request):
work_area_id = request.GET.get('work_area')
stations = Station.objects.filter(work_area_id=work_area_id).order_by('name')
return render(request, 'operations/station_number_dropdown_options.html', {'stations': stations})
网址.py
urlpatterns = [
url(r'enter-exit-area/$', views.enter_exit_area, name='enter_exit_area'),
url(r'ajax/load-stations/$', views.load_stations, name='ajax_load_stations'),
]
解决方案
最简单的方法是work_area
在启动 AJAX 请求之前测试 的值:
if (workAreaId !== "") {
$.ajax({
url: url,
data: {
'work_area': workAreaId
},
success: function (data) {
$("#my-hidden-div").show(); // show it
$stationNumberField.html(data);
// Check the length of the options child elements of the select
if ($stationNumberField.find("option").length === 1) {
$stationNumberField.parent().hide(); // Hide parent of the select node
} else {
// If any option, ensure the select is shown
$stationNumberField.parent().show();
}
}
});
}
推荐阅读
- c - 是否可以使用 tee 捕获标准输入?
- javascript - 如何在Angular 11中路由到PDF文件
- python-3.x - 我如何在“产卵”其他海龟的同时将海龟保持在前景中?
- mysql - 从数据库(MYSQL)中获取行时谷歌脚本超时
- html - 简单的 svg css 进度圈
- r - 如何使用 R 将周数转换为日期格式
- c# - 试图创建一个数据表,但我似乎无法按照我的意愿制作行
- windows - 在 Windows 上,PowerShell 会误解 mosquitto_sub 输出中的非 ASCII 字符
- python - 我有一个列表,我用 compragenson 删除索引还需要在删除索引后删除下一行
- c++ - 多个线程能否在 Monetdbe 中分别打开自己的数据库连接