ajax跨域访问数据

最新推荐文章于 2024-07-05 11:41:32 发布
最新推荐文章于 2024-07-05 11:41:32 发布
阅读量86 收藏
点赞数
文章标签： json java javascript ViewUI
原文链接：http://www.cnblogs.com/jiaqingshareing/p/6156201.html
版权

通过json发送和接受数据，数据以json的格式在服务器端和前台进行传递，什么是json数据？这里就不进行详细阐述，轻自行百度解决。

在html5 中利用ajax 异步请求时，会遇到跨域的问题，如果域名不一致、ip地址不一致，端口不一致都会导致跨域请求不成功。

为了解决这个问题，需要在前台和后台均设置相关的属性进行跨域请求。

现在展示服务器端的代码：

自己封装的过滤器：

package utils;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
public class CrossDomainFilter implements Filter {
	public void destroy() {
		// TODO Auto-generated method stub
	}
	public void doFilter(ServletRequest req, ServletResponse resp,
			FilterChain chain) throws IOException, ServletException {
		// TODO Auto-generated method stub
		HttpServletResponse res = (HttpServletResponse) resp;
		// 这里最好不要写通配符，如果允许多个域请求数据的话，可以直接用逗号隔开："http://www.baidu.com,http://google.com"
		res.setHeader("Access-Control-Allow-Origin", "*");
		res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
		res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept,X-Requested-With");
		//res.setHeader("Access-Control-Allow-Credentials","false");
		chain.doFilter(req, resp);
	}
	public void init(FilterConfig arg0) throws ServletException {
		// TODO Auto-generated method stub
	}
}



将字符串转换为json数据格式的工具类：
package utils; 

import java.beans.IntrospectionException;   
import java.beans.Introspector;  
import java.beans.PropertyDescriptor;  
import java.math.BigDecimal;  
import java.math.BigInteger;  
import java.util.List;  
import java.util.Map;  
import java.util.Set;  
import org.apache.commons.logging.Log;  
import org.apache.commons.logging.LogFactory;

