js form表单提交 传参

在使用JavaScript提交表单时，我们需要使用form的submit()方法来触发表单的提交事件。传递参数的方法有多种。

1. GET方式传递参数：在form标签的action属性中设置要提交到的URL，并将参数直接附加在URL后面。例如：

<form id="myForm" action="http://example.com/myPage?param1=value1&param2=value2" method="GET">
    <!-- 表单内容 -->
</form>

在提交表单时，浏览器会将表单的数据与URL中的参数一起发送给服务器。

2. 使用JavaScript动态构建URL参数：可以使用JavaScript来动态构建URL参数，并通过设置form的action属性来传递参数。例如：

<form id="myForm" action="http://example.com/myPage" method="GET">
    <!-- 表单内容 -->
</form>

<script>
    var form = document.getElementById("myForm");
    form.action = "http://example.com/myPage?param1=" + encodeURIComponent(value1) + "&param2=" + encodeURIComponent(value2);
    form.submit();
</script>

在JavaScript中，我们可以使用encodeURIComponent()函数将参数值进行编码，以确保在URL中正确传递参数。

3. 使用POST方式传递参数：如果希望将参数作为请求的体部分发送，可以将表单的method属性设置为POST，并使用JavaScript来动态构建表单数据。例如：

<form id="myForm" action="http://example.com/myPage" method="POST">
    <!-- 表单内容 -->
</form>

<script>
    var form = document.getElementById("myForm");

    var formData = new FormData(form);
    formData.append("param1", value1);
    formData.append("param2", value2);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", form.action);
    xhr.send(formData);
</script>

在这种方法中，我们使用了FormData对象来存储表单数据，并使用XMLHttpRequest发送POST请求。通过append()方法，我们可以将额外的参数添加到formData对象中。

需要注意的是，使用这种方式传递的参数不会出现在URL中，而是作为请求的主体部分发送给服务器。