javascript - AJAX 返回响应，但不将响应中的 HTML 代码附加到 div

Question

<强> html :

<form method="POST">
<input type="text" name="unu" id="unu">
<input type="text" name="doi" id="doi">
<button type="button" onclick="check()">OK</button>
</form>
<div id="show_panels"></div>

<强> jquery :

function check() {
  $.ajax({
    type: "POST",
    url: "2.php",
    data: $("form").serialize(),
    success: function(result) {
      $('#show_panels').html(result);
    },
    error: function(result) {
      console.log("Eroare:");
      console.log(result);
    }
  });

  var result_input = document.getElementById('result');
  console.log(result_input.value);
}

<强> php :

<?php 
$var_unu = $_POST['unu'];
$var_doi = $_POST['doi'];
$rezultat = $var_unu + $var_doi;
?>
<input type='text' value='<?php echo $rezultat ?>' id='result'/>

如您所见，我正在尝试进入我的控制台(用于测试)，返回带有 id 结果的输入值，但控制台返回:

Uncaught TypeError: Cannot read property 'value' of null.

在页面源代码中我没有 html我的代码 ajax返回的输入。我做错了什么？

浏览器 View :

查看页面源代码:

Answer 1

因为 HTML input result 在 success 回调执行后存在。

试试这个:

function check() {
  $.ajax({
    type: "POST",
    url: "2.php",
    data: $("form").serialize(),
    success: function(result) {
      $('#show_panels').html(result);

      var result_input = document.getElementById('result');
      console.log(result_input.value);
    },
    error: function(result) {
      console.log("Eroare:");
      console.log(result);
    }
  });
}

感谢@Titus 的更正。

<小时/>

更新:

如果您需要重用返回值，则需要进行一些更改:

html :在表单中添加 HTML input result。

<form method="POST">
  <input type="text" name="unu" id="unu">
  <input type="text" name="doi" id="doi">
  <button type="button" onclick="check()">OK</button>
  <input type="text" value="" id="result" />
</form>
<div id="show_panels"></div>

<强> jquery : 打印 HTML input result 中的返回值。

function check() {
  $.ajax({
    type: "POST",
    url: "2.php",
    data: $("form").serialize(),
    success: function(result) {
      $('#show_panels').html(result);

      document.getElementById('result').value = result;
    },
    error: function(result) {
      console.log("Eroare:");
      console.log(result);
    }
  });
}

<强> php :在PHP文件中，只需使用echo返回$rezultat即可。

<?php 
$var_unu = $_POST['unu'];
$var_doi = $_POST['doi'];
$rezultat = $var_unu + $var_doi;
echo $rezultat;
?>