在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. 【原创】Silverlight的ComboBox.SelectValue无法赋值

      前几天开发中 给ComboBox的SelectValue属性赋值是,老是赋不上去.之前SelectValue为Null,执行完调试看下,还是Null.很诡异   ComboBox的SelectVa ...

  2. Castle ActiveRecord学习（一）简介

    简介 来源:http://www.cnblogs.com/zxj159/p/4082987.html 一.Active Record(活动记录)模式 Active Record是业务逻辑层中(< ...

  3. 安全运维 -- 更改ssh端口

    环境:Ubuntu 16 前言 黑客遍地都是,ssh/pop3/ftp等爆破工具的流行让站长的日常运维工作量大大加重.Metasplot,Bruter等工具更是针对以上协议有专门 的破解方法,有字典破 ...

  4. ffmpeg 入门教程

    1.在terminal,安装ffmpeg开源库 #brew install ffmpeg 2.新建一个目录first_ffmpeg,并在first_ffmpeg目录下新建ffmpeg目录 3.拷贝/u ...

  5. 专2-第二课 Eclipse开发环境搭建

    2.1下载Eclipse 2.2 安装C/C++版本的Eclipse 2.3 安装JDT插件开发Java程序 2.4 使用Eclipse开发驱动程序 既然安装了eclipse来进行驱动学习,那么我们就 ...

  6. php-生成数据库设计文档

    在线以及提供下载数据库设计文档 $dbserver = "192.168.128.190:42578"; $dbusername = "root"; $dbpa ...

  7. Ehcache整合spring配置

    为了提高系统的运行效率,引入缓存机制,减少数据库访问和磁盘IO.下面说明一下ehcache和spring整合配置. 1.   需要的jar包 slf4j-api-1.6.1.jar ehcache-c ...

  8. arduino uno r3 + SIM900 + USB打火机 实现电话触发点火

    需求来源 1.儿子过完年6岁,喜欢玩烟花,但是胆子小,于是我就负责点火,从年前26到大年初八,每天晚上要给儿子点鞭炮啊点鞭炮. 2.这边过年要打关门炮跟开门炮,大年初一凌晨还要起来帮老妈点鞭炮,说实在 ...

  9. =default(c++11)

    1.概念 1)如果我们需要编译器默认的行为,则可以在参数列表后面加上=default来显式地要求编译器生成合成版本的默认构造函数和拷贝控制成员:合成的默认构造函数.合成拷贝构造函数.合成拷贝赋值运算符 ...

  10. 使用async-http-client实现异步批量http请求

    最近项目中需要在微服务中调用rest接口,而且需要调用得次数很多,所以同步得http客户端已经不满足要求,在网上查阅资料后发现了async-http-client这个包得性能不错,所以写了个demo测 ...