Jquery发送表单ajax不起作用

Question

我试着像这段代码一样发送表单ajax

<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>

它没有提醒成功，我点击按钮确定后检查动作

Answer 1

如果添加了jquery.min.js。那么请忽略它。否则添加它。要获得action <form>使用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>

用户要求

<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..!!");
      }
  });
});  

或者，检查Send FormData and String Data Together Through JQuery AJAX?

其他

<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

为什么不直接将处理程序附加到Submit-Button＆amp;做这样的事情：

<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');
  });
});