Question

当我提交post方法表单时，给定输入字段值，而不是在提交时获取。如果我在Jquery中使用Ajax调用表单值序列化并正确提交，但在javascript中，使用FormData进行Ajax调用我收到错误。

任何人都可以解决我的问题。

错误：

错误：发送后无法设置标头。在   ServerResponse.OutgoingMessage.setHeader（_http_outgoing.js：356：11）



apollo.model.save.unsetkey：主键字段：名称必须具有值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="myForm" method="post" action="">
    <div>
        <label for="name">Enter name:</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="surname">SurName:</label>
        <input type="text" id="surname" name="surname">
    </div>
    <div>
        <label for="age">Age:</label>
        <input type="text" id="age" name="age">
    </div>
    <input type="submit" value="Submit!"  onclick="loadForm()">
</form>
<p id="demo"></p>

<script>
    function loadForm() {
        var xhttp = new XMLHttpRequest();
        var myForm = document.getElementById('myForm');
        var formData = new FormData(myForm);

        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML =
                        this.responseText;
            }
        };
        xhttp.open("POST", "http://127.0.0.1:8080/user", true);
        xhttp.setRequestHeader('Accept', 'application/json');
        xhttp.setRequestHeader('Content-Type', 'application/json');
        var data = JSON.stringify(formData);
        console.log('data = ', data);
        xhttp.send(data);
    }
</script>
</body>
</html>

Answer 1

您不会停止默认提交表单，因此当有人点击提交按钮时，表单将正常提交以及使用Ajax。解决方案是将侦听器绑定到表单提交并防止默认行为。

试试这个：

<vaadin-grid
            id="grid"
            aria-label="Remote Data Example"
            items="[[data]]"
            loading="{{loading}}"
            style="height: auto;"
            active-item="{{activeItem}}">
        <!--<vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>-->
        <vaadin-grid-column width="50px" flex-grow="0">
            <template class="header">#</template>
            <template>[[index]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">Process</template>
            <template>[[item.name]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">Start Time</template>
            <template>[[item.startTime]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">Owner</template>
            <template>[[item.group]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">Reactor</template>
            <template>[[item.reactor]]</template>
        </vaadin-grid-column>

        <vaadin-grid-column>
            <template class="header">Host Name</template>
            <template>[[item.hostName]]</template>
        </vaadin-grid-column>

    </vaadin-grid>

使用ajax提交表单时出错

1 个答案: