没有调用AJAX

Question

I'm having an issue with AJAX as for some reason it either isn't being called or isn't working

$(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();
    //});
  });
});

I've debugged as much as I could and there is no issue with the form function being activated in JavaScript or the 3 variables being transported into the JS code block. However ajaxStart doesn't activate which makes me believe that the problem is with just ajax.

I also checked the link to ajax and it seems to be working however I'm not sure if its the right link or if it's not valid for whatever reason.

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

FYI the ajax link is at the top of the page above both HTML and JS.

Answer 1

You have passed wrong parameters:

type: post_url,
url: request_method,

You need to pass post_url in url and request_method in type. Just change it to:

type: request_method,
url: post_url,