jquery - JQuery Ajaxリクエストで複数のパラメーターを送信するにはどうすればよいですか？

Question

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

メソッドのシグネチャから、Jqueryajaxリクエストは1つのパラメーターのみを送信していると結論付けます。1つのパラメータだけを送信したくありません。3つ、つまり最初のドロップダウンリストの値、2番目のドロップダウンリストの値、およびテキストボックスの値を送信します。

ajaxリクエストで複数の値を送信するにはどうすればよいですか？

助けてくれてありがとう。

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ドキュメントを参照してくださいドキュメント

Answer 2

    $.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 3

呼び出しの2番目のパラメーターは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>');
   });

次に、呼び出しが3つのパラメーターを受け入れ、それに応じて処理することを確認する必要があります。

Answer 4

AJAX リクエストで複数の値を送信するには、パラメーター オブジェクトに要素を追加するだけです。$.post メソッドの動作と渡される関数パラメーターの詳細については、ドキュメントを参照してください。

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 Web サービス呼び出しを投稿できます。