在更改选择菜单后防止页面重新加载答案

【问题标题】：Prevent page from reloading after onchange a select menu在更改选择菜单后防止页面重新加载
【发布时间】：2017-06-14 11:00:56
【问题描述】：

如果这是一个非常简单的问题，我深表歉意，但是我无法找到任何答案或不知道我在这里做错了什么。另外我是 ajax 和 jquery 的新手。感谢您提前提供帮助！

我有一个选择菜单，我想在更改时提交到页面我有以下内容：

<from action="" method="post">
<select name="option">
<option value="a">a </option>
<option value"b">b </option>
<option value"c">c</option>
</select></form>

和

<script type="text/javascript" >
$('#option').change, (function(e)  
{ 
   e.preventDefault();
   $.ajax({
        type: 'post',
        url: "",
        data: $("form.option").serialize(),
        success: function() {     
        }
    });
    return false;
});
</script>

并检查是否已提交

<?php
if (isset($_POST['option'])) {
    echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
}
?>

表单提交正常，但是页面仍然在更改时重新加载，有没有办法停止页面的重新加载？任何帮助将不胜感激！

【问题讨论】：

onsubmit return false.
option 是元素的name 不是id 并且您正在将element 与form 中的class 名称序列化为不存在的$("form.option") ..
@Pyromonk 那会去哪里？抱歉不知道
您发布的代码中没有提交。不清楚您的要求。
@hakre.. 哦，但是根据您的说法，这并没有回复 jquery selectors。如果我错了，请纠正我。..

标签： javascript php jquery ajax ajaxform

【解决方案1】：

试试这个代码

<?php
if (isset($_POST['option'])) {
    echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
    exit;
}

?>    
<form action="" method="post">
    <select name="option" id="option">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
    </select>
</form>
<div id="msg">
</div>
<script type="text/javascript" src="../library/jquery-3.2.1.min.js"></script>
<script type="text/javascript" >
$('#option').change(function(e)  
{ 
    e.preventDefault();  
    var data=""; 
    data=$("#option").val();

   $.ajax({

        type: 'post',
        url: "",
        data: {option:data},
        success: function(result) {
            $('#msg').html(result);
        }
    });
    return false;

});

</script>

您的输出将在div 标签中，其中option 提交form

也可以显示在alert

alert(result);

或在开发者工具中使用控制台

console.log(result);

【讨论】：

【解决方案2】：

试试这个

<select id="option" name="option">
<option value="a">a </option>
<option value"b">b </option>
<option value"c">c</option>
</select>

你的 jquery 应该是

<script type="text/javascript" >
  $('#option').change(function()  
  { 
      var option_val = $(this).val();
      $.ajax({
        type: 'post',
        url: "",
        data: "option="+option_val,
        success: function(res) 
        {  
            alert(res)   
        }
      });
  });
</script>

简单示例：

<?php
if (isset($_POST['option'])) {
    echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
    die;
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>temporary test</title>
</head>
<body>
<select id="option">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $('#option').change(function(){
        var option_val = $(this).val();
        $.ajax({
        type: 'post',
        url: "",
        data: "option="+option_val,
        success: function(res) 
        {  
            alert(res)   
        }
        });
    });
</script>
</html>

【讨论】：

感谢查看，但是在检查提交的值时，注意到在 php 函数中回显
可能您必须将 url: "", 设置为 url: "url_where_u_want_to_send", 。如果你离开url: "",，ajax 调用将请求当前页面的 url。
我确实希望它将值提交到当前 url，但我不确定这是否是使用 java 时的正确方法。是吗？
你能告诉我这段代码是在哪里写的吗？ <?php if (isset($_POST['option'])) { echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />'; } ?> 我的意思是，在同一页？
是的，写在同一页