public class JsonUtil {  
private static Log log = LogFactory.getLog(JsonUtil.class); 

public static String object2json(Object obj) {  
             StringBuilder json = new StringBuilder();  
             if (obj == null) {  
               json.append("\"\"");  
             } else if (obj instanceof String || obj instanceof Integer || obj instanceof Float  
                 || obj instanceof Boolean || obj instanceof Short || obj instanceof Double  
                 || obj instanceof Long || obj instanceof BigDecimal || obj instanceof BigInteger  
                 || obj instanceof Byte) {  
               json.append("\"").append(string2json(obj.toString())).append("\"");  
             } else if (obj instanceof Object[]) {  
               json.append(array2json((Object[]) obj));  
             } else if (obj instanceof List) {  
               json.append(list2json((List<?>) obj));  
             } else if (obj instanceof Map) {  
               json.append(map2json((Map<?, ?>) obj));  
             } else if (obj instanceof Set) {  
               json.append(set2json((Set<?>) obj));  
             } else {  
               json.append(bean2json(obj));  
             }  
             return json.toString();  
  }

public static String bean2json(Object bean) {  
             StringBuilder json = new StringBuilder();  
             json.append("{");  
             PropertyDescriptor[] props = null;  
             try {  
               props = Introspector.getBeanInfo(bean.getClass(), Object.class).getPropertyDescriptors();  
             } catch (IntrospectionException e) {}  
             if (props != null) {  
               for (int i = 0; i < props.length; i++) {  
                 try {  
                   String name = object2json(props[i].getName());  
                   String value = object2json(props[i].getReadMethod().invoke(bean));  
                   json.append(name);  
                   json.append(":");  
                   json.append(value);  
                   json.append(",");  
                 } catch (Exception e) {}  
               }  
               json.setCharAt(json.length() - 1, '}');  
             } else {  
               json.append("}");  
             }  
             return json.toString();  
  }

public static String list2json(List<?> list) {  
             StringBuilder json = new StringBuilder();  
             json.append("[");  
             if (list != null && list.size() > 0) {  
               for (Object obj : list) {  
                 json.append(object2json(obj));  
                 json.append(",");  
               }  
               json.setCharAt(json.length() - 1, ']');  
             } else {  
               json.append("]");  
             }  
             return json.toString();  
  }  

public static String array2json(Object[] array) {  
             StringBuilder json = new StringBuilder();  
             json.append("[");  
             if (array != null && array.length > 0) {  
               for (Object obj : array) {  
                 json.append(object2json(obj));  
                 json.append(",");  
               }  
               json.setCharAt(json.length() - 1, ']');  
             } else {  
               json.append("]");  
             }  
             return json.toString();  
  }

public static String map2json(Map<?, ?> map) {  
             StringBuilder json = new StringBuilder();  
             json.append("{");  
             if (map != null && map.size() > 0) {  
               for (Object key : map.keySet()) {  
                 json.append(object2json(key));  
                 json.append(":");  
                 json.append(object2json(map.get(key)));  
                 json.append(",");  
               }  
               json.setCharAt(json.length() - 1, '}');  
             } else {  
               json.append("}");  
             }  
             return json.toString();  
  }  

public static String set2json(Set<?> set) {  
             StringBuilder json = new StringBuilder();  
             json.append("[");  
             if (set != null && set.size() > 0) {  
               for (Object obj : set) {  
                 json.append(object2json(obj));  
                 json.append(",");  
               }  
               json.setCharAt(json.length() - 1, ']');  
             } else {  
               json.append("]");  
             }  
             return json.toString();  
  }  

public static String string2json(String s) {  
             if (s == null)  
               return "";  
             StringBuilder sb = new StringBuilder();  
             for (int i = 0; i < s.length(); i++) {  
               char ch = s.charAt(i);  
               switch (ch) {  
               case '"':  
                 sb.append("\\\"");  
                 break;  
               case '\\':  
                 sb.append("\\\\");  
                 break;  
               case '\b':  
                 sb.append("\\b");  
                 break;  
               case '\f':  
                 sb.append("\\f");  
                 break;  
               case '\n':  
                 sb.append("\\n");  
                 break;  
               case '\r':  
                 sb.append("\\r");  
                 break;  
               case '\t':  
                 sb.append("\\t");  
                 break;  
               case '/':  
                 sb.append("\\/");  
                 break;  
               default:  
                 if (ch >= '\u0000' && ch <= '\u001F') {  
                   String ss = Integer.toHexString(ch);  
                   sb.append("\\u");  
                   for (int k = 0; k < 4 - ss.length(); k++) {  
                     sb.append('0');  
                   }  
                   sb.append(ss.toUpperCase());  
                 } else {  
                   sb.append(ch);  
                 }  
               }  
             }  
             return sb.toString();  
  }  
}
web.xml配置文件：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<display-name></display-name>
	<servlet>
		<description>This is the description of my J2EE component</description>
		<display-name>This is the display name of my J2EE component</display-name>
		<servlet-name>showInfoServlet</servlet-name>
		<servlet-class>client_servlet.showInfoServlet</servlet-class>
	</servlet>
	<servlet>
		<description>This is the description of my J2EE component</description>
		<display-name>This is the display name of my J2EE component</display-name>
		<servlet-name>JsonServlet</servlet-name>
		<servlet-class>client_servlet.JsonServlet</servlet-class>
	</servlet>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>ajaxServlet</servlet-name>
    <servlet-class>client_servlet.ajaxServlet</servlet-class>
  </servlet>

	<filter>
		<filter-name>myFilter</filter-name>
		<filter-class>utils.CrossDomainFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>myFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

	<servlet-mapping>
		<servlet-name>showInfoServlet</servlet-name>
		<url-pattern>/servlet/showInfoServlet</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>JsonServlet</servlet-name>
		<url-pattern>/servlet/JsonServlet</url-pattern>
	</servlet-mapping>
  <servlet-mapping>
    <servlet-name>ajaxServlet</servlet-name>
    <url-pattern>/servlet/ajaxServlet</url-pattern>
  </servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>

用于处理业务逻辑的servlet:
package client_servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javabean.Route;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import services.RouteService;
import utils.JsonUtil;

public class showInfoServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
       doPost(request,response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		  response.setHeader("Access-Control-Allow-Origin","*");
		  response.setContentType("text/html; charset=UTF-8");//jsonp其实回写的就是一段JavaScript代码
		  PrintWriter out = response.getWriter();
		  //从数据库查询所有的路线route的集合list
		  RouteService rs = new RouteService();
		  String res = JsonUtil.list2json(rs.listAll());
		  out.print(res);
		  out.flush();
		  out.close();
	}
}

　　

通过hbuilder建立的demo.html文件：

该文件用于请求后台的servlet并且接受服务器端返回的json数据

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<title>hello world</title>

<script src="js/mui.min.js"></script>

<link href="css/mui.min.css" rel="stylesheet" />

<script type="text/javascript">

if(window.plus) {

plusReady();

} else {

document.addEventListener("plusready", plusReady(), false);

}

 

function plusReady() {

 

}

//创建一个新的页面

function createNewWeb() {

var url = "http://www.jiangbobobo.cn/smart";

plus.webview.create(url).show();

}

//发送数据的函数

function postData(url, data, callback) {

mui.ajax(url, {

data: 'data=' + JSON.stringify(data),

dataType: 'json',

type: 'get',

contentType: "application/x-www-form-urlencoded; charset=utf-8",

timeout: 6000000,

success: callback,

error: function(xhr, type, errorThrown) {

//waitingDialog.close();

mui.alert("<网络连接失败，请重新尝试一下>", "错误", "OK", null);

console.log(type);

console.log(JSON.stringify(xhr));

}

});

}

 

