从提交ID进行ajax调用

Question

I have a form in which currently posts to a hard coded php page in the action of the form, this works fine, it posts to the DB no problem, but where things get tricky for me is I don't want to post to a new page so I have opted to use ajax. So I got rid of the action field from the form and put in some jquery to make an ajax call. the issues I am having is well..it doesn't work :D. Could someone take a look at my js file and explain to me what I am doing wrong or what I should do?

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

  <form>
      <p>Comment</p>
      <textarea name= "comment" rows="6" cols="50"></textarea><br />
      <input type="submit" name= "submit" value="submit" id = "submit">
    </form>

$('#submit').on('click',function(){
       $.ajax({
            type        : 'POST',
            url         : 'comment.php',
            data        : formData,
            dataType    : 'json',
      })
   });

</div>

Answer 1

You should handle the 'submit' event of the form over the 'click' event of the submit button. You should also return false; at the end of function to prevent the form from posting to a new page. You are handling the submit yourself. Also I would put the action attribute back on the form element for the rare occasion that JavaScript is disabled on the client. Give the form an id and target that. Your code is correct otherwise.

HTML

    <form id="my-form" action="comment.php" method="post">
        <!-- input fields -->
    </form>

JavaScript

    $('#my-form').on('submit', function(){ 
        // code...

        return false;
    });

Providing the action attribute, as well as the method attribute, on the form element will make these available to access in your submit handler as well as providing a proper fallback for any JavaScript failures. That may not be necessary for this instance but may be helpful in the future.

Your handler could now look something like this:

JavaScript

    $('#my-form').on('submit', function(){ 

        // serialize the form
        var formData = $(this).serialize();

        $.ajax({
            type        : this.method,
            url         : this.action,
            data        : formData,
            dataType    : 'json'
        })
        .done(function (data) { 
            // do some stuff with 'data'
        })
        .fail(function (error) {
            // do some stuff with 'error'
        });

        return false;
    });