如何在使用 ajax 调用触发 Button Click 事件时获取列表框的所有元素

Question

如何在使用 ajax 调用

触发 Button Click 事件时获取列表框的所有元素

我正在使用一个函数并尝试调用 ajax 中的函数调用我的函数工作正常它在我尝试将它与 [=19= 绑定时返回列表框中的所有元素] 调用它不起作用我需要调用后面代码中的元素：

             function responseData2() {
                          debugger;  
              var oListbox = $("#submitlistbox2").each(function () {
                  var data = $(this).text() + " " + $(this).val()+"\n";
                  alert("The Names are: " + data);

              });  
              var jobsheet = data;
              $.ajax({
                  url: "OnlineBiddingofExtraBoardDaysOff.aspx/Details4",
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  cache: false,
                  data: "{ 'selectedJobSheet': '" + jobsheet + "'}",
                  success: function (data) {
                      alert(data);
                      alert("success");
                  },
                  error: function (response) {
                      alert(response);
                      alert("error");
                  }
              });         

          }

我的代码隐藏数据：

   [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static object Details4(string selectedJobSheet)
    {

        try
        {

            string constr = ConfigurationManager.ConnectionStrings["Constr"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("select customer_id,first_name from jobsheetDetails", con))
                {

                    string _data = "";
                    cmd.CommandType = CommandType.Text;
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    DataSet ds = new DataSet();
                    da.Fill(ds);
                    if (ds.Tables[0].Rows.Count > 0)
                    {
                        _data = JsonConvert.SerializeObject(ds.Tables[0]);
                    }
                   return _data;
                }

            }
        }
        catch (Exception)
        {

            throw;
        }

    }

Answer 1

试试这个：

function responseData2() {
    debugger;
    var jobsheet = [];
    $("#submitlistbox2").each(function () {
        var data = $(this).text() + " " + $(this).val();
        jobsheet.push(data);
        alert("The Names are: " + data);
    });

    $.ajax({
        url: "OnlineBiddingofExtraBoardDaysOff.aspx/Details4",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        cache: false,
        data: { "selectedJobSheet": JSON.stringify(jobsheet) },
        dataType: "json",
        success: function (data) {
            alert(data);
            alert("success");
        },
        error: function (response) {
            alert(response);
            alert("error");
        }
    });
}

隐藏代码：

[WebMethod]
public void Details4(string selectedJobSheet)
{
    List<string> selectedJobSheetList = new List<string>();
    var serializer = new JavaScriptSerializer();
    serializer.RegisterConverters(new[] { new DynamicJsonConverter() });
    dynamic data = serializer.Deserialize(selectedJobSheet, typeof(object));

    foreach (var item in data)
    {
        selectedJobSheetList.Add(item);
    }
}

Answer 2

您的数据变量似乎在循环中被覆盖，这就是问题所在。希望以下内容对您有所帮助。

function responseData2() {
    var data = [];
    var oListbox = $("#submitlistbox2").each(function (i) {
        var data[i] = $(this).text() + " " + $(this).val()+"\n";
        alert("The Names are: " + data[i]);
    });  
    var jobsheet = JSON.stringify(data);
    $.ajax({
        url: "OnlineBiddingofExtraBoardDaysOff.aspx/Details4",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        cache: false,
        data: "{ 'selectedJobSheet': " + jobsheet + "}",
        success: function (data) {
          alert(data);
          alert("success");
        },
        error: function (response) {
          alert(response);
          alert("error");
        }
    });
}

Answer 3

您的 variable data 似乎在循环中。尝试使用 object 方法来解决您的问题。

         function responseData2() {
                      debugger;  

           var holder_all_data = [];

          var oListbox = $("#submitlistbox2").each(function () {
              var data = $(this).text() + " " + $(this).val()+"\n";
              alert("The Names are: " + data);

              holder_all_data.push({
                    var_name_data : data,
              });

          });  


          $.ajax({
              url: "OnlineBiddingofExtraBoardDaysOff.aspx/Details4",
              type: "POST",
              contentType: "application/json; charset=utf-8",
              cache: false,
              data: "{ 'selectedJobSheet': '" + holder_all_data + "'}",
              success: function (data) {
                  alert(data);
                  alert("success");
              },
              error: function (response) {
                  alert(response);
                  alert("error");
              }
          });         

      }

接下来，如果您想要获得 AJAX 抛出的单个 name 值，您应该使用 foreach loop，它应该如下所示。 :D

例如

   foreach( selectedJobSheet as $item ){
       var name = $item['var_name_data']; //include the object variable name
       console.log(name);
   }

如何在使用 ajax 调用触发 Button Click 事件时获取列表框的所有元素

How to get All the elements of the Listbox when Button Click event is fired by using ajax call

javascript

jquery

jquery-ui

kendo-ui

jquery-ajaxq