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) {

        }
    });
});

在jquery.ajax之后更改html元素

2 个答案: