Question

由于某些原因，我遇到了AJAX的问题，要么就是没有被调用，要么就是

$(document).ready(function() {
  $("#my_form").submit(function(event) {
    alert("submited");

    event.preventDefault("#my_form");

    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
    var form_data = $(this).serialize(); //Encode form elements for submission

    alert(post_url + "" + request_method + " " + form_data);

    $.ajax({
      type: post_url,
      url: request_method,
      data: form_data,
      success: function(data) {
        alert(data);
        $("server-results").html(data);
      }
    });

    $('#loadingDiv').hide().ajaxStart(function() {
      $(this).show();
    });
    //.ajaxStop(function() {
    //  $(this).hide();
    //});
  });
});

我已尽可能多地调试，并且在JavaScript中激活表单函数或将3个变量传输到JS代码块中没有任何问题。然而ajaxStart没有激活，这让我相信问题只在于ajax。

我还检查了指向ajax的链接，但它似乎正在运行，但我不确定它是否是正确的链接，或者它是否因任何原因无效。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

仅供参考，ajax链接位于HTML和JS上方页面的顶部。

Answer 1

您传递了错误的参数：

type: post_url,
url: request_method,

您需要在url中传递post_url，在type中传递request_method。只需将其更改为：

type: request_method,
url: post_url,

Answer 2

$（＆＃34;服务器结果＆＃34;）。html（数据）; 此处您尚未指定服务器结果是否为类或ID因此，服务器的输出永远不会打印在页面上

jQuery .ajaxStart()

正如jQuery官方文档中所报告的那样，＃loadingDiv元素无法激活ajaxStart事件，但您必须使用该文档。

$(document).ready(function() {
  $("#my_form").submit(function(event) {
    alert("submited");

    event.preventDefault("#my_form");

    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
    var form_data = $(this).serialize(); //Encode form elements for submission

    alert(post_url + "" + request_method + " " + form_data);

    $.ajax({
      type: post_url,
      url: request_method,
      data: form_data,
      success: function(data) {
        alert(data);
        $(".server-results").html(data);
      }
    });

    $(document).ajaxStart(function() {
      $('#loadingDiv').show();
    });
    .ajaxStop(function() {
      $('#loadingDiv').hide();
    });
  });
});

总结代码应该是这样的。

{{1}}

AJAX没有被调用

2 个答案: