js利用form+iframe解决跨域post和get提交

JS跨域提交

              ajax可以让我们对页面进行无刷新的操作,给我们前端和后台数据交互带来更多的体验,这里就不多说了,但ajax也有局限性,由于浏览器有安全机制,不 允许我们访问不同域的数据,也就是我们常说的"同源策略",大家可以去了解一下。但我们有时候又有这样的需求,下面我们浅谈一下,解决这种问题的办法。

1、jsonp格式

优点:跨域提交

缺点: 只能进行get方式访问

2、js+form+iframe+php

优点:跨域提交get和post的方式访问都是可以的

缺点:没有返回值

jsonp的这种格式非常简单,而且我前面一篇博客也简绍了这种方式,之所以介绍第二种,也是因为项目上用到了,而且我也觉得有必要单独的在把第二种方式拿出来分享一下。

html代码块:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    </style>
    </head>
    <body>
     用户名: <input type="text" id="name">
   </br>
     密码:<input type="password" id="pwd">
     </br>
    <button type="button" id="subData">提交</button>
    </body>
    </html>

Javascript代码块:  

 <script>
    function smal_send(){
        var  user=$("#name").val();
        var  pwd=$("#pwd").val();
        //http://localhost/juhe/Managers/DB/kuayu.php  你需要提交数据所到的后台地址
        //method="post"则为post方式提交;method="get"则为get方式提交
    var form =$("<form action=‘http://localhost/juhe/Managers/DB/kuayu.php‘ method=‘post‘>" +
        "<input type=‘hidden‘ name=‘user_name‘ value=‘‘/> " +
        "<input type=‘hidden‘ name=‘password‘ value=‘‘/> " +
        "</form> ");
    $( "#SMAL" ).remove();//如果已存在iframe则将其移除
    $( "body").append("<iframe id=‘SMAL‘ name=‘SMAL‘ style=‘display: none‘></iframe>");//载入iframe
    (function(){
    $( "#SMAL" ).contents().find(‘body‘).html(form);//将form表单塞入iframe;
    $( "#SMAL" ).contents().find("form input[name=‘user_name‘]").val(user);//赋值给iframe中表单的文本框中
    $( "#SMAL" ).contents().find("form input[name=‘password‘]").val(pwd);//赋值给iframe中表单的文本框中
    $( "#SMAL" ).contents().find(‘form‘).submit();//提交数据
    }());
    }
    $(document).ready(function(){
            $("#subData").click(function(){
                   smal_send();//调用函数
            })
        })
    </script>

Php代码块:

 <?php
     require_once("DB.php");
     $db=new DB();
     $com=$_POST["user_name"];//获取使用的种类
              $dataArry=array("comment"=>$com);
              $flag=$db->Update_Sql("userinfo",$dataArry);
   ?>            

     由于使用iframe这种方式没有结果返回值,所以想要验证提交是否成功,最好建一张表,然后使用后台将提交得到的值放入数据库中以此来验证是否成功!

时间: 2024-10-07 07:33:52

js利用form+iframe解决跨域post和get提交的相关文章

js中ajax如何解决跨域请求

js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操作. 跨域指的协议.域名.端口 有一个不同的情况下都是跨域 例:在本站点请求外站的数据是不允许的 //在本站点请求外站点的资源是不允许的 $(function () { $.ajax({ url: "http://127.0.0.1:14847/Web/jsonp.js", success

利用Filter解决跨域请求的问题

1.为什么出现跨域. 很简单的一句解释,A系统中使用ajax调用B系统中的接口,此时就是一个典型的跨域问题,此时浏览器会出现以下错误信息,此处使用的是chrome浏览器. 错误信息如下: jquery-1.8.0.min.js:3 Failed to load http://localhost:8081/authz/openapi/v1/token: No 'Access-Control-Allow-Origin' header is present on the requested resou

js解决跨域问题

JavaScript中的常见解决跨域的方法 1. 通过jsonp跨域 1.)原生实现: 2. document.domain + iframe跨域 此方案仅限主域相同,子域不同的跨域应用场景. 1.)父窗口:(http://www.domain.com/a.html) 2.)子窗口: (http://child.domain.com/b.html) 3. nginx代理跨域 4. nodejs中间件代理跨域 5. 后端在头部信息里面设置安全域名   原文地址:https://www.cnblog

前端解决跨域问题的8种方案(最新最全)

原文:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.jshttp://www.a.com/b.js 同一域名,不同端

前端解决跨域问题的8种方案(最新最全)(转)

1.同源策略如下: URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js同一域名下允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js同一域名下不同文件夹允许 http://www.a.com:8000/a.jshttp://www.a.com/b.js同一域名,不同端口不允许 http://www.a.com/a.jshttps://www.a.com/b.js同一域名,不同协议

前端解决跨域问题的8种方案

原文http://blog.csdn.net/joyhen/article/details/21631833 1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.jshttp://www.a.com/b.js 同一域

解决跨域的问题

JavaScript跨域总结与解决办法 什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用HTML5 postMessage 6.利用flash 什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么

前端解决跨域问题的8种方案(转)

前端解决跨域问题的8种方案(最新最全) 原文:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.jshttp://www

解决跨域的方法

前端解决跨域的方法都是基于<script>标签可以跨域请求 平时的ajax请求所经历的过程 const xhr = new XMLHttpRequest() xhr.onreadystatechange = function () { switch (xhr.readyState) { case 0: // UNSENT (未打开) debugger break case 1: // OPENED (未发送) debugger break case 2: // HEADERS_RECEIVED