Question

当我通过AJAX提交表单时，表单的值不正确。在这段代码中，通过AJAX，值总是15分钟（但正常的POST提交工作正常！）

  <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");

而不是反序列化数据 - 如何在C＃中读取这些数据？

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

Answer 1

签出this question - 基本上，当您在.net控件上调用serialize时，jQuery serialize例程使用控件的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>

Answer 2

你必须serialize表格而不是输入

insted of

data: $("#BookRoom :input").serialize()

尝试

data: form.serialize()

修改

如果您只想在ajax调用中发送MeetingLength值。只需将其设置为数据。试试这些

data: $('#MeetingLength').val()

或

data: $.param({ MettingLenght : $('#MeetingLength').val()});

修改2

请遵循这篇文章。 http://www.aspsnippets.com/Articles/Make-AJAX-Call-to-ASP.Net-Server-Side-Web-service-method-using-jQuery.aspx

并将内容类型放在您的ajax调用中

contentType: "application/json; charset=utf-8", dataType: "json",

Ajax POST没有发送正确的表单值

2 个答案: