我有收集数据的输入表单.我想判断MySQL数据库中是否存在其中一个输入,为此,我通过AJAX调用了该过程.

该过程执行一个MySQL查询,如果记录存在或不存在,则返回值"1""0".AJAX请求一切正常.

我可以判断返回的数据是1还是0.问题是,如果数据是0(记录已经存在),我必须避免提交表单.但这并不管用.

<form id="frm" name="frm" action="000.php?us=1&usop=1&ada=1" method="post" enctype='multipart/form-data'>
  <input name="elm" id="elm" type="text" style="width: 100%;" required>
  <input name="vin" id="vin" type="text" style="width: 100%; text-transform: uppercase;" required>
  <button class="btn-success" type="submit" id="go" name="btn-login">Go!</button>
</form>
(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

$(".btn-success").click(function() {
  $.ajax({
    type: "POST",
    data: {
      q: $('#elm').val(),
    },
    url: "getunique.php",
    success: function(data) {
      if (data === '0') {
        $("#elm").val("");
        alert("duplicated!");
        return false;
      } else if (data === '1') {
        document.getElementById("frm").submit();
      }
    }
  })
})

推荐答案

要执行所需的操作,您应该挂钩到formsubmit事件,并在该事件上调用preventDefault().然后,您可以发出您的AJAX请求以确定数据的状态,然后手动重新提交表单,或者如果不允许提交,则不执行任何操作.

下面是一个例子,说明了其中的逻辑:

$("#frm").on('submit', e => {
  e.preventDefault();

  $.ajax({
    type: "POST",
    data: {
      q: $('#elm').val()
    },
    url: "getunique.php",
    success: function(data) {
      if (data === '0') {
        $("#elm").val("");
        alert("duplicated!");
      } else if (data === '1') {
        e.target.submit(); // resubmit form
      }
    }
  })
})

顺便说一句,你应该回顾一下你的getunique.php是如何返回数据的.返回纯文本响应不是一种好的做法,因为它非常脆弱,很容易被 destruct .此外,为布尔输出返回字符串并不理想.

我建议您使用布尔标志返回JSON,然后可以询问该标志以确定要采取的操作.

Javascript相关问答推荐

如何编辑代码FlipDown.js倒计时?

如何解决这个未能在响应上执行json:body stream已读问题?

如何获取转换字节的所有8位?

Vue:ref不会创建react 性属性

为什么ngModel不能在最后一个版本的Angular 17上工作?'

成功完成Reducers后不更新状态

PDF工具包阿拉伯字体的反转数字

更改预请求脚本中重用的JSON主体变量- Postman

当输入字段无效时,我的应用程序不会返回错误

在使用REACT更改了CSS类之后,无法更改CSS样式

如何使用TypeScrip设置唯一属性?

为什么当我更新数据库时,我的所有组件都重新呈现?

构建器模式与参数对象输入

FireBase FiRestore安全规则-嵌套对象的MapDiff

为什么NULL不能在构造函数的.Prototype中工作

react 路由DOM有条件地呈现元素

在高位图中显示每个y轴系列的多个值

如何用react组件替换dom元素?

在HTML中使用meta标记来指定定制元数据以用于使用JavaScript进行检索是不是一个坏主意?

对象作为react 子对象无效(已找到:具有键的对象{type,props}).如果要呈现一个子级集合,请改用数组