在提交内提交

Question

我承认它的标题不是很清楚。但我不知道如何命名我正在尝试做的事情。

我有index.htm。此页面使用以下代码从index.asp?Process=ViewRequests中提取数据。

    $(function Requests() {
        $.ajax({
            type: 'GET',
            url: 'content/requests/index.cs.asp?Process=ViewRequests',
            success: function(data) {
                $("#requests").html(data);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $("#requests").html('.');
            }
        });
    });

然后，在这个新提取的数据集中，我有几个表单。所有表单的ID都是REQUESTFORM，提交按钮的名称是respond。我需要它需要执行什么；一旦用户单击这些表单中的任何一个，单击的表单应该将其数据发送到index.asp?Process=RespondRequests并打印其响应。

    $("[name='respond']").click(function() { 
            $.ajax({
                type: "POST",
                data: $("#REQUESTFORM").serialize(),
                url: "content/requests/index.cs.asp?Process=RespondRequests", 
                success: function(output) { 
                $('#REQUESTFORM').html(output)
                },
                error: function(output) {
                $('#REQUESTFORM').html(output);
                }
            }); 
    }); 

这有可能吗？

Answer 1

您不能有多个具有相同ID的元素，否则，如果您这样做了，至少您将不能将该ID用于任何有用的事情。但由于submit按钮位于表单标记的下方，因此您可以使用closest函数来选择最近的表单。由于单击事件中的this指的是被单击的元素，因此您可以很容易地获得所单击按钮的表单：

   $(function Requests() {
     $.ajax({
       type: 'GET',
       url: 'content/requests/index.cs.asp?Process=ViewRequests',
       success: function(data) {
         var that = this;
         $("#requests").html(data);
         $("[name='respond']").click(function() { 
           $.ajax({
             type: "POST",
             data: $(that).closest("form").serialize(),
             url: "content/requests/index.cs.asp?Process=RespondRequests", 
             success: function(output) { 
               $(that).closest("form").html(output)
             },
             error: function(output) {
               $(that).closest("form").html(output);
             }
           });
         });
       },
       error: function (XMLHttpRequest, textStatus, errorThrown) {
         $("#requests").html('.');
       }
     });
   });

Answer 2

我不太清楚您要做什么，但是您可以使用表单的submit事件并通过AJAX处理请求。在处理函数中，您应该返回false以防止表单在浏览器中提交(因为您将通过AJAX提交它)。

我希望它能帮上忙。