Ajax POST不发送正确的表单值

Question

当我通过AJAX提交表单时，表单的值不正确。在这个片段中的代码，通过AJAX值始终是15分钟（但普通帖子提交作品很好！）

<script type="text/javascript"> 
     $(function() { 
      $('#BookButton').click(function (event) { 
       var form = $('#Form1'); 
       $.ajax({ 

        type: form.attr('method'), 
        url: form.attr('action'), 
        data: $("#BookRoom :input").serialize() 
       }).done(function (data) { 
        $('#BookRoom').modal('hide'); 
        if (data.ResponseType == 0) { 
         $('#SuccessMsg').text('Meeting Booked'); 
         $('#SuccessMessage').modal('show'); 
        } 
        else if (data.ResponseType == 1) { 
         $('#SuccessMsg').text('There are conflicts'); 
         $('#SuccessMessage').modal('show'); 
        } 

        else { 
         $('#SuccessMsg').text('Data: ' + data.ResponseType); 
         $('#SuccessMessage').modal('show'); 
        } 


        // Optionally alert the user of success here... 


        setTimeout(function() { $('#SuccessMessage').modal('hide'); }, 3000); 
       }).fail(function(jqXHR, textStatus){ 
        // Optionally alert the user of an error here... 
        alert("Error submitting AJAX request" + textStatus); 
       }); 
       event.preventDefault(); // Prevent the form from submitting via the browser. 
      }); 
     }); 

<form id="Form1" action="iPadLayout.aspx?RoomID=1" method="post" runat="server"> 


<div class="modal fade" id="BookRoom" tabindex="-1" role="dialog" aria-labelledby="BookRoomLabel" aria-hidden="true"> 

<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button> 
    <h4 class="modal-title" id="myModalLabel">Book This Room</h4> 
    </div> 
    <div class="modal-body"> 
    <p>This room is available for the rest of the day</p> 

     <asp:DropDownList ID="MeetingLength" runat="server"> 
      <asp:ListItem Text="15 Minutes" Value="15" Selected="true" /> 
      <asp:ListItem Text="30 Minutes" Value="30" /> 
      <asp:ListItem Text="45 Minutes" Value="45" /> 
      <asp:ListItem Text="1 Hour" Value="60" /> 
      <asp:ListItem Text="1.5 Hours" Value="90" /> 
      <asp:ListItem Text="2 Hours" Value="120" /> 
</asp:DropDownList> 



    </div> 
    <div class="modal-footer"> 

    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <asp:Button type="button" id="BookButton" class="btn btn-primary" runat="server" Text="Book Room"></asp:Button> 
    </div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

</form> 

编辑：

我认为它的我的C＃这就是错了 - 我一直在使用

string bookRoom = Request.Params.Get("MeetingLength"); 

，而不是反序列化数据 - 你怎么看这个d ata在C＃中？

任何想法为什么它不通过AJAX工作，但通过正常的POST提交工作正常吗？

Answer 1

检出this question - 基本上，当您调用.net控件的序列化时，jQuery序列化例程使用控件的name属性来标识数据。由于这是一个.net控件，name属性不会像您期望的那样。如果你想速战速决，你使用的是.NET 4+，您可以设置控件上的ClientIDMode正确设置名称客户端：

<asp:DropDownList ID="MeetingLength" runat="server" ClientIDMode ="Static"> 
    <asp:ListItem Text="15 Minutes" Value="15" Selected="true" /> 
    <asp:ListItem Text="30 Minutes" Value="30" /> 
    <asp:ListItem Text="45 Minutes" Value="45" /> 
    <asp:ListItem Text="1 Hour" Value="60" /> 
    <asp:ListItem Text="1.5 Hours" Value="90" /> 
    <asp:ListItem Text="2 Hours" Value="120" /> 
</asp:DropDownList>