AJAX返回响应但不附加响应div的HTML代码

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代码。 我做错了什么？

浏览器视图：

查看页面来源：

Answer 1

因为执行input回调后存在HTML 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文件中，只需使用$rezultat返回echo。

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