jquery datatable ajax 返回错误

Question

这是我的代码，它在我的 Visual Studio 12 机器中完美地从 Web 服务返回症状列表。

$('#manLeg').mapster($.extend({}, options,{

    onClick: function (e) {

        if (e.key === 'toes')
        {
            $.ajax({
                url: "SympsService.asmx/GetSymptoms",
                method: "post",
                dataType: "json",
                data: JSON.stringify({ organ_name: "toes" }),
                contentType: "application/json",
                success: function (data) {
                    createDataTable('#choiseTable', null);
                    createDataTable("#symptomsTable", null);
                    $('#choiseTable').on("click", "tbody button",  function (evt) { moveRow(evt, '#choiseTable', '#symptomsTable'); } )
                    $('#symptomsTable').on("click", "tbody button", function (evt) { moveRow(evt, '#symptomsTable', '#choiseTable'); })
                    var sympList = 'GetSymptoms' ? JSON.parse(data.d) : data.d;
                    createDataTable('#symptomsTable', sympList);


                    function createDataTable(target, data) {

                        $(target).DataTable({
                            destroy: true,
                            paging: false, searching: false, info: false, data: data,

                            columnDefs: [{

                                targets: [-1], render: function () {
                                    return "<button type='button'>" + (target == '#choiseTable' ? 'Remove' : 'Choose') + "</button>"
                                }
                            }],
                            columns: [
                                {
                                    'data': 'Sympt',
                                    'title': 'toes Symptoms',
                                    class: 'center'
                                },
                            {
                                'data': null, 'title': 'Action'

                            }
                            ]

                        });
                    }


                    function moveRow(evt, fromTable, toTable) {

                        var table1 = $(fromTable).DataTable();
                        var table2 = $(toTable).DataTable();
                        var tr = $(evt.target).closest("tr");
                        var row = table1.rows(tr);

                        var obj = { 'Sympt': row.data()[0].Sympt };
                        table2.row.add(obj).draw();
                        row.remove().draw();

                    }
                },
                error: function (error, status) {
                    console.log(error);
                    debugger;
                }
            });

但是当我在 Visual Studio 13 上的另一台机器上运行它时，它会在 console.log(error) 上返回错误。错误是：

Object { readyState: 4, getResponseHeader: .ajax/x.getResponseHeader(), getAllResponseHeaders: .ajax/x.getAllResponseHeaders(), setRequestHeader: .ajax/x.setRequestHeader(), overrideMimeType: .ajax/x.overrideMimeType(), statusCode: .ajax/x.statusCode(), abort: .ajax/x.abort(), state: .Deferred/d.state(), always: .Deferred/d.always(), then: .Deferred/d.then(), 11 more… }

这让我发疯，因为我需要在那台机器上运行它，但无法理解这个错误的含义。 任何形式的帮助将不胜感激。在此致谢。

Answer 1

我重新整理了一下，想出了这个

    $('#manLeg').mapster($.extend({}, options,
        {
            onClick: function (e) {
                if (e.key === 'toes') {
                    doAjax();
                }
            }
        }));

    function doAjax() {

        $.ajax({
            url: "SympsService.asmx/GetSymptoms",
            method: "post",
            dataType: "json",
            data: JSON.stringify({ organ_name: "toes" }),
            contentType: "application/json",
            success: function (data) {
                createDataTable('#choiseTable', null);
                createDataTable("#symptomsTable", null);
                $('#choiseTable').on("click", "tbody button",  function (evt) { moveRow(evt, '#choiseTable', '#symptomsTable'); } )
                $('#symptomsTable').on("click", "tbody button", function (evt) { moveRow(evt, '#symptomsTable', '#choiseTable'); })
                var sympList = 'GetSymptoms' ? JSON.parse(data.d) : data.d;
                createDataTable('#symptomsTable', sympList);
            },
            error: function (responseError, status) {
                console.log(responseError);
                debugger;
            }
        });

    }

    function createDataTable(target, data) {

        $(target).DataTable({
            destroy: true,
            paging: false, searching: false, info: false, data: data,
            columnDefs: [{

                targets: [-1], render: function () {
                    return "<button type='button'>" + (target == '#choiseTable' ? 'Remove' : 'Choose') + "</button>"
                }
            }],
            columns: [
                {
                    'data': 'Sympt',
                    'title': 'toes Symptoms',
                    class: 'center'
                },
            {
                'data': null, 'title': 'Action'

            }
            ]

        });
    }


    function moveRow(evt, fromTable, toTable) {

        var table1 = $(fromTable).DataTable();
        var table2 = $(toTable).DataTable();
        var tr = $(evt.target).closest("tr");
        var row = table1.rows(tr);

        var obj = { 'Sympt': row.data()[0].Sympt };
        table2.row.add(obj).draw();
        row.remove().draw();

    }