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中的输入值替换这两个值。此服务返回将随后绘制到地图的坐标。

总而言之，我点击了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() 和 {{ 3}} 分别定位它们。

您希望在单击按钮后将事件处理程序附加到通过两个变量的提交，然后使用字符串连接将两个<input>变量与URL结合使用：

＆＃13;

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

＆＃13;

一旦点击按钮，这将从http://OUR_SERVER/Service1.svc/GetSales/{from_date}/{to_date}加载文件。

希望这有帮助！

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

1 个答案: