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

总而言之，我单击 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() and .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} 加载文件。

希望对您有所帮助！

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

Change service call URL from html Form?

html

javascript

jquery

amcharts