Ajax发布导致2个操作运行

本文关键字：操作 运行 2个 布导致 Ajax | 更新日期: 2023-09-27 18:27:47

我是MVC的新手，这个问题一直困扰着我。我有一些javascript，当用户按下我表单上文本框中的选项卡或回车键时，它会触发jquery ajax帖子：

<script type="text/javascript">
    $(document).ready(function () {
        $('#RmaNumber, #SerialNumber').keydown(function (event) {
            if (event.keyCode == 13 || event.keyCode == 9) {
                var ri = {
                    RmaNumber: $('#RmaNumber').val(),
                    SerialNumber: $('#SerialNumber').val(),
                    ControlName: event.target.id
                }

                $.ajax({
                    type: "POST",
                    url: "/Invoice/BarcodeScan",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(ri),
                    dataType: "json",
                    success: function (data) {
                        $('#TerminalType').text(data.TerminalType);
                    }
                });
            }
        });
    });
</script>

这是我的控制器的样子。我删除了代码以保持简单：

  public ActionResult Index()
        {
        }
  [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Index(RepairInvoice ri)
        {
        }
 [HttpPost]
        public ActionResult BarcodeScan(string RmaNumber, string SerialNumber, string ControlName)
        {
        }

ajax回发会触发BarcodeScan和Index操作。如果在我的窗体上按下按钮，我只想触发上面有[AcceptVerbs(HttpVerbs.Post)]的Index操作。这可能吗，还是我走错了轨道？

Ajax发布导致2个操作运行

由于这些评论起到了帮助作用，我将为未来的访问者添加一个答案。。。

我忍不住注意到，您正在寻找的一个关键输入是返回键。根据form和input的HTML设置方式，返回键也可能导致form正常POST。所以本质上：

  • JavaScript代码正在调用对BarcodeScan操作的POST
  • HTML form正在调用对Index操作的POST

前者的结果被浏览器忽略，因为页面正在整体重新加载。但无论结果如何，该行动仍被援引。

有几种方法可以解决这个问题：

  • 如果有一个submit输入，而您在其他情况下仅将其用作按钮，则可以将其更改为button，并在表单中不使用submit。这对于那些应该仅由JavaScript驱动并且没有默认POST操作的表单来说效果很好，但如果不了解更多信息，很难判断这是否适用于此处
  • JavaScript代码可以通过调用preventDefault()来停止DOM事件。大多数jQuery函数都有一个用于事件的参数，您可以在事件上调用该函数。这将告诉DOM结束事件，这样它就不会"冒泡"到表单、文档等
相关文章：