javascript - 从 html 表单更改服务调用 URL？

Question

我的 html 相对简单:我在每个 input 中输入一个值，然后单击 button 进行搜索。它看起来像这样:

<table>
    <tr>
        <td>
            <select id="myDropDown" onchange="FillMap(this)">
              <option value="11-01-2017">11-01-2017</option>
              <option value="12-01-2017">12-01-2017</option>
            </select>
        </td>
        <td>
            <input type="text" size="5" name="FromDate">
        </td>
        <td>
            <input type="text" size="5" name="ToDate">
        </td>
        <td>
            <button type="button">Search</button>
        </td>
    </tr>
</table>
    <div>
        <div id="MapDiv" ></div>
    </div>

我的 JavaScript 如下所示。如您所见，对服务 GetSales 的调用具有固定参数(2018-01-21 和 2018-02-05)。我需要将这两个值替换为 html 中的输入值。该服务返回坐标，然后将其绘制到 map 上。

总而言之，我单击 html 按钮，将使用 html 表单中输入的值作为参数来调用 Web 服务:

function FillMap(control)
{

    portsMap.dataLoader.url = "http://OUR_SERVER/Service1.svc/GetLocationTotals/" + control.value;
    portsMap.dataLoader.loadData();
}
var portsMap;
AmCharts.loadFile( "http://OUR_SERVER/Service1.svc/GetSales/2018-01-21/2018-02-05", {}, function( data ) {
    var latlong = AmCharts.parseJSON(data);

portsMap = AmCharts.makeChart( "MapDiv", {
  "type": "map",
  "dataLoader": {
    "url": "http://OUR_SERVER/Service1.svc/ShowFailures/11-01-2017",
    "postProcess": function(data, config, chart) {
      var areas = data.areas;
            console.log(areas);
      data.images = [];
      for (var i in areas) {
            for (var x in latlong) {    
                if (areas[i].id == latlong[x].location) {   
                    circlelat = latlong[x].latitude;    
                    circlelong = latlong[x].longitude;  
                      data.images.push( {   
                      "longitude": circlelong,  
                      "latitude": circlelat,    
                      "title": areas[i].id, 
                      "value": areas[i].value,  
                      "description": sitetext
                        });                         
                }   
            }   
      }
    return data;
    }
  },
"listeners": [{
  "event": "clickMapObject",
  "method": function(e) {
    ChangeUrl(e.mapObject.id);
  }
}]
} );
} );

问题是我不完全知道如何将参数传递给 AmCharts.loadFile。我能够通过函数调用更改 dataLoader，但我不确定是否可以将其与 AmCharts.loadFile 一起使用。

谢谢。

Answer 1

您的 <input> 上都没有任何唯一标识符元素或您的提交按钮，但幸运的是您可以使用 .getElementsByName() 和 .getElementsByTagName() 分别针对他们。

您需要将一个事件处理程序附加到单击按钮后传递两个变量的提交，然后将两个 <input> 结合起来。使用字符串连接的 URL 变量:

var submit = document.getElementsByTagName("button")[0];
submit.addEventListener("click", submit);

var from_date = document.getElementsByName("input")[0];
var to_date = document.getElementsByName("input")[1];

function submit(from_date, to_date) {
  AmCharts.loadFile("http://OUR_SERVER/Service1.svc/GetSales/" +
    from_date + " / " + to_date, {}, function(data) {}
  });
}

这将从 http://OUR_SERVER/Service1.svc/GetSales/{from_date}/{to_date} 加载文件单击按钮后。

希望这有帮助!