function test() {

var data = {};

postData('http://192.168.17.1:8080/zannadu/servlet/showInfoServlet',

data, // json 数据  

function(json) {

//mui.alert("hello");

var html = "";

var x = document.getElementById("mycard");

//mui.alert(str);

for(var i = 0; i < json.length; i++) {

//mui.alert(json[i].imageURL);

html += "<div class='mui-card'>";

html += "<div class='mui-card-header mui-card-media' style='height:40vw;background-image:url(" + json[i].imageURL + ")'></div>";

html += "<div class='mui-card-content'>";

html += "<div class='mui-card-content-inner'>";

html += "<div class='mui-content'>";

html += "<h4>" + json[i].name + "</h4>";

html += "<p id='route_description'>";

html += "" + json[i].service_content + "";

html += "</p>";

html += "</div>";

html += "</div>";

html += "</div>";

html += "<div class='mui-card-footer'>";

html += "<a class='mui-card-link'>" + json[i].like_number + "</a>";

html += "<a class='mui-card-link'>" + json[i].old_price + "</a>";

html += "<a class='mui-card-link'>" + json[i].new_price + "</a>";

html += "</div>";

html += "</div>";

x.innerHTML = html;

}

}

);

}

</script>

</head>

 

<body οnlοad="test()">

<!--<button οnclick="createNewWeb()">show data</button>-->

<!--<input type="button" value="test" οnclick="test()" />-->

<div class="mui-content" id="mycard">

</div>

</body>

</html>

转载于:https://www.cnblogs.com/jiaqingshareing/p/6156201.html

