通過jQuery AJAX調用Web方法和嵌套AJAX

Question

我在使用jQuery ajax更新sql數據庫表時遇到問題。 這是我的場景。我正在使用權限表來爲教師分配某種特權/權限來執行網站的一些必需功能。

1）我叫一個WebMethod，並通過教師的ID在步驟1中我調用另一個Web方法使用jQuery AJAX的成功函數使用jQuery AJAX 2）以檢索分配到特定教師的所有權限和綁定click事件複選框（開/關切換按鈕 - 其輸入類型爲複選框）針對列出的所有權限呈現。 3）當我點擊開/關切換複選框我想要更新特權表中的SQL數據庫表中的一行，如果它打開並且用戶將其關閉，那麼該特定特權將被分配給該老師。

這裏是我的代碼

public void UpdatePrivileges(string _columnName, byte _value, int _teacherid) 
    { 
     JavaScriptSerializer objserializer = new JavaScriptSerializer(); 
     myDatabase.CreateConnection(); 
     myDatabase.InitializeSQLCommandObject(myDatabase.GetCurrentConnection, "update tbl_privileges set " + _columnName + " = @val where teacher_id = @tid"); 
     myDatabase.obj_sqlcommand.Parameters.AddWithValue("@tid", _teacherid); 
     myDatabase.obj_sqlcommand.Parameters.AddWithValue("@val", Convert.ToByte(_value)); 
     try 
     { 
      myDatabase.OpenConnection(); 
      myDatabase.obj_sqlcommand.ExecuteNonQuery(); 
     } 
     finally 
     { 
      myDatabase.CloseConnection(); 
      myDatabase.obj_sqlcommand.Dispose(); 
     } 
     HttpContext.Current.Response.Write(objserializer.Serialize("Updated")); 
    } 

該代碼可用於檢索老師的特權，並顯示他們在網絡表單。

function GetTeacherPrivileges() { 
     var teacherid = $('#<%=txtTeacherIDToPopulatePrivileges.ClientID%>').val(); 
     $.ajax({ 
      url: 'source/WebServices/GetAllTeachers.asmx/GetPrivileges', 
      method: 'post', 
      data: { _teacherID: teacherid}, 
      datatype: 'json', 
      success: function (data) { 
       var obj = JSON.stringify(data); 
       var arrayjson = $.parseJSON(obj); 
       var actualarray = $.parseJSON(arrayjson); 
       $.each(actualarray, function (i, v) { 
        $('#tablebody').append('<tr class="table-row"> <td class="col-3"><span>Events</span></td><td class="col-2"><a href="#">is this teacher eligible to making events?</a></td><td class="col-3"><label class="switch centerbuttion "><input id="check_event" class="switch-input" type="checkbox" /><span class="switch-label" data-on="Yes" data-off="No"></span><span class="switch-handle"></span></label></td></tr><tr class="table-row"> <td class="col-3"><span>Attendance</span></td><td class="col-2"><a href="#">Do you want this teacher can mark attendance?</a></td><td class="col-3"><label class="switch centerbuttion "><input id="check_attendance" class="switch-input" type="checkbox" /><span class="switch-label" data-on="Yes" data-off="NO"></span><span class="switch-handle"></span></label></td></tr><tr class="table-row"><td class="col-3"><span>Homework</span></td><td class="col-2"><a href="#">Teacher will be able to upload homework with their respective classes.</a></td><td class="col-3"><label class="switch centerbuttion "><input id="check_homework" class="switch-input" type="checkbox" /><span class="switch-label" data-on="Yes" data-off="NO"></span><span class="switch-handle"></span></label></td></tr><tr class="table-row"><td class="col-3"><span>Reports</span></td><td class="col-2"><a href="#">Do you want this teacher to generate reports?</a></td><td class="col-3"><label class="switch centerbuttion "><input id="check_reports" class="switch-input" type="checkbox" /><span class="switch-label" data-on="Yes" data-off="NO"></span><span class="switch-handle"></span></label></td></tr><tr class="table-row"><td class="col-3"><span>Timetable</span></td><td class="col-2"><a href="#">Can this teacher make time table(s)?</a></td><td class="col-3"><label class="switch centerbuttion "><input id="check_timetable" class="switch-input" type="checkbox" /><span class="switch-label" data-on="Yes" data-off="NO"></span><span class="switch-handle"></span></label></td></tr><tr class="table-row"><td class="col-3"><span>Datesheet</span></td><td class="col-2"><a href="#">Can this teacher make Date Sheet(s)?</a></td><td class="col-3"><label class="switch centerbuttion "><input id="check_datesheets" class="switch-input" type="checkbox" /><span class="switch-label" data-on="Yes" data-off="NO"></span><span class="switch-handle"></span></label></td></tr>'); 
        var event = v.Event; 
        var attendance = v.Attendance; 
        var homework = v.Homework; 
        var reports = v.Reports; 
        var timetable = v.TimeTable; 
        var datesheet = v.DateSheet; 
        if (event == 1) { 
         $('#check_event').trigger('click'); 
        } 
        if (attendance == 1) { 
         $('#check_attendence').trigger('click'); 
        } 
        if (homework == 1) { 
         $('#check_homework').trigger('click'); 
        } 
        if (reports == 1) { 
         $('#check_reports').trigger('click'); 
        } 
        if (timetable == 1) { 
         $('#check_timetable').trigger('click'); 
        } 
        if (datesheet == 1) { 
         $('#check_datesheets').trigger('click'); 
        } 
        $('#check_event').bind({ 
         click: function() { 
          var privilegevalue = columnvalue('#check_event'); 
          UpdatePrivilege('event', privilegevalue); 
         } 
        }); 
       }); 
      }, 
      error: function (error) { 
       alert("Error: " + error); 
      } 
     }); 

這是我在上面AJAX的成功函數中爲綁定click事件調用的第二個AJAX代碼。

function UpdatePrivilege(column,value) { 
     var teacherid = $('#<%=txtTeacherIDToPopulatePrivileges.ClientID%>').val(); 
     $.ajax({ 
      url: 'source/WebServices/GetAllTeachers.asmx/UpdatePrivileges', 
      data: { _columnName: "'"+column+"'" , _value: value , _teacherid:teacherid }, 
      dataType: 'json', 
      dataContent: 'application/json; charset=utf-8', 
      success: function (data) { 
       alert('privilege updated'+data); 
      }, 
      error: function(data) { 
       alert('Error in updating privilege' + data); 
      } 
     }); 
    } 

當我跑我的aspx頁面，並輸入教師ID來GetAllTeachers（）函數的所有作品好，而且結合上覆選框，單擊事件對事件的特權，但是當我點擊它給我的錯誤從AJAX功能UpdatePrivilege（）函數。

Answer 1

如果你想發送json，你需要自己將數據串聯起來。你也並不需要額外的報價包裝"'"+column+"'"

嘗試：

function UpdatePrivilege(column,value) { 
    // I assume you are running this within Razor context and not in a javascript file 
    var teacherid = $('#<%=txtTeacherIDToPopulatePrivileges.ClientID%>').val(); 

    // create data object 
    var dataObj={ _columnName: column , _value: value , _teacherid:teacherid }; 
    // stringify it 
    var postData = JSON.stringify(dataObj); 

    $.ajax({ 
     url: 'source/WebServices/GetAllTeachers.asmx/UpdatePrivileges', 
     data: postData ,// stringified data 
     dataType: 'json', 
     contentType: 'application/json; charset=utf-8', 
     success: function (data) { 
      console.log('privilege updated', data); 
     }, 
     error: function(data) { 
      console.log('Error in updating privilege' , data); 
     } 
    }); 
}