如何使用Javascript提交2份表格/ 1份表格？ 1表格使用“ GET”，其他使用“ POST”

Question

如果1個表單使用“ GET”方法而另一個表單使用“ POST”，如何提交同一頁面上的2個表單。 每個表格具有相同的操作，並轉到相同的下一頁。 需要幫忙。 謝謝大家的幫助。

我怎樣才能得到下面這兩種使用一個按鈕提交不同方法的表格？

<form method="POST" id="Form1" action="nextpage.html">

<input type="text" size="50" name="text_input">

<input type="submit" value="Submit">



<form method="GET" id="Form2" action="nextppage.html">

<input type="text" size="50" name="text_input">

<input type="submit" value="Submit">

Answer 1

一種實現方法是向每個表單添加一個隱藏字段。 例如，

<form action="action.php" method="get">
    <input type="hidden" name="id"  value="form1">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

<form action="action.php" method="post">
    <input type="hidden" name="id" value="form2">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

在腳本中，您只需檢查一下id的值是多少即可。 另一種方法是檢查發送到服務器的請求是發布還是獲取。

Answer 2

遞歸使用AJAX或將所有數據收集為一種形式並提交該形式。

一個簡單的表單提交將在第一個實例處重定向您的頁面，而第二個實例中的數據將丟失。 如果可以完全控制服務器端，則可以僅提交包含POST數據的表單（在我的示例中為form2 ），並且可以在提交之前將GET應用於action屬性。

我的意思是：

<form name="form1" id="form1" action="index.php" method="GET">
    <input type="text" name="foo" value="bar" />
    <input type="submit" value="Submit" />
</form>

<form name="form2" id="form2" action="index.php" method="POST">
    <input type="text" name="foo" value="bar" />
</form>

<script type="text/javascript">
    var f = document.getElementById('form1');
    f.onsubmit = function() {
        var t = f.getElementsByTagName('input'),
            l = t.length,
            i = 0,
            r = [];
        for (i = 0; i < l; i++) {
            if (!t[i].name) continue;
            r.push(t[i].name + '=' + encodeURIComponent(t[i].value));
        }
        var p = document.getElementById('form2');
        if (r.length) p.action += '?' + r.join('&');
        p.submit();
        return false;
    }
</script>

但是AJAX是一種更好，更優雅的解決方案，可以在需要時使用新功能輕松擴展，因此我投票贊成這種異步方式。

Answer 3

用一個按鈕使用兩種形式確實沒有任何意義，也不是有效的html。

Answer 4

我會使用您的POST表單提交，然后發布到該頁面，但不要發布到頁面nextpage.html，而是發布到類似“ nextpage.html？var1 = value＆var2 = value”的頁面
您將以以下方式使用javascript：

<form method="POST" id="Form1" action="nextpage.html">
<input type="text" size="50" name="text_input">
<input type="button" value="Submit" onclick="push();">
</form>

<form method="GET" id="Form2" action="nextpage.html">
<input type="text" size="50" name="text_input" id="name_input">
<input type="button" value="Submit" onclick="push();">
</form>

<script>
function push() {
    document.getElementById('Form1').action = "nextpage.html?text_input="+document.getElementById('name_input').value;
    document.getElementById('Form1').submit();
}
</script>

這應該工作，盡管比較混亂，並且要當心有人將？，＆，=或其他非字母數字字符放入您要發送到URL欄的任何內容中。 GET和POST變量將發送到頁面。

Answer 5

您應該了解一些有關HTTP如何工作的知識。 瀏覽器執行“請求”，通常為GET或POST，響應主體被解析為HTML並顯示在Web瀏覽器中。

同時發布兩個表單沒有任何意義，因為這啟動了兩個HTTP請求。 應使用哪一個作為瀏覽器中的新位置？