如何通過javascript Ajax POST發送html表單的表單參數？

Question

我有一個帶有ajax按鈕的html表單（請參見下面的代碼）。 我想通過AJAX發布發送表單參數。

我的問題是我不確定如何定位HTML表單字段的值（用戶插入的值）。

如何使用JavaScript通過ajax發布發送HTML參數？

僅供參考：我不想使用formData。

這是代碼：

<body>

    <form id="my-form-id" method="post" action="Calendar_form3.php">

        Year:<INPUT NAME="gregorian_year" SIZE=4 MAXLENGTH=4 value="2016">(1-6000)
        Latitude: <INPUT NAME="latitude" value="40.7127">
        Longitude: <INPUT NAME="longitude" value="-74.0059">
        <button id="ajax-button" type="button">Ajax button</button>

    </form>

    <script>
        function displayCalendar() {
            var divtarget = document.getElementById("main");


            var xhr = new XMLHttpRequest();
            xhr.open('post', 'Calendar_form3.php', true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            xhr.onreadystatechange = function () {
                console.log('readyState: ' + xhr.readyState);
                if (xhr.readyState == 2) {
                    divtarget.innerHTML = 'LOADING';
                }
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var text = xhr.responseText;

                    divtarget.innerHTML = text;
                }
            }
            xhr.send(gregorian_year=???&latitude=???&longitude=???);
        }

        var button = document.getElementById("ajax-button");
        button.addEventListener("click", displayCalendar);
    </script>

    <div id='main'>
        result here
    </div>
</body>

這是Calendar_form3.php頁面中的代碼：

<?php
echo "ajax working!!";
echo $_POST['gregorian_year'] . $_POST['latitude']. $_POST['longitude'];
?>

我如何完成此代碼行：

xhr.send(gregorian_year=???&latitude=???&longitude=???);

換句話說，給定我的HTML表單，如何使用JavaScript通過AJAX發布發送html參數？

Answer 1

function displayCalendar() {
    var divtarget = document.getElementById("main");
    var xhr = new XMLHttpRequest();
//Get Input Values
    var lon = document.getElementsByName('longitude')[0].value;
    var lat = document.getElementsByName('latitude')[0].value;
    var ger = document.getElementsByName('gregorian_year')[0].value;
//make the params string
    var params = "latitude=" + lat + "&longitude=" + lon + "&gregorian_year=" + ger;
//Initialize as POST
    xhr.open("POST", 'Calendar_form3.php', true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
        console.log('readyState: ' + xhr.readyState);
        if (xhr.readyState == 2) {
            divtarget.innerHTML = 'LOADING';
        }
        if (xhr.readyState == 4 && xhr.status == 200) {
            var text = xhr.responseText;
            divtarget.innerHTML = text;
        }
    }
//Send
    xhr.send(params);
}

Answer 2

首先，使用getElementsByName() DOM方法獲取gregorian_year ，緯度和經度字段值，如下所示：

var gregorian_year = document.getElementsByName("gregorian_year")[0].value;
var latitude = document.getElementsByName("latitude")[0].value;
var longitude = document.getElementsByName("longitude")[0].value;

然后在AJAX的send()方法中使用這些變量，如下所示：

xhr.send("gregorian_year="+gregorian_year+'&latitude='+latitude+'&longitude='+longitude);

如何通過javascript Ajax POST發送html表單的表單參數？

問題描述

2 個解決方案

解決方案1
2 2016-12-04 14:01:54

解決方案2
1 2016-12-04 13:58:52

如何通過javascript Ajax POST發送html表單的表單參數？

問題描述

2 個解決方案

解決方案1 2 2016-12-04 14:01:54

解決方案2 1 2016-12-04 13:58:52

解決方案1
2 2016-12-04 14:01:54

解決方案2
1 2016-12-04 13:58:52