Javascript 到 jquery Ajax 请求

Question

我有一些 Javascript 使用 Ajax 向我的 Tomcat 服务器发出请求。 我在 Tomcat 服务器上设置了一个过滤器，以允许跨域请求使用:

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

这是我已成功向我的 Tomcat servelet 发出请求的 Javascript 片段:

$(function() {

// Set the default dates
var startDate = Date.create().addDays(-6), // 7 days ago
endDate = Date.create(); // today

var range = $('#range');

// Show the dates in the range input
range.val(startDate.format('{MM}/{dd}/{yyyy}') + ' - '
        + endDate.format('{MM}/{dd}/{yyyy}'));

// Load chart
ajaxLoadChart(startDate, endDate);

range.daterangepicker({
    startDate : startDate,
    endDate : endDate,
    ranges : {
        'Today' : [ 'today', 'today' ],
        'Yesterday' : [ 'yesterday', 'yesterday' ],
        'Last 7 Days' : [ Date.create().addDays(-6), 'today' ],
        'Last 30 Days' : [ Date.create().addDays(-29), 'today' ]
    }
}, function(start, end) {
    ajaxLoadChart(start, end);
});

// Function for loading data via AJAX and showing it on the chart
function ajaxLoadChart(startDate, endDate) {
    // If no data is passed (the chart was cleared)
    if (!startDate || !endDate) {
        return;
    }
    // Otherwise, issue an AJAX request
    $.post('http://192.168.1.6:8083/Servlet/PreProcessor', {
        start : startDate.format('{MM}/{dd}/{yyyy}'),
        end : endDate.format('{MM}/{dd}/{yyyy}')
    }, function(data) {
        if ((data.indexOf("No record found") > -1)
                || (data.indexOf("Date must be selected.") > -1)) {
            $('#msg').html('<span style="color:red;">' + data + '</span>');
        } else {
            $('#msg').empty();
            $('#chart').highcharts({
                chart : {
                    type : 'arearange',
                    zoomType : 'x'
                },

                title : {
                    text : 'Temperature variation by day'
                },

                xAxis : {
                    type : 'datetime'
                },

                yAxis : {
                    title : {
                        text : null
                    }
                },

                tooltip : {
                    crosshairs : true,
                    shared : true,
                    valueSuffix : '°C'
                },

                legend : {
                    enabled : false
                },

                series : [ {
                    name : 'Temperatures',
                    data : data
                } ]
            });
        }
    }, 'json');
    }
});

我正在尝试将 Javscript Ajax 请求转换为 Jquery，但我得到了一个 No 'Access- Control-Allow-Origin' header is present on the requested resource 错误和我的 Jquery Ajax 请求的 POST 错误:

$(function () {

// Set the default dates
var startDate = Date.create().addDays(-6), // 7 days ago
endDate = Date.create(); // today

var range = $('#range');

// Show the dates in the range input
range.val(startDate.format('{MM}/{dd}/{yyyy}') + ' - '
        + endDate.format('{MM}/{dd}/{yyyy}'));

// Load chart
ajaxLoadChart(startDate, endDate);

range.daterangepicker({
    startDate: startDate,
    endDate: endDate,
    ranges: {
        'Today': ['today', 'today'],
        'Yesterday': ['yesterday', 'yesterday'],
        'Last 7 Days': [Date.create().addDays(-6), 'today'],
        'Last 30 Days': [Date.create().addDays(-29), 'today']
    }
}, function (start, end) {
    ajaxLoadChart(start, end);
});

// Function for loading data via AJAX and showing it on the chart
function ajaxLoadChart(startDate, endDate) {
    // If no data is passed (the chart was cleared)
    if (!startDate || !endDate) {
        return;
    }


     // Otherwise, issue an AJAX request
        $.ajax({
            url: 'http://192.168.1.6:8083/Servlet/PreProcessor',
            type: 'POST',
            crossDomain: true,
            async: true,
            dataType: "json",
            start: startDate.format('{MM}/{dd}/{yyyy}'),
            end: endDate.format('{MM}/{dd}/{yyyy}'),
            success: function (data) {
                defaultChart(data);
            }
        });
    }
});


function defaultChart(data) {
    if ((data.indexOf("No record found") > -1)
                     || (data.indexOf("Date must be selected.") > -1)) {
        $('#msg').html('<span style="color:red;">' + data + '</span>');
    } else {
        $('#msg').empty();
        $('#chart').highcharts({
            chart: {
            type: 'arearange',
            zoomType: 'x'
        },

        title: {
            text: 'Temperature variation by day'
        },

        xAxis: {
            type: 'datetime'
        },

        yAxis: {
            title: {
                text: null
            }
        },

        tooltip: {
            crosshairs: true,
            shared: true,
            valueSuffix: '°C'
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            data: data
        }]
    });
    }
}

我是 Jquery 和 Javascript 的新手，看不出哪里出了问题，研究建议我添加 crossDomain: true Ajax Jquery 请求会在请求中设置 header ，所以也许我的代码有问题？

编辑

再看看这个是第一个使用Jquery的片段吗？

Answer 1

第一个代码片段使用的是 jQuery。 $Post 语法糖用于将 $.ajax 与 type="POST"一起使用。我不确定为什么第二个代码会出现 CORS 错误，但第一个却不会。您可以使用 chrome 开发人员工具对 header 进行故障排除，以查看请求和响应中的 header 。
或者，如果您要发布到相同的 url，您可以使用相对地址而不是完全限定的 HTTP://地址。