Question

一个多星期后，我问了一个关于Jquery and 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的帮助。

Answer 1

您可以根据需要发布任意数量的参数

$.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文档Documentation

Answer 2

要使用AJAX请求发送多个值，只需向参数对象添加更多元素即可。为了更深入地了解$ .post方法正在做什么以及传递的函数参数，请检查the documentation。

Answer 3

    $.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";
}

Answer 4

您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>');
   });

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

Answer 5

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

[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网络服务电话。

如何使用JQuery Ajax请求发送多个参数？

5 个答案: