jquery - 是否有可能让多个表单与一个 ajax post 函数一起使用

Question

嘿伙计们，我有一个系统，其中每个 friend 都有一个表单，我曾经为每个表单提供一个 ajax 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(如果不需要，则没有唯一 ID)。您最好给它们一个类标识符或类似的标识符，如上面的示例所示。您还需要调整 doPost 的行为，以便它根据新的标记结构正确地寻址元素。上面的示例尚未经过测试 - 我的目的是让您了解需要发生什么，而不是提供完整的工作解决方案。