javascript - 在 jquery.ajax 之后更改 html 元素

Question

在通过 post 方法发送代码后，我尝试更改 HTML 元素#result

我尝试使用 .html()/.replace() 但它们不起作用。

这是我的代码

JS:

$("form input[type=submit]").click(function() {
  var your_selected_value = $('#bkb').val();
  $.ajax({
    type: "POST",
    url: 'getpro.php',
    data: {
      "selected": your_selected_value
    },

    success: function(data) {
      $('#result').html(data);


    },
    error: function(data) {

    }
  });
});

HTML:

<div id="lnw2">
  <form method="post" action='#'>
    <select id="bkb" name="selectpro">
      <?php loadcountry(); ?>
    </select>
    <input type="submit" name="submit" value="Get Selected Values" />
  </form>
</div>
<div id="result">
  <h3>test</h3>
</div>

PHP:

<? php
if (isset($_POST['selected'])) {
  $selected_val = $_POST['selected']; // Storing Selected Value In Variable
  echo "answer " .$selected_val; // Displaying Selected Value
}
?>

Answer 1

问题是，您一开始就没有阻止 form 提交，而是使用 preventDefault() 方法。

引用资料如下:

• https://api.jquery.com/event.preventdefault/

所以你的 jQuery 应该是这样的:

$("form input[type=submit]").click(function(e) {
    e.preventDefault();
    var your_selected_value = $('#bkb').val();
    $.ajax({
        type: "POST",
        url: 'getpro.php',
        data: {
            "selected": your_selected_value
        },

        success: function(data) {
            $('#result').html(data);


        },
        error: function(data) {

        }
    });
});