JQuery - Ajax和Tomcat跨域请求问题解决方法！
在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"> </a></td>
</tr>
<tr>
<td id="ajax-status">完成状态：</td>
</tr>
<tr>
<td id="ajax-error">错误信息：</td>
</tr>
<tr>
<td id="ajax-responseData"> </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跨域请求问题解决方法！的更多相关文章
- jQuery ajax的jsonp跨域请求
一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...
- jquery ajax GET POST 跨域请求实现
同一段逻辑代码需要在多个网站中使用, 每个网站都新建一个ashx真是扯蛋的作法, 所以想只请求一处的ashx, 这样便于维护和修改, 那么,ajax跨域问题就来了. 废话少说, 直接上代码, 我现 ...
- tomcat跨域请求
tomcat A请求tomcat B中的数据(本人是在同一台机器上2个tomcat端口不同,在不同机器上有时间会测得) 博主用的是ajax请求 在A 请求B中数据,用下面的方法可以 在被请求的tomc ...
- js中ajax如何解决跨域请求
js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...
- Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...
- Ajax跨域请求action方法，无法传递及接收cookie信息（应用于系统登录认证及退出）解决方案
最近的项目中涉及到了应用ajax请求后台系统登录,身份认证失败,经过不断的调试终于找到解决方案. 应用场景: 项目测试环境:前端应用HTML,js,jQuery ajax请求,部署在Apache服务器 ...
- jQuery 跨域访问问题解决方法（转）
转自:http://www.jb51.net/article/21213.htm 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记 ...
- 客户端ajax请求为实现Token验证添加headers后导致正常请求变为options跨域请求解决方法
客户端为了实现token认证,通过Jquery的ajaxSetup方法全局配置headers: 全局配置headers后会导致部分不需要token认证的请求变为options请求,导致跨域访问.报错信 ...
- 第114天：Ajax跨域请求解决方法（二）
一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js http:// (协议号) www (子 ...
随机推荐
- 本地Maven环境配置
本地Maven环境配置 下载配置文件:http://10.1.10.138:6060/root/DevelopmentSpecification/archive/master.zip 解压master ...
- wdk Windows驱动开发
https://www.cnblogs.com/liaoguifa/p/9049859.html 安装wdk8.1
- makefile all
all:udps udpc udps:udpserv.c gcc -Wall -o udps udpserv.cudpc:udpclient.c gcc -Wall -o udpc udp ...
- 使用 EWS（Exchange Web Service）协议读取邮件、发送邮件
问题: 公司之前可以通过POP3协议收发邮件,因而在SoapUI中用JavaMail可以读取邮件,后来配置了Office 365,POP3协议端口不再开放,邮件全部读取失败,报login timeou ...
- 深入浅出 JMS（三） - ActiveMQ 消息传输
深入浅出 JMS(三) - ActiveMQ 消息传输 一.消息协商器(Message Broker) broke:消息的交换器,就是对消息进行管理的容器.ActiveMQ 可以创建多个 Broker ...
- 03 Maven 坐标与依赖
Maven 坐标与依赖 Maven 的一大功能是管理项目依赖.为了能自动化地解析任何一个 Java 构件, Maven 就必须将它们唯一标识,这就依赖管理的底层基础 一一 坐标.本章将详细分析 Mav ...
- 将Tomcat设置为自动启动的服务最快捷方法
将Tomcat设置为自动启动的服务: 最近遇到了个问题,服务器上的项目突然访问不了,就上服务器去重启了tomcat服务,谁知道到最后tomcat的服务报错了,重新启动服务的选项 也没有,之前这个项目也 ...
- 做SEO都需要具备哪些方面的知识
做seo需要了解的基本知识有利于seo工作的进行 一.了解搜索引擎的工作原理 搜索引擎的基本工作原理包括如下三个过程: 1.首先在互联网中发现.搜集网页信息; 2.同时对信息进行提取和组织建立索引库; ...
- 被弃用的php函数以及被那个代替
原文链接 http://blog.csdn.net/a11085013/article/details/8937848 下面列举了部分被弃用的函数: call_user_method ...
- 着重基础之—构建工具—Maven的依赖管理
着重基础之—构建工具—Maven的依赖管理 项目构建利器Maven给我们开发人员带来了极大的便利,从繁琐的jar包管理中脱身的程序员终于可以有时间再进入另一个坑了. 我今天要给大家分享的内容是我在实际 ...