【问题标题】:Jquery AJAX call not executingJquery AJAX调用未执行
【发布时间】:2020-04-13 05:06:08
【问题描述】:

我正在尝试构建一个注册页面。到目前为止,我已经在这里托管了我所拥有的:http://www.wikinewscheck.com/sign_up.html

我正在使用似乎运行良好的 bootstrapValidator。当它在单击按钮后完成验证时,我希望它禁用提交按钮并发布表单,如下面的代码所示: 现在我的 Javascripts 很糟糕,所以这可能是一个基本错误,但是,从单步执行代码开始,它似乎完全跳过了禁用按钮和 ajax 发布的代码。

这是为什么?

所有代码都可以在上面的链接中找到,或者如果需要可以发布更多。

谢谢

  $('#contact_form').bootstrapValidator({
      //validation part seems to work well so deleted code. Can be viewed through link above if required.
  })

 .on('success.form.bv', function(e) {

      // script seems to completley skip this section
      $this = $("#registerButton");
      $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
      $.ajax({
        url: "././php/register.php",
        type: "POST",
        data: {
          first_name: first_name,
          last_name: last_name,
          email: email,
          user_name: user_name,
          email: email,
          user_password: user_password,
          confirm_password: confirm_password
        },
        cache: false,

【问题讨论】:

  • 是不是因为你的代码在脚本模式下运行而你没有声明你的var?试试var $this =
  • 在函数的开头放一个console.log只是为了检查它是否正在运行
  • 部分问题可能与您在 ajax 调用中定义 URL 的行有关。 url: "././php/register.php", "./" 指的是当前目录,你试图在你的 ajax 脚本所在的当前文件夹中找到 /php/register.php。用简单的英语这行基本上是说“查看当前文件夹,然后在当前文件夹中查找名为 php 的目录,然后查找文件 register.php”。每当您有两个点和一个斜杠或“../”时,它会告诉它从当前目录向上查找一级,并且可能(至少一件事)需要更改。

标签: javascript jquery html ajax post


【解决方案1】:

您对脚本的引用存在一些冲突...

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>

  <!-- Custom fonts for this template -->
  <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">

  <!-- External CSS (some can be deleted)-->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet" type="text/css">
  <script src="js/sign_up.js"></script>

删除所有引用并将我提供的内容放入 head-tag 中。然后,当您确认进入“success.form.bv”事件时,如果需要,您可以引入一些自定义脚本。

【讨论】:

  • 您好,感谢您的回答。正如您所建议的,这有效,但我不明白为什么有效?我总是避免在头脑中碰触脚本,因为我认为这是最佳实践。你介意解释一下你在哪里提到的冲突吗?非常感谢
  • 您在页眉和页脚之后有 jquery 和 bootstrapValidation 引用。我没有检查它是版本冲突还是其他什么,但你有重复的引用,这给你一个地方的冲突。
猜你喜欢
  • 2016-01-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-06-08
  • 2012-02-20
  • 2014-03-15
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多