如何發送來自AJAX的請求 <form> 由jQuery創建

Question

我有一個jQuery textarea，可以從其中發布帶有按鈕的表單值。 我不想刷新頁面，並為此目的使用AJAX，這樣就不會刷新頁面。 我已經嘗試了很多，但是解決方案似乎沒有出來。 這是我的相同代碼。 任何見解將真正有幫助。

這是我的代碼，

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('.click_notes').on('click',function(){
 var tid = $(this).data('question-id'); 
$(this).closest('ul').find('.demo').html("<div class='comment_form'><span onclick='$(this).parent().hide()'><b>X</b></span><form id = 'contactForm1' action='submit.php' method='post'><textarea required cols ='50' class='span10' name='notes' rows='6'></textarea><br><input class='btn btn-primary' id = 'submitnotes' name= 'submit_notes' type='submit' onclick = 'submitform()' value='Add Notes'><input type='hidden' name='submitValue' value='"+tid+"' /></form><br></div>");
 });
});

</script> 
<script type="text/javascript">

      function submitform() {
        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
        }

</script>

Answer 1

要實現對form本身的submit事件的鈎子，而不是對Submit按鈕的click事件的鈎子。 還要注意，您不應該使用on*事件屬性。 由於表單的HTML內容是動態附加到DOM的，因此您可以在form和span上都使用委托事件處理程序。 嘗試這個：

$(document).ready(function() {
  $('.click_notes').on('click', function() {
    var tid = $(this).data('question-id');
    $(this).closest('ul').find('.demo').html('<div class="comment_form"><span><b>X</b></span><form id="contactForm1" action="submit.php" method="post"><textarea required cols="50" class="span10" name="notes" rows="6"></textarea><br><input class="btn btn-primary" id="submitnotes" name="submit_notes" type="submit" value="Add Notes"><input type="hidden" name="submitValue" value="' + tid + '" /></form><br></div>');
  });

  $(document).on('submit', '#contactForm1', function(e) {
    e.preventDefault();

    $.ajax({
      type: this.method,
      url: this.action,
      data: $(this).serialize(),
      success: function(data) {
        console.log('Submission was successful.');
        console.log(data);
      },
      error: function(xhr) {
        console.log('An error occurred.');
        console.log(xhr);
      },
    });
  }).on('click', 'span', function() {
    $(this).parent().hide()
  });
});

還要注意，您包括兩個版本的jQuery，其中一個版本（1.6.1）已過時將近8年。 我建議改用對jQuery 3.3.1的單一引用。