jquery AJAX和使用onchange for dropdownlist的Web服务

本文关键字：dropdownlist Web 服务 for onchange AJAX jquery | 更新日期: 2023-09-27 18:09:17

我有一个dropdownlist，我使用jquery ajax来调用一个web方法。我想要的解决方案是使用ajax根据下拉选择的索引更新cuurent页面上的所有数据字段。

function getDBInfo()
{
   var mySelectedIndex = $("#<%=dblParameter.ClientID%>").val(); //id name for dropdown list
   $.ajax({
         type:"POST",
         url:"/Manage/Details.aspx?param=",
         data:{}
         contentType:application/json; charset=utf-8",
         dataType:"json"
         success: function(data)
         {
             //this is what I am trying to accomplish but not sure how I should handle the webservice method to do this or if I am even doing it right so far
             $("#<%=txtParameter.ClientID%>;").text(data.Parameter);
             $("#<%=txtName.ClientID%>;").text(data.Name);
             $("#<%=txtSSN.ClientID%>;").text(data.SSN);
             //etc....
         }
     });
 }

然后在我的代码后面我有我的页面方法

 protected void Page_Load(object sender, EventArgs e)
 {
    dblParameter.Attributes.Add("onchange","getDBInfo");
 }
 [WebMethod]
 public static DataRowView getDBInfo(string param)
 {                 
     ConnectionStringSettings conn = ConfiguationManager.ConnectionStrings["MasterDBConnectionString"];
     SQLDataSource Details = new SqlDataSource(conn.ConnectionString, "SELECT * FROM [tblInfo] WHERE ([ParamID] = "+param);
     DataRowView db = (DataRowView)Details.Select(DataSourceSelectArguments.Empty);
      return db;
  }

我做错了什么，因为在我的javascript调用数据。名称或数据。参数不起作用。应该是data["Parameter"]吗？还是我离基地太远了

第1版：

我在这里更改了很多代码，这就是我所拥有的，我现在它正在工作

$(document).ready(function(){ 
   $("#<%=dblParameter.ClientID%>").change(function(){
     var myparam= $("#<%=dblParameter.ClientID%>").val(); //id name for dropdown list
       $.ajax({
         type:"POST",
         url:"Details.aspx/getDBInfo",
         data:'{param:"'+myparam+'"}',
         contentType:application/json; charset=utf-8",
         success: function(data)
         {
             alert(data.d)
         }
     });
   });
 });
  protected void Page_Load(object sender, EventArgs e)
 {
 }
 [WebMethod]
 public static string getDBInfo(string param)
 {                 
     MyMainClass myInit = new MyMainClass();
     string target= myInit.GetInfo(param);
     return target;
 }

jquery AJAX和使用onchange for dropdownlist的Web服务

ASP.net将把数据包装在一个"d"对象中。通过ASP.NET序列化的所有ASMX服务都是这种情况。即使返回单个字符串值，它也将始终包装在"d"对象中。

您可以通过将成功回调更改为以下内容来解决问题：

$("#<%=txtParameter.ClientID%>;").text(data.d.Parameter);
$("#<%=txtName.ClientID%>;").text(data.d.Name);
$("#<%=txtSSN.ClientID%>;").text(data.d.SSN);

您可以在这里准备更多信息：ASP.NET AJAX 版本之间的突破性更改

这就是工作原理：

  $(document).ready(function(){  
    $("#<%=dblParameter.ClientID%>").change(function(){ 
     var myparam= $("#<%=dblParameter.ClientID%>").val(); //id name for dropdown list       
     $.ajax({ 
      type:"POST",
      url:"Details.aspx/getDBInfo",
      data:'{param:"'+myparam+'"}',
      contentType:application/json; charset=utf-8",
      success: function(data)
      {       
       alert(data.d)
      } 
  }); 
 });
});  
protected void Page_Load(object sender, EventArgs e)  {
 } 
[WebMethod]
public static string getDBInfo(string param)  { 
     MyMainClass myInit = new MyMainClass();
     string target= myInit.GetInfo(param);
  return target;
}

开始：

function getDBInfo() {
    var mySelectedIndex = $('#<%=dblParameter.ClientID%>').val();
    $.ajax({
        type: 'POST',
        url: '/Manage/Details.aspx',
        data: JSON.stringify({ param: mySelectedIndex }),
         contentType: 'application/json; charset=utf-8',
         success: function(data) {
             $('#<%=txtParameter.ClientID%>').text(data.d.Parameter);
             $('#<%=txtName.ClientID%>').text(data.d.Name);
             $('#<%=txtSSN.ClientID%>').text(data.d.SSN);
         }
    });
}

还要确保从页面方法返回ign的对象具有成功回调中使用的Parameter、Name和SSN属性。您正在返回一个DataRowView，我怀疑它是否具有这样的属性。在这种情况下，定义并使用一个强类型类，该类将从页面方法返回。

还要注意使用JSON.stringify方法发送JSON请求。这种方法是现代浏览器内置的，但如果您需要支持传统浏览器，则需要在页面中包含json2.js脚本。

您还会注意到我对您的代码所做的其他修改：

  • 删除了jQuery选择器中服务器端表达式后不必要的;
  • 从AJAX调用中删除了dataType: 'json'=>这是不必要的，jQuery足够智能，可以从服务器Content-Type响应标头中推断出它
  • 在ajax调用中正确引用了contentType参数
  • 将.d添加到传递给success回调的data参数中。它是一个ASP.NET的东西，它用以下d属性包装整个JSON响应：{ d: ...... }

我还建议您阅读以下关于使用jQuery调用ASP.NET PageMethods/Script WebMethods的文章。

我对json了解不多，但你可以用这种方式。调试"结果"，看看里面有什么。

function getDBInfo()
{
// GET UR WEBMETHOD PARAM: SUPPOSE X
PageMethods.getDBInfo(X, OnSucceeded, OnFailed);
}
// Callback function invoked on successful completion of the page method.
function OnSucceeded(result, methodName) {
if (result != null && result != '')
   // do whatever
else
    //do whatever
}
// Callback function invoked on failure of the page method.
function OnFailed(error, methodName) {
if (error != null) {
    // do whatever
}
}
相关文章：