如何通过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表单的表单参数？

回答

相关问题