Jquery send post form ajax not work

Question

am try to send form ajax like this code

<script type='text/javascript'>
/* attach a submit handler to the form */
  $("#non").submit(function(event) {

      /* stop form from submitting normally */
      event.preventDefault();

      /* get some values from elements on the page: */
      var $form = $( this ),
          url = $form.attr( 'action' );

      /* Send the data using post */
      var posting = $.post( url, { title: $('#mak').val(),meaning: $('#za').val()} );

      /* Alerts the results */
      posting.done(function( data ) {
        alert('success');
      });
    });
 </script>

it not alert success,and i check action after click button is ok

Answer 1

If jquery.min.js added. Then please ignore it. Else add it. To get action of <form> Use var action_url = form.attr('action');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#non').on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
    var formData = form.serialize();
    var action_url = form.attr('action');
    $.ajax({
      url: action_url,
      type: "POST",
      data: formData,
      success: function (data) {
                alert(data);
      },
      error: function () {
        alert("Oops..!! Problem Ocurred. Please Try Again..!!");
      }
  });
});  
</script>

User's Requirement

<script>
$('#non').on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
    var val1 = $('#text1').val();
    var val2 = $('#text2').val();
    var action_url = form.attr('action');
    $.ajax({
      url: action_url,
      type: "POST",
      data: { text1: val1, text2: val2 },
      success: function (data) {
                alert(data);
      },
      error: function () {
        alert("Oops..!! Problem Ocurred. Please Try Again..!!");
      }
  });
});  

Or, check Send FormData and String Data Together Through JQuery AJAX?

Additional

<script>
$('#non').on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
    var formData = form.serialize();
        var title_f = $('#mak').val();
    var meaning_f = $('#za').val();
        formData.append(title,title_f);
        formData.append(meaning,meaning_f);
    var action_url = form.attr('action');
    $.ajax({
      url: action_url,
      type: "POST",
      data: formData,
      success: function (data) {
                alert(data);
      },
      error: function () {
        alert("Oops..!! Problem Ocurred. Please Try Again..!!");
      }
  });
});  

Answer 2

Why not attach your Handler directly to the Submit-Button & do something like this:

<script type='text/javascript'>
  /* attach a submit handler to the form */
  $("#submitBtn").on("click", function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  // HERE IS THE PROBLEM... THE $(this) VARIABLE POINTS TO THE BUTTON, NOT FORM.   
  var $form = $( this ).parentsUntil("form").parent("form"),
      url = $form.attr( 'action' );

  /* Send the data using post */
  var posting = $.post( url, { title: $('#mak').val(),meaning: $('#za').val()} );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});