如何用控制台获取某些文本字段的输入值？

Question

我正在尝试获取某些文本字段的输入值，但是当调用控制台日志数据(我认为是在Ajax中定义的)时，它只返回整个html页面。

<script>
    /*<![CDATA[*/
    $(document).ready(function() {

        var submit = document.getElementById("submit");
        var firstName = $("#firstName").val();
        var LastName = $("#LastName").val();
        var Phone = $("#Phone").val();
        var Party = $("#Party").val();
        var dateof = $("#dateof").val();
        var Timeof = $("#Timeof").val();

    submit.onclick = function(){
        $.ajax({
            type: "GET",
            url: "reserve.html",
            data: firstName, LastName, Phone, Party, dateof, Timeof,
            cache: true,
            success: function(data){
                console.log(data);
            }
        });}})
;



    /*]]>*/
</script>

我有点懵，到底该如何发布结果来表示控制台日志(还没有设置服务器)？还是使用Ajax类型的POST吗？这和GET有什么区别？谢谢！

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要从HTML表单提交的数据（例如，通过JavaScript的event.preventDefault()函数）到服务器端，你需要使用XMLHttpRequest或fetch等方法。这里是一个简单的示例：

1. 使用XMLHttpRequest发送请求：

function sendFormToServer() {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'your-server-url');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    // 你可能还需要添加一些验证和错误处理逻辑

    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };

    xhr.send(`firstName=${firstName}&lastName=${LastName}&phone=${Phone}&party=${Party}&dateof=${dateof}&timeof=${Timeof}`);
}

1. 使用fetch发送请求：

async function sendFormToServer() {
    try {
        const response = await fetch('your-server-url', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `firstName=${firstName}&lastName=${LastName}&phone=${Phone}&party=${Party}&dateof=${dateof}&timeof=${Timeof}`
        });
        
        if (response.ok) {
            const data = await response.text();
            console.log(data);
        } else {
            throw new Error(response.statusText);
        }
    } catch (error) {
        console.error(error);
    }
}

在上述例子中，我们使用了XMLHttpRequest和fetch方法分别向服务器发送请求。sendFormToServer函数接受一个参数，用于触发请求。

注意：这些示例假设你的服务器支持POST方法，并且能够解析包含firstName, lastName, phone, party, dateof, 和 timeof键值对的URL编码后的字符串。如果服务器不支持POST或者格式化数据有特殊要求，请相应调整请求头和体部分。