Question

单击此处：henriquecosta.kdhost.eu.org，输入数字00008513，然后选择单选按钮并输入，然后选择任何8位数字和类型。在为我付出了巨大的牺牲之后，这部分工作非常出色，我不是程序员。问题是，当另一个div加载时，前一个div被删除。我需要所有div保留在页面上，总共需要40 div。昨天我无法解决本地存储问题，我认为这是解决方案，之后脚本将完成。好吧，我对到目前为止所取得的成就感到满意。如果有人有给我的提示，我将不胜感激！谢谢。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<script>
var form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // <--- isto pára o envio da form

  var url = this.action; // <--- o url que processa a form
  var formData = new FormData(this); // <--- os dados da form
  var ajax = new XMLHttpRequest();
  ajax.open("GET", url, true);
  ajax.onload = function() {
    if (ajax.status == 200) {
      var dados = JSON.parse(ajax.responseText);
      alert('Dados enviados:\n' + JSON.stringify(dados, null, 4));
    } else {
      alert('Algo falhou...');
    }
  };
  ajax.send(formData);
});

</script>
<form action="index.php">
Cartao:<input size="7" name="cartao" value="" required="" pattern="[0-9]{8}" type="text">
<input value="01" name="armario" type="radio" />01
<input value="02" name="armario" type="radio" />02
<input value="03" name="armario" type="radio" />03
<button type="submit">Enviar</button>
</form>

<table width=100% border=1>
<tbody>
<tr align=center valign="middle">
<td width=33%><div id="01"></div></td>
<td width=33%><div id="02"></div></td>
<td width=33%><div id="03"></div></td>
</tr>
</tbody>
</table>


<?php
if (isset($_GET['cartao'])):
$radioValue = $_GET['armario'];
$radiovalor = '"'.$radioValue.'"';
$file = 'banco.txt';
$searchfor = $_GET['cartao'];
//header('Content-Type: text/plain');
$contents = file_get_contents($file);
$pattern = preg_quote($searchfor, '/');
$pattern = "/^.*$pattern.*\$/m";
            if(preg_match_all($pattern, $contents, $matches)):
            json_encode($matches[0]);
            $resultado = str_replace(array('"',' \r','[', ']'), '', htmlspecialchars(json_encode($matches[0]), ENT_NOQUOTES));  
else:
            $resultado = $_GET['cartao'];
   endif;
        else:
           echo '';
           endif;

// file_exists
if (isset($_GET['cartao'])) {
$path = './fotos/';
$recebe = $_GET['cartao'];
$img = $path.$recebe.".jpg";
if (file_exists($img)) {
          $foto = '"<img width=80 height=80 src="'.$img.'">';                          // existe
} else {  $foto = '&nbsp;&nbsp;<img width=80 height=80 src="./fotos/ausente.jpg">';    // não existe
}
}
?>

<script>
var x = '<?php echo $resultado, $foto; ?>'; 
var z = '<?php echo $radioValue; ?>';
document.getElementById(z).innerHTML += x;
</script>

</body>
</html>

Answer 1

您的代码中有一些您可能不知道的问题。

首先，每当您单击“ Enviar”按钮时，整个页面都会重新加载，因为您的JavaScript不能正确阻止默认操作。

要完成此操作，请在函数末尾返回false：

var form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // <--- isto pára o envio da form

  var url = this.action; // <--- o url que processa a form
  var formData = new FormData(this); // <--- os dados da form
  var ajax = new XMLHttpRequest();
  ajax.open("POST", url, true);
  ajax.onload = function() {
    if (ajax.status == 200) {
      var dados = JSON.parse(ajax.responseText);
      alert('Dados enviados:\n' + JSON.stringify(dados, null, 4));
    } else {
      alert('Algo falhou...');
    }
  };
  ajax.send(formData);
  return false;
});

这样做，将不会重新加载整个页面。

第二，您的服务器始终返回完整的html页面，而不是区分是通过第一次打开页面来访问url还是收到了您的脚本请求。

如果isset($_POST['cartao']为true，则请求来自您的javascript，您应该返回一个包含相关数据的JSON对象，并在javascript中构建html并将其附加到表中。

我知道，如果您不是程序员，这一切听起来会有些混乱，但我希望我能为您指明正确的方向。
从服务器返回JSON对象后，我们很乐意帮助您使用javascript呈现HTML。

当一个div加载时，另一div被删除

1 个答案: