Javascript到jqueryajax请求

我有一些

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>

我正试图将

Javscript

Ajax

请求转换为

Jquery

，但我得到一个

请求的资源上不存在“访问控制允许源代码”标题

错误和一个

POST

Jquery Ajax请求错误：

$(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
        }]
    });
    }
}

$（函数（）{
//设置默认日期
var startDate=Date.create（）.addDays（-6），//7天前
endDate=Date.create（）；//今天
变量范围=$（“#范围”）；
//显示输入范围中的日期
val（startDate.format（{MM}/{dd}/{yyyy}'）+'-'
+格式（'{MM}/{dd}/{yyyy}'）；
//负荷图
ajaxLoadChart（开始日期、结束日期）；
range.daterangepicker({
开始日期：开始日期，
endDate:endDate，
范围：{
“今天”：[“今天”，“今天”]，
“昨天”：[“昨天”，“昨天”]，
“最近7天”：[Date.create（）.addDays（-6），“今天”]，
“最近30天”：[Date.create（）.addDays（-29），“今天”]
}
}，函数（开始，结束）{
ajaxLoadChart（开始、结束）；
});
//用于通过AJAX加载数据并将其显示在图表上的函数
函数ajaxLoadChart（开始日期、结束日期）{
//如果未传递任何数据（图表已清除）
如果（！startDate | |！endDate）{
返回；
}
//否则，发出AJAX请求
$.ajax({
网址：'http://192.168.1.6:8083/Servlet/PreProcessor',
键入：“POST”，
跨域：是的，
async:true，
数据类型：“json”，
start:startDate.format（{MM}/{dd}/{yyyy}'），
end:endDate.format（{MM}/{dd}/{yyyy}'），
成功：功能（数据）{
默认图表（数据）；
}
});
}
});
函数默认值图表（数据）{
if（（data.indexOf（“未找到记录”）>-1）
||（data.indexOf（“必须选择日期”）>-1）{
$（'#msg'）.html（''+数据+''）；
}否则{
$（'#msg'）.empty（）；
$（“#图表”）。高图({
图表：{
类型：'arearange'，
zoomType:'x'
},
标题：{
文字：“白天的温度变化”
},
xAxis：{
键入：“日期时间”
},
亚克斯：{
标题：{
文本：空
}
},
工具提示：{
十字准星：没错，
分享：是的，
valueSuffix:“°C”
},
图例：{
已启用：false
},
系列：[{
名称：“温度”，
数据：数据
}]
});
}
}

我对

Jquery

和

Javascript

都是新手，看不出哪里出了问题，研究表明，向ajaxjquery请求中添加

crossDomain:true

会设置请求中的头，所以可能是我的代码出了问题

编辑

---

再看一遍，这是第一个已经使用Jquery的代码段吗？

第一个代码段正在使用Jquery$Post语法糖，用于将$.ajax与type=“Post”一起使用。我不知道为什么第二个代码会出现CORS错误，但第一个代码不会。您可以使用chrome developer工具来查找请求和响应的标题，从而对标题进行故障排除。

---

或者，如果要发布到同一url，则可以使用相对地址，而不是完全限定的HTTP://地址

因此，我的代码的问题在于向

Ajax

请求添加参数的方式

我的尝试结构如下：

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

当它的结构应该是这样时：

$.ajax({
        url: 'http://192.168.1.6:8083/IBMServlet_war/PreProcessor',
        crossDomain: true,
        async: true,
        type: "POST",
        dataType: "json",
        data:{ start: startDate.format('{MM}/{dd}/{yyyy}'), end : endDate.format('{MM}/{dd}/{yyyy}')},
        success: function (data) {
            defaultChart(data);
        }
    }).error(function(xhr, status, error) {
            alert("error");
            console.log(xhr);
    });

---

我一直在查看chrome中的响应/请求头，在失败的响应头上，我丢失了：

访问控制允许凭据：true

和

访问控制允许来源：myurl

是否与在tomcat服务器上的筛选器中使用通配符有关？我尝试插入我的域而不是

/*

，但它停止工作。通过查看tomcat文档（），我认为您需要为cors.exposed.headers添加init参数以包括这些头。只需在文档页面上搜索一个例子。我已经将问题缩小到服务器上的

doPost

方法，如果我不将

type:POST

应用到Ajax请求中，它会起到一半的作用，但默认为

get

，并且不会从请求中检索日期，因此我不会得到响应。当我以我现在的方式使用ajax时，我是否需要在服务器端以不同的方式解析请求？$。ajax使用方法：“POST”而不是键入：“POST”作为参数。我敢打赌，如果你现在检查broswer提供的方法，它会被认为是一个GET，因为这是$.ajax的默认值。我解决了这个问题，感谢你的输入，你促使我找到了解决方案。

$.ajax({
        url: 'http://192.168.1.6:8083/IBMServlet_war/PreProcessor',
        crossDomain: true,
        async: true,
        type: "POST",
        dataType: "json",
        data:{ start: startDate.format('{MM}/{dd}/{yyyy}'), end : endDate.format('{MM}/{dd}/{yyyy}')},
        success: function (data) {
            defaultChart(data);
        }
    }).error(function(xhr, status, error) {
            alert("error");
            console.log(xhr);
    });