Django中如何将JavaScript变量通过GET请求传入URL提交给后端视图

你当前的跳转链接写死了GET参数radio_id=checked，无论JavaScript是否拿到选中的单选框ID，点击链接提交的参数都是固定字符串checked，后台尝试将这个字符串转为数字时就会触发报错。

1. 修改HTML跳转链接 #

给a标签加唯一ID便于JS操作，删除写死的GET参数：

<a id="fixIssueLink" href="{% url  'maintenance_issue_fix' %}">
    <img src="{% static 'images/maintenance_list.jpg' %}">
</a>

{% for list in issue_list %}
 <tr style="text-transform: capitalize;">
    <td style="text-align:center;">
      <input name="radio_id" type="radio" value="{{list.id}}">
    </td>
 </tr>
{% endfor %}

注：原单选框重复使用id="radio_id"不符合HTML规范，直接删除即可，不影响功能

2. 修改JavaScript逻辑 #

每次选中单选框时，动态拼接参数更新跳转链接：

$(function(){
    // 提前缓存基础链接，避免重复读取
    const baseLink = $('#fixIssueLink').attr('href');
    $('input[type="radio"]').click(function(){
        if ($(this).is(':checked'))
        {
          const checkedId = $(this).val();
          // 把选中的ID拼接为GET参数更新链接
          $('#fixIssueLink').attr('href', `${baseLink}?radio_id=${checkedId}`);
        }
    });
});

3. 可选优化（避免未选单选框直接点击报错） #

可以给链接增加点击校验，未选中时拦截跳转提示用户：

$('#fixIssueLink').click(function(e){
    if(!$('input[type="radio"]:checked').length) {
        e.preventDefault();
        alert('请先选择要处理的条目');
    }
})

修改完成后选中单选框，再点击图片跳转，后台就能正常获取到数字类型的radio_id，不会再触发类型转换报错。

内容的提问来源于stack exchange，提问作者HudsonBarroso