Question

我正在创建一个将表单发布到服务器的示例，我想将一个对象或表单发送到服务器，但我发现的唯一示例显示手动创建post变量，如查询字符串：< / p>

例如[1]：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford"); // can I pass in an object here?

我看到的问题是我必须一个接一个地手动添加每个表单项。我有超过100个表格项目。我该如何处理文件附件？我是否还需要手动编码表单元素值？

我不想要使用JQuery。

更新：以下是根据建议使用FormData发送表单时发送的内容：

-----------------------------1663011888741135911866103577 
Content-Disposition: form-data; name="id" 

435 
-----------------------------1663011888741135911866103577 
Content-Disposition: form-data; name="slug"


-----------------------------1663011888741135911866103577 
Content-Disposition: form-data; name="nonce" 

1ef7445783 
-----------------------------1663011888741135911866103577 
Content-Disposition: form-data; name="title" 

Updated title 
-----------------------------1663011888741135911866103577 
Content-Disposition: form-data; name="content" 

updated content 
-----------------------------1663011888741135911866103577 
Content-Disposition: form-data; name="message" 

Updating post... 
-----------------------------1663011888741135911866103577--

以上是上述服务电话的代码：

function updatePost() {
    if (postId==null) { return alert("Please create a post before calling update post"); }
    var request = getRequest();
    document.getElementById("responseTextArea").value = "Updating post...";

    request.onreadystatechange = function() {
        var query = "/blog/?json=posts/update_post";

        if (request.readyState==4 && request.status==200) {
            var json = JSON.parse(request.responseText);
            var formValues = "nonce="+json.nonce+"&title=UpdatedPost" + "&content=Content" + "&id="+postId;
            var newRequest = getRequest();
            document.getElementById("nonce").value = json.nonce;
            document.getElementById("id").value = postId;
            document.getElementById("slug").value = slug;
            query += "&id=" + postId;
            console.log(query);
            var form = new FormData(document.getElementById('myForm'));

            newRequest.onreadystatechange = function() {
                if (newRequest.readyState==4 && newRequest.status==200) {
                    document.getElementById("responseTextArea").value = newRequest.responseText;
                }
            }

            // now that we have our token post data back to the server
            newRequest.open("POST", query, true);
            newRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            newRequest.send(form);
        }
    }

    // get token first
    request.open("GET","/blog/?json=get_nonce&controller=posts&method=update_post", true);
    request.send();
}

<div id="mainContent" style="width:500px;position:relative;display:block;margin:0 auto;">
    <p>
        <form id="myForm" name="myForm">
            <input type="hidden" name="id" id="id"/>
            <input type="hidden" name="slug" id="slug"/>
            <input type="hidden" name="nonce" id="nonce"/>
            <input type="hidden" name="title" id="title" value="Updated title"/>
            <input type="hidden" name="content" id="content" value="updated content"/>
            <button type="button" onclick="getData('/blog/?json=info')">Get JSON API Info</button>
            <button type="button" onclick="getData('/blog/?json=get_recent_posts')">Get Recent Posts</button>
            <button type="button" onclick="createPost()">Create Post</button>
            <button type="button" onclick="updatePost()">Update Post</button>
            <br/><textarea id="responseTextArea" type="text" name="message" style="width: 100%;height:300px"></textarea><br/><br/>
        </form>
    </p>
</div>

[1] http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp。

Answer 1

XMLHttpRequest对象将接受的参数列表如下：

void send();
void send(ArrayBufferView data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

使用FormData选项：

var formData = new FormData( document.getElementById("my-form-id") );
xmlhttp.send(formData);

编辑 - 来自OP的信息：

当您传入使用表单而不是表单元素的formData时，它会使用表单指定的方法而不是open（）调用中指定的方法。当我将表单中的方法设置为“POST”而不是将其留空时，它可以工作

Answer 2

您可以使用以下代码迭代表单中的元素：form.getElementsByTagName('input')或更好form.elements

Answer 3

编辑：为什么选择downvote？是的，这是旧技术，但它做了他要求的

使用网络表格相对简单

<form action="iceCream.php>
   <input name="favouriteIceCream"/>
   <input name="favouriteTopping"/>
   <input type="submit"/>
</form>

当用户点击提交按钮时，将发送一个请求

POST iceCream.php
     favouriteIceCream=chocolate&favouriteTopping=sprinkles

有没有办法通过传递对象或表单将数据发布到服务器？

3 个答案: