在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. 面向对象设计模式纵横谈：Bridge 桥接模式（笔记记录）

    桥接模式是一个比较难理解的设计模式,设计和分析的时候也不容易把握,咱们听听“李建忠”老师是怎么来讲的.我们还是从演变的角度来说问题,一步一步的来把问题说清楚.先谈谈“抽象”和“实现”的关系. 抽象与实 ...

  2. js点击添加

    1.点击变色 <div id="dd" style="width:100px;height: 100px;background-color: #ccc"& ...

  3. dedecms模型类的引入

  4. gdb 调试带参数程序

    在gdb中,运行程序使用r或是run命令. 程序的运行,你有可能需要设置下面四方面的事. 1.程序运行参数. set args 可指定运行时参数.(如:set args 10 20 30 40 50) ...

  5. tty linux 打开和设置范例

    http://bbs.csdn.net/topics/340184140 /************************************************************** ...

  6. Android 编译参数 LOCAL_MODULE_TAGS

    此参数会影响到库生成后的存放位置,影响生成位置的应该是相关平台下的变量PRODUCT_PACKAGES http://blog.csdn.net/evilcode/article/details/64 ...

  7. 2018.07.31 bzoj4569: [Scoi2016]萌萌哒（并查集+倍增）

    传送门 对于每个限制,使用倍增的二进制拆分思想,用并查集数组fa[i][j]" role="presentation" style="position: rel ...

  8. Spring AOP 切面实现操作日志

    创建接口注解日志类 package com.fh.service.logAop; /** * Created by caozengling on 2018/7/21. */ import java.l ...

  9. java中的类、对象、方法

    类=一个种类(class)东西 对象=属于该种类的一个对象/物件(object,台湾翻译为‘物件’)方法=对这个种类的东西都可以进行的操作 比如我有一辆汽车-类 public class car {. ...

  10. VUE（现代库） VS jquery（传统库）

      众所周知最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .webpack以及 前端上 ...