是否有可能获得多种形式与一个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的行为，以便根据您的新标记结构正确地处理元素。上面的例子没有经过测试 - 我的意图是让你知道需要发生什么，而不是提供完整的工作解决方案。