如何在AJAX请求中获取并传递单选按钮的值

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    // 获取名为 "continentForm" 的表单
    const myForm = $('form[name="continentForm"]');

    // 监听表单的提交事件
    myForm.submit(function (e) {
        // 阻止表单的默认提交行为，这样页面就不会刷新
        e.preventDefault(); 

        // 获取被选中的单选按钮的值
        // ':checked' 选择器用于匹配所有被选中的元素
        // 'input[name="continent"]' 匹配所有名为 "continent" 的 input 元素
        let selectedContinent = $('input[name="continent"]:checked').val();

        // 检查是否获取到了值（用户是否进行了选择）
        if (selectedContinent) {
            console.log('选中的大洲是:', selectedContinent);
            // 接下来可以将这个值通过AJAX发送到服务器
        } else {
            console.log('请选择一个大洲。');
            // 可以给用户一个提示
        }
    });
</script>

<script>
    const myForm = $('form[name="continentForm"]');

    myForm.submit(function (e) {
        e.preventDefault(); // 阻止表单默认提交

        let selectedContinent = $('input[name="continent"]:checked').val();

        if (selectedContinent) {
            $.ajax({
                method: "GET", // 定义请求方法，可以是 "GET" 或 "POST"
                url: "/your-api-endpoint.php", // 服务器端处理请求的URL
                data: { continent: selectedContinent } // 要发送到服务器的数据
            })
            .done(function (res) {
                // 请求成功时执行的回调函数
                console.log('请求成功！服务器响应:', res);
                // 这里可以处理服务器返回的数据，例如更新页面内容
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                // 请求失败时执行的回调函数
                console.log('请求失败！状态:', textStatus, '错误:', errorThrown);
                // 可以向用户显示错误消息
            })
            .always(function () {
                // 请求完成（无论成功或失败）时执行的回调函数
                console.log('AJAX请求已完成。');
            });
        } else {
            alert('请选择一个大洲才能进行搜索。');
        }
    });
</script>