jquery AJAX 和 web 服务使用 onchange 作为下拉列表

Question

我有一个下拉列表，我使用 jquery ajax 来调用 webmethod。我的预期解决方案是使用 ajax 根据下拉选择的索引更新当前页面上的所有数据字段。

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.Name 或 data.Parameter 不起作用。应该改为 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;
 }

Answer 1

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

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

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

您可以在此处了解更多信息：A breaking change between versions of ASP.NET AJAX

Answer 2

这是有效的：

  $(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;
} 

Answer 3

给你：

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

还要确保从页面方法返回的对象具有成功回调中使用的参数、名称和 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 的 following article。

Answer 4

我对 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
}
}