在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. Spring框架的Bean管理的配置文件方式

    1. id属性和name属性的区别 * id -- Bean起个名字,在约束中采用ID的约束,唯一 * 取值要求:必须以字母开始,可以使用字母.数字.连字符.下划线.句话.冒号 id:不能出现特殊字符 ...

  2. .zip/.rar打包与解压

    Linux下如何解压.zip和.rar文件,对于Window下的常见压缩文件.zip和.rar,Linux也有相应的方法来解压它们: 1)对于zip linux下提供了zip和unzip程序,zip是 ...

  3. Ubuntu部分快捷键的使用简介

    1.切换到字符界面 Ctrl+Alt+F1 切换到tty1字符界面 Ctrl+Alt+F2 切换到tty2字符界面 Ctrl+Alt+F3 切换到tty3字符界面 Ctrl+Alt+F4 切换到tty ...

  4. Task构造

    //原文:http://www.tuicool.com/articles/IveiQbQ 创建并且初始化Task 使用lambda表达式创建Task Task.Factory.StartNew(() ...

  5. Metro Revealed: Building Windows 8 apps with XAML and C# 阅读笔记

    第一章1.1.3中提到 Jesse Liberty 的<Pro Windows 8 Development with XAML and C#>,这是一本关于win8更全面的书,以后看.

  6. 521. Longest Uncommon Subsequence I

    static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...

  7. 2018.10.19 NOIP模拟 硬币（矩阵快速幂优化dp）

    传送门 不得不说神仙出题人DZYODZYODZYO出的题是真的妙. f[i][j][k]f[i][j][k]f[i][j][k]表示选的硬币最大面值为iii最小面值不小于jjj,总面值为kkk时的选法 ...

  8. Django-组件

    https://www.cnblogs.com/yuanchenqi/articles/8034442.html

  9. Django入门与实践 1-16章总结

    注意事项:随时备份.随时记录.从宏观到微观 不闻不若闻之,闻之不若见之,见之不若知之,知之不若行之:学至于行之止矣 安装 Python 3.6.2 pip install django==1.11.4 ...

  10. redhat 6用yum方式安装nginx

    前提条件:如果发生了没有注册redhat账号造成没有权限使用yum的情况下,可以参考:http://www.cnblogs.com/boshen-hzb/p/6080431.html 1.cd /et ...