1

一个多星期以来，我问了一个关于Jquery 和 Ajax的问题。我仍然不知道如何利用答案，因为我对此事还有更多问题。这是我的aspx页面。

<asp:ListView ID="_lsvCostFinder" runat="server" InsertItemPosition = "LastItem">
    <LayoutTemplate>
       <table>
        <tr>
          <th>Country</th>
          <th>City</th>
          <th>Cost(US$)</th>                
        </tr>
        <tr  runat="server" id="itemPlaceHolder">
        </tr>
       </table>
      </LayoutTemplate>
      <ItemTemplate>
       <tr>
         <td>
             <asp:LinkButton ID="_lnkDelete" runat="server" OnClick = "RemoveDestination">Delete</asp:LinkButton>
         </td>
         <td>
            <asp:DropDownList ID="_ddlCountry" runat="server" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" AutoPostBack = "true">
               <asp:ListItem Value = "0">CANCEL..</asp:ListItem>
               <asp:ListItem Value = "1">USA</asp:ListItem>
               <asp:ListItem Value = "2">Germany</asp:ListItem>
               <asp:ListItem Value = "3">France</asp:ListItem>
               <asp:ListItem Value = "4">GB</asp:ListItem>
               <asp:ListItem Value = "5">Congo</asp:ListItem>
             </asp:DropDownList>
           </td>
           <td>
              <asp:DropDownList ID="_ddlCity" runat="server" OnSelectedIndexChanged="ddlCity_SelectedIndexChanged" AutoPostBack = "true" 
                        AppendDataBoundItems = "true" Width = "100">
                 <asp:ListItem Value = "0">CANCEL..</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="_txtCost" runat="server" Width = "50" AutoPostBack = "true" OnTextChanged = "txtCost_TextChanged"></asp:TextBox>
            </td>
          </tr>
       </ItemTemplate>
       <InsertItemTemplate>
          <tr>
              <td style = "text-align: right; font-weight: bold;" colspan = "3">Total</td>
              <td style = "background-color: Silver; border: 2px solid black;">
                        <asp:Label ID="_lblTotal" Font-Bold ="true" runat="server"></asp:Label>
              </td>
            </tr>
          </InsertItemTemplate>
      </asp:ListView> 
        <br /><br />
      <asp:Button ID="_btnNewDestination" runat="server" Text="Add Destination" 
            onclick="_btnNewDestination_Click" />

回答我问题的人建议我使用以下 JQuery 代码：

$(document).ready(function () {//ready       
  $('select').change(function () {//select
    var id = $(this).attr('id');
    if (id.indexOf('_ddlCountry') != -1) {
       var nrow = id.match('\\d+');
       $.post('Default.aspx/ddlCountry_SelectedIndexChanged', { selectedVal: $(this).val() }, function (data) {                  
          $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
           });
          }
        }); //select
   });//ready

还要更改签名，使方法看起来像这样

[WebMethod]
public static string MethodName(string selectedVal)
{
 return "something";
}

从方法的签名中，我得出结论，Jquery ajax 请求只发送了 1 个参数。我不想只发送 1 个参数。我要发送3，即第一个下拉列表的值，第二个下拉列表的值，文本框的值。

如何通过 ajax 请求发送多个值？

感谢 s 的帮助。

4

5 回答 5

2

您可以发布任意数量的参数

$.post('Default.aspx/ddlCountry_SelectedIndexChanged', 
 { param1_name: param1_val, param2_name: param2_val, param3_name:param3_val }, 
 function (data) {                  
      $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
       });
      }
    });

见 $.post 文档文档

于 2013-01-08T17:16:59.920 回答
1

要通过 AJAX 请求发送多个值，您只需向参数对象添加更多元素。要更深入地了解 $.post 方法的作用和传递的函数参数，请查看文档。

于 2013-01-08T17:08:56.460 回答
1 
    $.post('Default.aspx/ddlCountry_SelectedIndexChanged', 
      { selectedVal: $(this).val() , anotherParameter: 'a value'}, 
      function (data) {                  
        $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
       });

我不了解 ASP，但我认为你只需要添加这样的参数： 

public static string MethodName(string selectedVal, string anotherParameter)
{
 return "something";
}
于 2013-01-08T17:13:53.067 回答
1

您调用的第二个参数post是与调用关联的数据：

   $.post('Default.aspx/ddlCountry_SelectedIndexChanged', { selectedVal: $(this).val() }, function (data) {                  
      $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
   });

{ selectedVal: $(this).val() }这只是与您的通话一起传递的一个对象。为了传递更多值，您可以像这样内联添加它们：

{ selectedVal: $(this).val(), selectedVal2: "Value2", selecetedValue3: "Value3" }

或在调用之前创建一个对象：

var parameters = {
 selectedVal: $(this).val(),
 selectedVal2: "Value2", //insert the values you want here
 selecetedValue3: "Value3" //insert the values you want here 
};

这会将您的post电话更改为：

   $.post('Default.aspx/ddlCountry_SelectedIndexChanged', parameters, function (data) {                  
      $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
   });

然后，您需要确保您的调用接受并相应地处理这三个参数。

于 2013-01-08T17:14:01.053 回答
0

你最终会得到这样的东西：

[WebMethod]
public static string MethodName(string param1, string param2, string param3)
{
    return "something";
}

在客户端，这将改变：

 $(document).ready(function () {//ready       
      $('select').change(function () {//select
     var id = $(this).attr('id');
     if (id.indexOf('_ddlCountry') != -1) {
     var nrow = id.match('\\d+');
     $.post('Default.aspx/ddlCountry_SelectedIndexChanged', { param1: $(this).val(), param2: 'something', param3: 'something else' }, function (data) {                  
      $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
       });
      }
    }); //select
    });//ready

但请不要那样做

正如我在您的代码中看到的那样，您刚刚开始使用 Jquery 和 ASP 进行 ajax。

现在您正在对您的服务器进行“低级”调用，如果您想发送和接收复杂的数据，这种制作 ajax 的方式只会给您带来噩梦。

有一种叫做 JSON 的东西，你离实现它只有一步之遥

查看本教程： http ://www.ezzylearning.com/tutorial.aspx?tid=5869127

如果您有任何问题，我可以发布一个示例“复杂”ajax Web 服务调用。

于 2013-01-08T17:21:42.150 回答