0

使用 AJAX 将表单信息发送到 php 处理页面。执行 var_dump 显示值以“0”的形式出现，即使输入的数字不是。即使这些值被指定为“(int)”，PHP7 也会返回“在 /process_measurements.php 第 20 行遇到的非数字值”。

如果我按如下方式显式地对它们进行类型转换，那么 PHP 错误就会消失，但是，var_dump 显示它们以 0 的形式出现......而不是输入到表单中的值，因此无论在表单中输入的值如何，计算结果都是 0。

$length = (int)$length;
$width = (int)$width;
$height = (int)$height;

代码显示“遇到非数字值”错误：

<?php
  function is_ajax_request() {
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
      $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
  }

  (int)$length = isset($_POST['length']) ? (int) $_POST['length'] : '';
  (int)$width = isset($_POST['width']) ? (int) $_POST['width'] : '';
  (int)$height = isset($_POST['height']) ? (int) $_POST['height'] : '';

  var_dump($length, $width, $height);

  $volume = $length * $width * $height;

  if(is_ajax_request()) {
    echo $volume;
  } else {
    exit;
  }
?>

HTML and JS for further clarification:

    <div id="measurements">
      <p>Enter measurements below to determine the total volume.</p>
      <form id="measurement-form" action="process_measurements.php" method="POST">
        Length: <input type="text" name="length" /><br />
        <br />
        Width: <input type="text" name="width" /><br />
        <br />
        Height: <input type="text" name="height" /><br />
        <br />
        <input id="html-submit" type="submit" value="Submit" />
        <input id="ajax-submit" type="button" value="Ajax Submit" />
      </form>
    </div>

<script>
      var result_div = document.getElementById("result");
      var volume = document.getElementById("volume");

      function postResult(value) {
        volume.innerHTML = value;
        result_div.style.display = 'block';
      }

      function clearResult() {
        volume.innerHTML = '';
        result_div.style.display = 'none';
      }

      // omits textareas, select-options, checkboxes, radio buttons
      function gatherFormData(form) {
        var inputs = form.getElementsByTagName('input');
        var array = [];
        for (i = 0; i < inputs.length; i++) {
          var inputNameValue = inputs[i].name + '=' + inputs[i].value;
          array.push(inputNameValue);
        }
        return array.join('&');
      }

      function calculateMeasurements() {
        clearResult();

        var form = document.getElementById("measurement-form");
        var action = form.getAttribute("action");

        // gather form data
        var form_data = gatherFormData(form);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', action, true);
        // do not set content-type with FormData
        //xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.onreadystatechange = function () {
          if(xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            console.log('Result: ' + result);
            postResult(result);
          }
        };
        xhr.send(form_data);
      }

      var button = document.getElementById("ajax-submit");
      button.addEventListener("click", calculateMeasurements);

    </script>
4

1 回答 1

0

您似乎应该在代码中取消注释以下内容：

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

否则，使用 POST 发送的数据似乎没有像您期望的那样正确解析。至少有了这个头 $_POST 包含必要的数据。

于 2017-02-13T20:54:08.977 回答