Question

我有一个带有ajax按钮的html表单（见下面的代码）。我想通过AJAX post发送表单参数。

我的问题是我不确定如何定位HTML表单字段的值（用户插入的值）。

如何使用JavaScript通过ajax post发送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 post发送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 个答案: