將數據插入數據庫無需重新加載頁面（PHP + jQuery的）

Question

這裏是我的代碼：

<form action='insert.php' method='post' id='myform' > 
    <input type='hidden' name='tmdb_id'/> 
    <button id='insert'>Insert</button> 
    <p id='result'></p> 
    <script src='insert.js'></script> 
</form> 

<form action='insert.php' method='post' id='myform' > 
    <input type='hidden' name='tmdb_id'/> 
    <button id='insert'>Insert</button> 
    <p id='result'></p> 
    <script src='insert.js'></script> 
</form> 

<form action='insert.php' method='post' id='myform' > 
    <input type='hidden' name='tmdb_id'/> 
    <button id='insert'>Insert</button> 
    <p id='result'></p> 
    <script src='insert.js'></script> 
</form> 

這裏是：insert.js

$('#myform').submit(function(){ 
    return false; 
}); 

$('#insert').click(function(){ 
    $.post(  
     $('#myform').attr('action'), 
     $('#myform :input').serializeArray(), 
     function(result){ 
      $('#result').html(result); 
     } 
    ); 
}); 

問題：

只有代碼首先在<form></form>標籤內工作。如果我點擊其他<form></form>標籤的submit按鈕，則我將重新定向到insert.php文件。

什麼問題？如果它與同一個id相關，那麼我不想添加不同的id's。對於每一個新形式

Answer 1

嘗試類似下面使用jQuery的Ajax：

$(".submit-button-class").click(function() { 
    var formData = $(this).closest('form').serialize(); 
    $.ajax({ 
    type: "POST", 
    url: "YOUR URL", 
    data: formData, 
    dataType: 'json', 
    beforeSend: function() { 
     //show loading image while processing 
    }, 
    success: function(resp) { 
     // do something here 
    }, 
    error: function(e) { 
     alert('error: ' + JSON.stringify(e)); 
    } 
    }); 
}); 

注意：你應該使用類選擇，而不是id選擇的提交按鈕

Answer 2

ID's Must Be Unique，特別是因爲它會導致當您嘗試與這些元素進行交互時，JavaScript和CSS中存在問題。

假設你一次加載insert.js到頁面：

<form action='insert.php' method='post' class='myform' > 
    <input type='hidden' name='tmdb_id'/> 
    <button class='insert'>Insert</button> 
    <p class='result'></p> 
</form> 

<form action='insert.php' method='post' class='myform' > 
    <input type='hidden' name='tmdb_id'/> 
    <button class='insert'>Insert</button> 
    <p class='result'></p> 
</form> 

<form action='insert.php' method='post' class='myform' > 
    <input type='hidden' name='tmdb_id'/> 
    <button class='insert'>Insert</button> 
    <p class='result'></p> 
</form> 

一旦你有做，你可以使用一個jQuery函數來處理所有的形式：

$(function() { 
    $('.insert').click(function(e){ 
     e.preventDefault(); 
     $.post(  
      $(this).closest('.myform').attr('action'), 
      $(this).closest('.myform :input').serializeArray(), 
      function(result){ 
       $(this).closest('.myform').find('.result').html(result); 
      } 
     ); 
    }); 
}); 

你做必須做一些DOM遍歷來獲取與插入按鈕相關的表單元素。

1. $(this).closest('.myform')發現插入按鈕
2. $(this)closest(.myform').find('.result')的父母找到與一流的「結果」的子元素結果添加到。

Answer 3

你並不需要所有的形式和內容，而不是ID的重複的insert.js

使用通用類的多個實例。

我們還可以使用提交事件發佈數據

HTML

<form action='insert.php' method='post' class='myform'> 
    <input type='hidden' name='tmdb_id' /> 
    <button class='insert'>Insert</button> 
    <p class='result'></p> 

</form> 

<form action='insert.php' method='post' class='myform'> 
    <input type='hidden' name='tmdb_id' /> 
    <button class='insert'>Insert</button> 
    <p class='result'></p> 

</form> 
<!-- load once per page --> 
<script src='insert.js'></script> 

JS

$('.myform').submit(function(){ 
    // `this` is the instance of myForm class the event occurred on 
    var $form = $(this), 
     url = $form.attr('action'), 
     data = $form.serializeArray(); // or use serialize() which is more common 

    $.post(url, data, function(result){ 
     // look inside this form instance for element to populate 
     $form.find('.result').html(result); 
    }); 

    return false; 
});