妥善的ajax跨域提交post请求的解决方案,结合PHP与jquery

开发背景:

在开发中采用了一个新的架构,将大部分客户的留言功能集成到一个公共API提交保存,采用不同的用户名区分,供客户查询自己网站的留言,这样节约了客户网站的资源,也提升了维护性。

那么在提交时不能采用直接的post提交,否则会产生跳转,使访客混乱,所以采用ajax提交留言内容至公共服务器:http://wx.igooda.cn/index.php/messagesave,但尝试后发现不能提交post请求,百度后查询结果是跨域只能是get请求,这对留言内容多的来说,是不可行的。还有一种解决方案是采用jsonp请求,原理是在页面中建立一个script脚本,导入外部脚本,再将外部脚本转换为结果反馈,这样的方法也不能够很好的解决。

开发思路:

虽然javascript的跨域有限制,但php可以跨域提交post请求,所以在网站内建立一个api,做为post的中转站,在提交给远程服务器,这样就可以完成跨域post请求。

开发步骤:

1、修改表单

将form的action指向网站内的 api.php,建立一个隐藏字段:

<input type="hidden" name="request_url" value="跨域的api地址">

2、建立企业网站内的 api.php

function Post($url, $post = null) {
    if (is_array($post)) {
        ksort($post);
        $content = http_build_query($post);
        $content_length = strlen($content);
        $options = array(
            ‘http‘ => array(
                ‘method‘ => ‘POST‘,
                ‘header‘ =>
                "Content-type: application/x-www-form-urlencoded\r\n" .
                "Content-length: $content_length\r\n",
                ‘content‘ => $content
            )
        );
        return file_get_contents($url, false, stream_context_create($options));
    }
}

$request_url = $_POST[‘request_url‘];

$response = Post($request_url , $_POST);

echo $response;

3、ajax提交请求吧!相关的javascript代码请查看下面的案例里的源代码。

演示地址:

http://www.hrbzljr.com/

这个客户的网站就是采用了这样的机制,前端代码可以通过查看源码找到。

另:这个客户网站新增了一个功能,就是通过在线留言后,后台自动通过企业的微信公众平台给企业的客户发送一条微信提醒,十分方便。

妥善的ajax跨域提交post请求的解决方案,结合PHP与jquery

时间: 2024-08-05 10:44:26

妥善的ajax跨域提交post请求的解决方案,结合PHP与jquery的相关文章

解决ajax跨域问题【5种解决方案】

什么是跨域问题?跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源.跨域问题是针对JS和ajax的,html本身没有跨域问题. 查看浏览器开发者工具Console报错: Failed to load http://a.a.com:8080/A/FromServlet?userName=123: No 'Access-Control-Allo

ajax 跨域提交数据

$.ajax({ url:"http://my.demo.com/jsonp/server.php",//不同域的文件; cache: false, //是否使用缓存; error: function () { }, //错误时执行的方法; jsonp: "callback", //跨域必填参数,回调函数名,对应服务器文件中$_GET['callback']; dataType: "jsonp", // 跨域必填参数,声明jsonp 传输; su

jquery ajax 跨域提交

后台输出内容之前需要指定header("Access-Control-Allow-Origin: *"); post 之前 jQuery.support.cors = true; IE浏览器设置“工具->Internet 选项->安全->自定义级别”将“其他”选项中的“通过域访问数据源”选中为“启用”或者“提示”

Ajax跨域:Jsonp原理解析

推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得

20K前端开发面试题:关于如何回答ajax跨域问题

在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下. 关于跨域,有N种类型,现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器"同源策略"中的一部分,其它的这里不做介绍),内容大概如下:什么是ajax跨域?如何解决ajax跨域?如何分析ajax跨域? 一.什么是Ajax跨域 Ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略". CORS请求原理

JQuery的Ajax跨域请求的

JQuery的Ajax跨域请求的(Ajax) 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同.也就是跨域获取数据),则须要使用jsonp类型.使用这样的类型的话,会创建一个查询字符串參数 callback=? .这个參数会加在请求的URL后面. server端应当在JSON数据前加上回调函数名.以便完毕一个有效的JSONP请求.意思就是远程服务端须要对返回的数据做下处理,依据client提交的callback的參数,返回一个callback(json)的

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下: 参考内容:http://justcoding.iteye.com/blog/1366102 由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的

JQuery的Ajax跨域请求的解决方案

http://www.open-open.com/lib/view/open1334026513327.html 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式, 于是即刻翻出Jquery的API出来研究,发现JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法:Js代码 jQuery.get