jQuery、Handlebar和AJAX，传入错误的responseText

我一直在从Jeffrey Way的一系列视频中学习jQuery，但我不明白为什么我在AJAX调用中没有得到正确的响应

视频链接：在24:00分左右开始

我没有从用户那里获取数据，而是得到了一个responseText：

我已经重做了几次教程，并复制了源代码，但仍然得到相同的结果

有人能解释一下我做错了什么吗

模板

<div class="employee_info">
    <script id="employee_info_template" type="text/x-handlebars-template">
        <p>{{info}}</p>
        <span class="close">X</span>
    </script>
</div>

应显示authorinfo的jquery代码

displayAuthorInfo: function(e) {
        var self = Employees;

        self.config.employeeInfo.slideUp( 300 );

        var jqxhr = $.ajax({
            data: {
                employee_id: $(this).data('employee_id')
            }

        }).done(function(results) {
            self.config.employeeInfo.html(self.config.employeeInfoTemplate({ info: results })).slideDown(300);
        });
        console.log(jqxhr);

        e.preventDefault();

    },
    closeOverlay: function() {
        Employees.config.employeeInfo.slideUp(300);
    }

整个jquery

var Employees = {
    init: function(config) {
        this.config = config;
        this.setupTemplates();
        this.bindEvents();

        $.ajaxSetup({
            url: 'index.php',
            type: 'POST'
        });

        $('button').remove(); // remove submit button
    },
    bindEvents: function() {
        this.config.letterSelection.on('change', this.fetchEmployees);
        this.config.employeesList.on('click', this.displayAuthorInfo);
        this.config.employeeInfo.on('click', 'span.close', this.closeOverlay);

    },
    setupTemplates: function() {
        this.config.employeeListTemplate = Handlebars.compile(this.config.employeeListTemplate);
        this.config.employeeInfoTemplate = Handlebars.compile(this.config.employeeInfoTemplate);

        Handlebars.registerHelper('fullName', function(employee) {
           return employee.first_name + ' ' + employee.last_name;
        });
    },
    fetchEmployees: function() {
        var self = Employees;

        $.ajax({
            data: self.config.form.serialize(),
            dataType: 'json',
            success: function(results) {
                self.config.employeesList.empty();

                if (results[0]) {
                    self.config.employeesList.append(self.config.employeeListTemplate(results));
                } else {
                    self.config.employeesList.append('<li>Nothing returned</li>');
                }
            }
        });
    },
    displayAuthorInfo: function(e) {
        var self = Employees;

        self.config.employeeInfo.slideUp( 300 );

        var jqxhr = $.ajax({
            data: {
                employee_id: $(this).data('employee_id')
            }

        }).done(function(results) {
            self.config.employeeInfo.html(self.config.employeeInfoTemplate({ info: results })).slideDown(300);
        });
        console.log(jqxhr);

        e.preventDefault();

    },
    closeOverlay: function() {
        Employees.config.employeeInfo.slideUp(300);
    }

};

Employees.init({
    letterSelection: $('#q'),
    form: $('#employee-selection'),
    employeeListTemplate: $('#employee_list_template').html(),
    employeeInfoTemplate: $('#employee_info_template').html(),
    employeesList: $('ul.employee_list'),
    employeeInfo: $('div.employee_info')
});

我的JS脚本中的bindEvents:函数缺少一个li，这就解决了这个问题

特别是这一行：

this.config.employeesList.on'click'，li'，this.displayAuthorInfo

var Employees = {
    init: function(config) {
        this.config = config;
        this.setupTemplates();
        this.bindEvents();

        $.ajaxSetup({
            url: 'index.php',
            type: 'POST'
        });

        $('button').remove(); // remove submit button
    },
    bindEvents: function() {
        this.config.letterSelection.on('change', this.fetchEmployees);
        this.config.employeesList.on('click', this.displayAuthorInfo);
        this.config.employeeInfo.on('click', 'span.close', this.closeOverlay);

    },
    setupTemplates: function() {
        this.config.employeeListTemplate = Handlebars.compile(this.config.employeeListTemplate);
        this.config.employeeInfoTemplate = Handlebars.compile(this.config.employeeInfoTemplate);

        Handlebars.registerHelper('fullName', function(employee) {
           return employee.first_name + ' ' + employee.last_name;
        });
    },
    fetchEmployees: function() {
        var self = Employees;

        $.ajax({
            data: self.config.form.serialize(),
            dataType: 'json',
            success: function(results) {
                self.config.employeesList.empty();

                if (results[0]) {
                    self.config.employeesList.append(self.config.employeeListTemplate(results));
                } else {
                    self.config.employeesList.append('<li>Nothing returned</li>');
                }
            }
        });
    },
    displayAuthorInfo: function(e) {
        var self = Employees;

        self.config.employeeInfo.slideUp( 300 );

        var jqxhr = $.ajax({
            data: {
                employee_id: $(this).data('employee_id')
            }

        }).done(function(results) {
            self.config.employeeInfo.html(self.config.employeeInfoTemplate({ info: results })).slideDown(300);
        });
        console.log(jqxhr);

        e.preventDefault();

    },
    closeOverlay: function() {
        Employees.config.employeeInfo.slideUp(300);
    }

};

Employees.init({
    letterSelection: $('#q'),
    form: $('#employee-selection'),
    employeeListTemplate: $('#employee_list_template').html(),
    employeeInfoTemplate: $('#employee_info_template').html(),
    employeesList: $('ul.employee_list'),
    employeeInfo: $('div.employee_info')
});