通过jquery AJAX调用web方法和嵌套AJAX

Question

我在使用 jQuery ajax 更新 sql 数据库表时遇到问题。 这是我的场景。我正在研究权限表，以便为教师分配某种特权/权利来执行网站的某些必需功能。

1) 我调用一个 webmethod 并传递教师的 id 以使用 jQuery ajax 检索分配给该特定教师的所有权限 2) 在步骤 1 的成功函数中，我使用 jQuery ajax 调用另一个 Web 方法，并在针对列出的每个权限存在的复选框（打开/切换按钮 -- 它的输入类型是复选框）上绑定一个单击事件。 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"));
    }

此代码用于检索教师的权限并将其显示在 webForm 上。

   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的成功函数中调用的第二个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() 函数时，一切正常，它将复选框上的单击事件与事件特权绑定，但是当我单击它时，它给了我来自 UpdatePrivilege() 函数的 AJAX 函数的错误.

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