是否有可能獲得多種形式與一個AJAX帖子功能

Question

嘿傢伙我有一個系統，每個朋友有一個形式，我曾經有一個每個形式的AJAX post函數，但我想保存代碼並想知道是否有可能讓多個表單只用一個post函數工作。如果任何人有任何建議如何實現這一點，我將不勝感激。例如

<div id="message"> 
    <form id='submit' class='message-form' method='POST' > 
     <input type='hidden' id='to' value='friend1' maxlength='255' > 
     Subject<br><input type='text' id='subject' maxlength='50'><br> 
     Message<br><textarea id='message2' cols='50' rows='15'></textarea> 
     <input type='submit' id='submitmessage' class='responsebutton' value='Send'> 
    </form> 
</div> 


$(document).ready(function(){ 
$(".message-form").submit(function() { 
$("#submitmessage").attr({ disabled:true, value:\"Sending...\" }); 

var to = $('#to').attr('value'); 
var subject = $('#subject').attr('value'); 
var message = $('#message2').attr('value'); 

$.ajax({ 
type: "POST", 
url: "messageprocess.php", 
data: 'to='+ to + '&subject=' + subject + '&message=' + message, 
success: function(response) { 
if(response == "OK") { 
$('.message-form').html("<div id='message'></div>"); 
$('#message').html("<h2>Email has been sent!</h2>") 
     .append("<p>Please wait...</p>") 
     .hide() 
     .fadeIn(1500, function() { 
      $('#message').append(\"<img id='checkmark' src='images/check.png' />\"); 
     }); 

Answer 1

很容易做到，例如：

<div class="message"> 
    <form class='message-form' method='POST' > 
     <input type='hidden' class='to' value='friend1' maxlength='255' > 
     Subject<br><input type='text' class='subject' maxlength='50'><br> 
     Message<br><textarea class='message' cols='50' rows='15'></textarea> 
     <div class="result"></div> 
    </form> 
    <form class='message-form' method='POST' > 
     <input type='hidden' class='to' value='friend2' maxlength='255' > 
     Subject<br><input type='text' class='subject' maxlength='50'><br> 
     Message<br><textarea class='message' cols='50' rows='15'></textarea> 
    <div class="result"></div> 
    </form> 
    <div class="result"></div> 
    <button>Send</button> 
</div> 

$("button").click(function() { 
    $("form.message-form").each(function() { 
     var to = $(this).find(".to").val(); 
     var subject = $(this).find(".subject").val(); 
     var message = $(this).find(".message").val(); 
     doPost(to, subject, message); 
    }); 
    return false; 
}); 

function doPost(to, subject, message) { 
    $.ajax({ 
     type: "POST", 
     url: "messageprocess.php", 
     data: 'to='+ to + '&subject=' + subject + '&message=' + message, 
     success: function(response) { 
      if(response == "OK") { 
        $(this).find(".result").append("<img class='checkmark' src='images/check.png' />"); 
      }  
     } 
    }); 
}​ 

確保您的信息的div，表格和表格元素具有唯一的ID（或根本沒有，如果他們沒有必要）。你最好給他們一個類標識符，或者像上面的例子那樣。您還需要調整doPost的行爲，以便根據您的新標記結構正確地處理元素。上面的例子沒有經過測試 - 我的意圖是讓你知道需要發生什麼，而不是提供完整的工作解決方案。