在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. php 函数中静态变量的问题

    <?php function msg() { static $a = 0; echo $a++, '<br />'; } msg(); msg(); msg(); 上述代码,分别输出 ...

  2. PHP下ajax跨域的解决方案之jsonp

    首先要说明一下json和jsonp的区别? json是一种基于文本的数据交换方式,或者叫做描述数据的一种格式. var person = { "name": "test& ...

  3. pthread_exit pthread_join

    int pthread_join(pthread_t thread, void **retval); int pthread_detach(pthread_t thread); void pthrea ...

  4. HDFS高可用性及其分布式系统思想基础

    源自单点失效问题,也就是当NameNode不可用的时候,用什么办法可以平滑过渡? 最直接的办法是再添加一个备用的NN,这就产生了Active NameNode和Standby NameNode的设计思 ...

  5. LaTeX 公式（转自）Iowa_Battleship 神犇

    传送门 (我这个蒟蒻只是mark一下 这个LaTex公式很全!!我是照着打数学公式的!! orz大佬Iowa

  6. conn not captured

    线程 和 事件中 变量 not captured 把变量定义为 static 或者添加为全局变量(放在main之前)

  7. 并发编程（二）concurrent 工具类

    并发编程(二)concurrent 工具类 一.CountDownLatch 经常用于监听某些初始化操作,等初始化执行完毕后,通知主线程继续工作. import java.util.concurren ...

  8. 2018.09.23 codeforces 1053A. In Search of an Easy Problem（gcd）

    传送门 今天的签到题. 有一个很显然的结论,gcd(n∗m,k)≤2gcd(n*m,k)\le 2gcd(n∗m,k)≤2. 本蒟蒻是用的行列式求三角形面积证明的. 如果满足这个条件,就可以直接构造出 ...

  9. arduino 串口命令解析

    /* DS3231_test.pde Eric Ayars 4/11 Test/demo of read routines for a DS3231 RTC. Turn on the serial m ...

  10. java多线程同步（转）

    原文地址:http://developer.51cto.com/art/201509/490965.htm 一.场景 因为当我们有多个线程要同时访问一个变量或对象时,如果这些线程中既有读又有写操作时, ...