在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

更換

<input type="submit" name="submit" value="Get Selected Values" />

同

<input type="button" name="submit" value="Get Selected Values" />

Answer 2

問題是，您並沒有首先阻止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) {

        }
    });
});