通过选择字段的更改通过AJAX方法提交表单

Question

我想发送表单而不离开当前页面，所以我进一步使用了这种ajaxi方法，我在Select value的onchange方法中使用了Submit，但是它不起作用：

<form action="" method="post" id="rati">
 <select onchange="this.form.submit()" name="rate" style="width:130px;">
  <option value="1">☆</option>
  <option value="2">☆☆</option>
  <option value="3">☆☆☆</option>
  <option value="4">☆☆☆☆</option>
  <option value="5">☆☆☆☆☆</option>
</select> 
</form>


<script>
    $(document).ready(function(e) {
        $("#rati").submit(function(e) {
            var url = "/saverate.bc?userid=18&id=122";
            $.ajax({
                type: "POST",
                url: url,
                data: $("#rati").serialize(),
                success: function(data) {
                    $(".tnxforate").html(data)
                }
            });
            e.preventDefault();
        });
    });
</script>

Answer 1

您不应为此附加内联处理程序。 当您通过ajax获得响应时，无需提交表单。

尝试这个：

 $(document).ready(function(e) { $("[name='rate']").on('change', function() { var url = "/saverate.bc?userid=18&id=122"; $.ajax({ type: "POST", url: url, data: $("#rati").serialize(), success: function(data) { $(".tnxforate").html(data) } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <form action="" method="post" id="rati"> <select name="rate" style="width:130px;"> <option value="1">☆</option> <option value="2">☆☆</option> <option value="3">☆☆☆</option> <option value="4">☆☆☆☆</option> <option value="5">☆☆☆☆☆</option> </select> </form>