JQuery - Ajax和Tomcat跨域请求问题解决方法!

Posted sunylat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery - Ajax和Tomcat跨域请求问题解决方法!相关的知识,希望对你有一定的参考价值。

在JQuery里面使用Ajax和Tomcat服务器之间进行数据交互,遇到了跨域请求问题,无法成功得到想要的数据!

错误信息部分截图:

通过错误信息判断知道已经发生在Ajax跨域请求问题了!

当前Tomcat服务器,是一个已经存在的工程,有APP同这部分代码一同工作。我所做的是开发另外一款手机应用程序,并且使用已有的接口!在这种情况下,实现Ajax跨域请求,而且对目前源代码影响越小越好!怎样达到这样的目标?最终通过为Tomcat添加过滤器方式完成!

由于此项目是商业项目,服务器并不是我管理,所以无法提供具体代码和截图,具体实现根据下面这篇文章:

https://blog.csdn.net/appppppen/article/details/73196448

对于不了解JAVA开发朋友,可以通过下面文章了解一下Tomcat的过滤器:

http://www.runoob.com/servlet/servlet-writing-filters.html

最终,在服务器上面配置好过滤器,客户端通过JQuery Ajax可以和服务器交互数据了,下面是获取数据的部分截图:

我的JQuery Ajax页面代码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery跨域解决方法</title>
    <script src="js/common.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
</head>

<script language="javascript">

    $(document).ready(function () {

        $("#submit").unbind("click").bind("click", function (e) {
e.preventDefault(); $.ajax({ url:
"请求数据网址", type: "post", data: $("#form1").serialize(),//要提交数据 //另外一种提交数据方式,有的时候应该有用处 // data: { // \'参数名称\': \'参数值\' // }, dataType: "json",//从服务器返回数据类型 beforeSend: function (request) { //发送请求前调用的函数,需要配置可以在这里做 }, success: DoAjaxSuccess, error: DoAjaxError, complete: DoComplete }) //Ajax执行成功后调用的函数 function DoAjaxSuccess(data, status, jqxhr) { //得到返回的数据 var responseText = jqxhr.responseText; //解析JSON数据 $.parseJSON(responseText); //在Chrome浏览器控制台打印信息 console.log(responseText); //在页面显示得到的数据 $("#ajax-responseData").html(responseText); //恢复默认错误信息 $("#ajax-error").html("错误信息:"); } //Ajax执行失败后调用的函数 function DoAjaxError(jqxhr, status, errorMsg) { //在页面显示错误信息 $("#ajax-error").html("错误信息:" + errorMsg); } //Ajax执行完毕后调用的函数 function DoComplete(jqxhr, status) { //在页面显示完成状态 $("#ajax-status").html("完成状态:" + status); //操作时间 var curTime = GetCurTime(); $("#ajax-responseTime").html(curTime); } }); }) </script> <body> <form id="form1" name="form1" method="post" action="#"> <table width="100%" border="1"> <tbody> <tr> <td> <table width="100%" border="0"> <tbody> <tr> <td width="7%">服务器:Tomcat</td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table width="100%" border="1"> <tbody> <tr> <td width="67%"> <table width="100%" border="1"> <tbody> <tr> <td><label for="tel">电话:</label> <input name="tel" type="text" id="tel" value=""></td> </tr> <tr> <td><label for="pwd">密码:</label> <input name="pwd" type="text" id="pwd" value=""></td> </tr> </tbody> </table> </td> <td width="33%"><input type="submit" name="submit" id="submit" value="提交"></td> </tr> </tbody> </table> </td> </tr> <tr> <td>操作时间:<a style="color: red" id="ajax-responseTime">&nbsp;</a></td> </tr> <tr> <td id="ajax-status">完成状态:</td> </tr> <tr> <td id="ajax-error">错误信息:</td> </tr> <tr> <td id="ajax-responseData">&nbsp;</td> </tr> </tbody> </table> </form> </body> </html>

注意:得到返回JSON数据,在Ajax执行成功回调函数中,具体代码是:

            //Ajax执行成功后调用的函数
            function DoAjaxSuccess(data, status, jqxhr) {

                //得到返回的JSON数据
                var responseText = jqxhr.responseText;

                //解析JSON数据
                $.parseJSON(responseText);

                //在Chrome浏览器控制台打印信息
                console.log(responseText);

                //在页面显示得到的数据
                $("#ajax-responseData").html(responseText);

                //恢复默认错误信息
                $("#ajax-error").html("错误信息:");
            }

common.js代码:这是上面文件里面引用的一个提供一些功能的JS文件

//补齐两位数
function padleft0(obj) {
    return obj.toString().replace(/^[0-9]{1}$/, "0" + obj);
}

//得到当天日期
function GetCurTime() {
    var nowtime = new Date();
    var year = nowtime.getFullYear();
    var month = padleft0(nowtime.getMonth() + 1);
    var day = padleft0(nowtime.getDate());
    var hour = padleft0(nowtime.getHours());
    var minute = padleft0(nowtime.getMinutes());
    var second = padleft0(nowtime.getSeconds());
    var millisecond = nowtime.getMilliseconds();
    millisecond = millisecond.toString().length == 1 ? "00" + millisecond : millisecond.toString().length == 2 ? "0" + millisecond : millisecond;
    return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second + "." + millisecond;
}

 

以上是关于JQuery - Ajax和Tomcat跨域请求问题解决方法!的主要内容,如果未能解决你的问题,请参考以下文章

jQuery使用ajax跨域请求获取数据

jQuery跨域请求带Cookie和Session的方法

JQuery的Ajax跨域请求原理概述及实例

跨域 jQuery Ajax 请求和 WCF REST 服务

浅谈jquery中的ajax请求和跨域请求

jQuery ajax调接口时跨域