时间戳

首页 > 解决方案 > 如何使用 AJAX 从 HTML 页面的输入中将参数传递到 c++ 文件中？

javascript - 如何使用 AJAX 从 HTML 页面的输入中将参数传递到 c++ 文件中？

问题描述

因此，我正在学习如何使用 HTML 和 Javascript，并且我想从用户那里获取输入以将其传递到其他人制作的 c++ 文件中。由于未知原因，它无法访问 c++ 程序，也没有传入参数。

这是代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href= "a12.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src= "a12js.js"></script>
        <title>Mileage Calculator</title>
    </head>
    <body>
        <h1>Mileage Calculator</h1>
        <div id="input">
          <form>
            <label>Starting City: *required</label>
            <input id="startCity" name="startCity">
            <label>Starting State: *required</label>
            <input id="startState" name="startState">
            <label>Ending City: *required</label>
            <input id="endCity" name="endCity">
            <label>Ending State: *required</label>
            <input id="endState" name="endState"><br></br>
            <button type="button" onclick="loadFile()">Submit</button>
          </form>
        </div>
        <div>
            <table id="displayInfo"></table>
        </div>
    </body>

function loadFile(){
    alert("This works");
    var txt ="";
    var startCity = String(document.getElementById("startCity").value);
    var startState = String(document.getElementById("startState").value);
    var endCity = String(document.getElementById("endCity").value);
    var endState = String(document.getElementById("endState").value);
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var obj = this.responseText;
        var data = JSON.parse(obj);
        txt +="<tr><th>Starting Location<th><th>End Location<th><th>Miles in Between<th><tr>";
        txt +="<tr><td>" + data.trip.startCity + ", " + data.trip.startState;
        txt += "<td><td>" + data.trip.endCity + ", " + data.trip.endState + "<td>";
        txt += "<td>" + data.trip.miles + "<td><tr>";
        document.getElementById("displayInfo").innerHTML = txt;
      }
    }
    xhttp.open("GET", "/cgi-bin/cs213/mileageAjaxJSON? startCity="+startCity+"&startState="+startState+"&endCity="+endCity+"&endState="+endState, true);
    xhttp.send();
}

我不知道我是否正确地将变量添加到请求中的 url 中？

标签： javascripthtml

解决方案

我已经看到您的代码有一些错误。让我给一些错误修复。

HTML：

  1. 是<br>一个自闭合标签。根据您可以使用的 HTML 规范： <br>或者XHTML 是<br />什么时候。DOCTYPE所以你的 HTML 标记必须是这样的：
<h1>Mileage Calculator</h1>
<div id="input">
  <form>
    <label>Starting City: *required</label>
    <input id="startCity" name="startCity">
    <label>Starting State: *required</label>
    <input id="startState" name="startState">
    <label>Ending City: *required</label>
    <input id="endCity" name="endCity">
    <label>Ending State: *required</label>
    <input id="endState" name="endState"><br>
    <button id="btnLoadFile" type="button">Submit</button>
  </form>
</div>
<div>
  <table id="displayInfo"></table>
</div>
  1. 使用不显眼的 JavaScript 是一种很好的做法。这里我们有一个参考：不显眼的 JavaScript 原则。您可以将id属性添加到您的<button>. 像这样：那么您可以通过使用其属性通过<button id="btnLoadFile" type="button">Submit</button>编程控制此元素的行为，而无需直接使用。像这样的东西：iddocument.getElementById()onclick="loadFile()"
var btnLoadFile = document.getElementById("btnLoadFile");
btnLoadFile.onclick = function() {
  // Some code...
};

JavaScript： 在这种情况下使用 EcmaScript 5 标准。

  1. 辅助函数来执行异步请求。首先，您需要一个辅助函数来使用XMLHttpRequest对象执行异步请求。像这样的东西：
var newXHR = null; // Once initialized with the XMLHttpRequest object, you can use the abort() method from anywhere in the code.

function sendXHR(options, callback) {
  newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
  newXHR.open(options.type, options.url, true);
  newXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  newXHR.send(options.data);
  newXHR.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      callback(this.response);
    }
  };
}

使用上述功能，您可以通过设置一些选项（如 url 或 http 方法）来发出异步请求。

sendXHR({
  url: url,
  type: "GET"
}, function(response) {
  // Gets the response from the asynchronous request by using XMLHttpRequest object.
  console.log(response);
});
  1. 带有结果的渲染表：您错过了一些结束标签<tr></tr>：<th></th>和<td></td>。您可以txt使用以下代码连接变量：
txt += "<tr><th>Starting Location</th><th>End Location</th><th>Miles in Between</th><tr>";
txt += "<tr><td>";
txt += data.trip.startCity;
txt += ", ";
txt += data.trip.startState;
txt += "</td><td>";
txt += data.trip.endCity;
txt += ", ";
txt += data.trip.endState;
txt += "</td><td>";
txt += data.trip.miles;
txt += "</td></tr>";

你可以在这里看到完整的源代码：

(function() {

  var newXHR = null; // Once initialized with the XMLHttpRequest object, you can use the abort() method from anywhere in the code.

  function sendXHR(options, callback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.open(options.type, options.url, true);
    newXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    newXHR.send(options.data);
    newXHR.onreadystatechange = function() {
      if (this.status === 200 && this.readyState === 4) {
        callback(this.response);
      }
    };
  }

  window.onload = function() {
    var btnLoadFile = document.getElementById("btnLoadFile");
    btnLoadFile.onclick = function() {

      alert("This works");

      // Declare variables.
      var sCity = document.getElementById("startCity");
      var sState = document.getElementById("startState");
      var eCity = document.getElementById("endCity");
      var eState = document.getElementById("endState");

      // Validate variable availability of the HTML element.
      if (sCity && sState && eCity && eState) {

        // Build url to perform HTTP Request by using XMLHttpRequest object.
        var url = "/cgi-bin/cs213/mileageAjaxJSON?startCity=";
        url += sCity.value;
        url += "&startState=";
        url += sState.value;
        url += "&endCity=";
        url += eCity.value;
        url += "&endState=";
        url += eState.value;

        sendXHR({
          url: url,
          type: "GET"
        }, function(response) {

          var obj = response;
          var data = JSON.parse(obj);
          var txt = "";

          txt += "<tr><th>Starting Location</th><th>End Location</th><th>Miles in Between</th><tr>";
          txt += "<tr><td>";
          txt += data.trip.startCity;
          txt += ", ";
          txt += data.trip.startState;
          txt += "</td><td>";
          txt += data.trip.endCity;
          txt += ", ";
          txt += data.trip.endState;
          txt += "</td><td>";
          txt += data.trip.miles;
          txt += "</td></tr>";
          document.getElementById("displayInfo").innerHTML = txt;
        });
      }
    };
  };
}());
<h1>Mileage Calculator</h1>
<div id="input">
  <form>
    <label>Starting City: *required</label>
    <input id="startCity" name="startCity">
    <label>Starting State: *required</label>
    <input id="startState" name="startState">
    <label>Ending City: *required</label>
    <input id="endCity" name="endCity">
    <label>Ending State: *required</label>
    <input id="endState" name="endState"><br>
    <button id="btnLoadFile" type="button">Submit</button>
  </form>
</div>
<div>
  <table id="displayInfo"></table>
</div>

推荐阅读