如何通過JavaScript Ajax POST發送HTML表單的表單參數？

我有一個HTML表單（見下面的代碼）與ajax按鈕。我想通過AJAX post發送表單參數。如何通過JavaScript Ajax POST發送HTML表單的表單參數？

我的問題是，我不知道如何定位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參數？

來源

2016-12-04 codingnighter2000

首先，使用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);

來源

2016-12-04 13:58:52

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); 
}

來源

2016-12-04 14:01:54

如何通過JavaScript Ajax POST發送HTML表單的表單參數？

回答

相關問題