SZ987321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jsp允许跨域访问_Ajax跨域访问解决办法
weixin_39637975的博客
12-22 1050
方法1. jsonp实现ajax跨域访问示例jsp代码：js代码:functiontestJsonp(){$.ajax({type :'GET',dataType :'jsonp', //数据类型配置成jsonpjsonp : "callback", //配置jsonp随机码标签,在服务器代码部分需要用到他来拼接一个json的js对象url : 'http://127.0.0.1:8001/tes...
c ajax 跨域访问,C#中关于ajax跨域访问问题的详细介绍
weixin_28896255的博客
08-05 522
最近做项目，需要跨域请求访问数据问题。下面通过本文给大家分享C#中ajax跨域访问代码详解,需要的朋友可以参考下最近因项目需要，需要跨域请求访问数据。跨域访问是指什么？[跨域]：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓同域是指，域名，协议，端口均相同，不明白没关系，举个栗子：例如，我的电脑上有2个服务器 192.168.0...
AJAX跨域访问问题详解
欢迎。
11-01 1221
对AJAX跨域访问进行了详细的概述；对实际开发中遇见的问题进行了深入的刨析和解决。
ajax 跨域访问web api,web api 解决Ajax请求跨域问题
weixin_30043049的博客
08-05 738
前端ajax请求接口时，经常出现跨域问题，当然了解决方法有很多种，比如：我本人恰好前后端都会一点，所以直接在接口端处理。 我用的是mvc 开发的接口 可以在web API 的根目录添加一个属性就OK了。 代码如下：public class CrossSiteAttribute: System.Web.Http.Filters.ActionFilterAttribute{private string...
ajax 跨域 json数据,ajax 跨域请求数据 jsonp 示例
weixin_36437537的博客
08-05 666
1.请求页面jsonp调用方法//访问地址http://mytest.zyq.com/form/demo.phpgetdata();function getdata(){//方法1jQuery.getJSON("http://10.1.13.154/form/jsonp.php?callback=?", function(data){//alert(data)})//方法2jQuery.get("...
jquery.Ajax跨域访问数据方法
zhanglong_longlong的专栏
12-03 798
首 页 阅览室 馆友 我的图书馆 JQuery.Ajax跨域访问数据方法 收藏人：taohongyong 2014-09-24 | 阅：  转
Chrome浏览器如何开启Ajax跨域访问调试？
Mr1ght的博客
06-24 463
Chrome浏览器如何开启Ajax跨域访问调试？ 由于浏览器安全性限制，Ajax是不能跨域访问的，而我们在日常开发工作中，经常会出现本地开发环境需要访问其他服务器上的API情况，尤其在用html5开发APP的过程中，前后台完全分离，使用Ajax进行数据交互。本文说明如何让Chrome浏览器支持开发时的Ajax跨域访问。 Chrome浏览器如何开启Ajax跨域访问调试？ 方法/步骤 1.升级Chrome到最新版本 参考下面经验 “如何离线安装Chrome最新版本或某一特定版本？”，将Chrome升级到最新版
Ajax跨域访问
小鼠标的博客
08-06 444
最近，学了springMVC，SpringBoot（两个都可以做web服务，收发http请求），心血来潮，想用Ajax访问这个服务不仅要在项目中使用ajax，，还要开两个服务器，，用ajax去访问，实现，任何地点的访问（哈哈说的有点大）但是ajax 访问其他服务器会出现跨域问题，在这里直接给出，博主的解决方案：错误代码：XMLHttpRequest cannot load http://localh
ajax跨域获取数据后处理,简单实现ajax获取跨域数据
weixin_42176612的博客
08-05 180
本文实例为大家分享了ajax获取跨域数据的具体代码，供大家参考，具体内容如下1.效果图2.源码function getData(keyword) {var url="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" +keyword;$.ajax({type: "get",async: false,url: encodeURI(ur...
ajax跨域访问数据接口 php
猿客行
11-20 1458
安全机制什么的原因，浏览器不支持ajax跨域以post方式提交： 网上的方式很多，我在一个项目里用了中转文件，先提交给一个php页面，由这个php页面完成访问 1、建立route_ajax.php require_once 'config/config.php'; $url = $_REQUEST['url']; $params = $_REQUEST['params']; ech
关于C#中ajax跨域访问问题
01-20
最近因项目需要，需要跨域请求访问数据。跨域访问是指什么？ [跨域]：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓同域是指，域名，协议，端口均...
JQuery Ajax 跨域访问的解决方案
10-29
我们知道ajax本身实际上是通过XMLHttpRequest对象来异步进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以js跨域操作会被拒绝。
详解Django解决ajax跨域访问问题
09-20
在本文中，我们将深入探讨如何在Django框架中解决AJAX跨域访问问题。跨域问题通常发生在浏览器的安全策略中，限制了JavaScript从一个源（域名、协议或端口）向另一个源发起请求的能力，除非两个源都明确允许。这在...
ajax跨域访问遇到的问题及解决方案
10-16
**Ajax跨域访问** 是一个常见的前端开发中遇到的问题，主要涉及到浏览器的同源策略限制。同源策略是指，浏览器的JavaScript代码只能访问与当前页面同协议、同域名、同端口的资源，以防止恶意脚本从一个站点窃取另一...
Jmeter使用JSON Extractor提取多个变量
最新发布
空城雀的博客
07-05 72
1.当正则不好使时，用json extractor。2.提取多个值时，默认值必填，否则读不到变量。
一文解决Postman请求发送难题
2402_85758349的博客
07-04 468
根据需要，进行高级设置，如使用代理、自定义证书等。Postman无法发送请求的问题可能由多种因素引起。通过上述步骤，我们可以系统地排查并解决这些问题。记住，良好的错误处理和日志记录对于快速定位问题至关重要。希望本文能帮助您在遇到Postman请求发送问题时，能够迎刃而解。本文提供了一个全面的指南，从基础的网络检查到高级的集成配置，旨在帮助开发者解决Postman无法发送请求的问题。通过实际的代码示例和逐步的指导，我们希望能够提高您的Postman使用效率，确保API开发和测试的顺畅进行。
Exploting an API endpoiint using documentation
fencecat的博客
07-05 851
Exploting an API endpoiint using documentation
基于ESP32 IDF的WebServer实现以及OTA固件升级实现记录（二）
iot-lorawan
07-02 795
官方demo大体代码了解后即可开始准备进行改造为自己的webserver，首先如果不用官方web前端demo页面的话可以自行替换为自己构建的web后台ui，web后台直接参考网上开源的，这里以vue前端为例，找到开源想用的web后台参考后基本就是npm install， npm run dev查看页面效果，npm run build打包dist。前端有比较好用的开源http库，这里以axios为例，如下为向url /api/v1/staus请求数据，请求的数据拿到后web前端可以按实际数据进行页面渲染。
Python基础之IO流和序列化讲解
上善若泪
06-29 966
IO在计算机中指，也就是输入和输出。由于程序和运行时数据是在内存中驻留，由CPU这个超快的计算核心来执行，涉及到数据交换的地方，通常是磁盘、网络等，就需要IO接口。比如打开浏览器，访问新浪首页，浏览器这个程序就需要通过网络IO获取新浪的网页。浏览器首先会发送数据给新浪服务器，告诉它我想要首页的HTML，这个动作是往外发数据，叫Output，随后新浪服务器把网页发过来，这个动作是从外面接收数据，叫Input。所以，通常，程序完成IO操作会有Input和Output两个数据流。
ajax跨域获取json数据
03-05
Ajax跨域获取JSON数据是一种常见的前端技术，用于在浏览器中通过异步请求获取不同域名下的JSON数据。下面是一种常见的实现方式： 1. JSONP（JSON with Padding）：JSONP是一种利用标签的src属性可以跨域加载资源的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值