在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跨域请求问题解决方法！的更多相关文章

  1. jQuery ajax的jsonp跨域请求

    一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...

  2. jquery ajax GET POST 跨域请求实现

    同一段逻辑代码需要在多个网站中使用, 每个网站都新建一个ashx真是扯蛋的作法,  所以想只请求一处的ashx, 这样便于维护和修改, 那么,ajax跨域问题就来了. 废话少说, 直接上代码,  我现 ...

  3. tomcat跨域请求

    tomcat A请求tomcat B中的数据(本人是在同一台机器上2个tomcat端口不同,在不同机器上有时间会测得) 博主用的是ajax请求 在A 请求B中数据,用下面的方法可以 在被请求的tomc ...

  4. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  5. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

  6. Ajax跨域请求action方法，无法传递及接收cookie信息（应用于系统登录认证及退出）解决方案

    最近的项目中涉及到了应用ajax请求后台系统登录,身份认证失败,经过不断的调试终于找到解决方案. 应用场景: 项目测试环境:前端应用HTML,js,jQuery ajax请求,部署在Apache服务器 ...

  7. jQuery 跨域访问问题解决方法（转）

    转自:http://www.jb51.net/article/21213.htm 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记 ...

  8. 客户端ajax请求为实现Token验证添加headers后导致正常请求变为options跨域请求解决方法

    客户端为了实现token认证,通过Jquery的ajaxSetup方法全局配置headers: 全局配置headers后会导致部分不需要token认证的请求变为options请求,导致跨域访问.报错信 ...

  9. 第114天：Ajax跨域请求解决方法（二）

    一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号)       www  (子 ...

随机推荐

  1. AssemblyVersion，AssemblyFileVersion解释以及获取

    简而言之,AssemblyVersion: 是程序集的版本,.NET的CLR用,用于标识出该dll的版本信息,用于定义强名称的版本号: AssemblyFileVersion: 为编译器生成的文件加入 ...

  2. ajax.beginform控制器中实体为null的问题

    控制器: 函数声明:public JsonResult ApplyFun(Test test) 原因:在视图中有一个表单的name属性为test,因为冲突所导致.

  3. 如何处理好前后端分离的 API 问题（转载自知乎）

    9 个月前 API 都搞不好,还怎么当程序员?如果 API 设计只是后台的活,为什么还需要前端工程师. 作为一个程序员,我讨厌那些没有文档的库.我们就好像在操纵一个黑盒一样,预期不了它的正常行为是什么 ...

  4. CSV 文件

    CSV 文件 CSV(Comma Separated Values 逗号分隔值) 是一种文件格式(如.txt..doc等),也可理解 .csv 文件就是一种特殊格式的纯文本文件.即是一组字符序列,字符 ...

  5. jstl $前 出现 空格 ，可能出现无法解析的 情况

    <c:if test="${sessionScope.contactName == null || sessionScope.contactName==''}"> 能正 ...

  6. PetaPoco与MySQL

    随便写写的,PetaPoco与MySQL一起使用,在一个工控项目中充分使用节省不少开发时间,经历大半年的努力的项目接近完成,客户不认帐,开始需求合同就是个败笔,技术还是仅能解决技术问题而已! 上图上代 ...

  7. 2018.09.26洛谷P1084 疫情控制（二分+倍增）

    传送门 好题啊. 题目要求的最大值最小,看到这里自然想到要二分答案. 关键在于怎么检验. 显然对于每个点向根走比向叶节点更优. 因此我们二分答案之后,用倍增将每个点都向上跳到跳不动为止. 这时我们ch ...

  8. 2018.06.27Going Home（二分图匹配）

    Going Home Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 24716 Accepted: 12383 Descript ...

  9. 2018.08.16 POJ1183反正切函数的应用（简单数学）

    传送门 代数变形一波. 显然有b,c>a. 那么这样的话可以令b=a+m,c=a+n. 又有a=(bc-1)/(b+c). 带入展开可知m*n=a*a+1. 要让m+n最小只需让m最大,这个结论 ...

  10. java.sql.SQLException: null, message from server: "Host 'xxx' is not allowed to connect to this MySQL server"

    java.sql.SQLException: null,  message from server: "Host 'xxx' is not allowed to connect to thi ...