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

浏览数：58 / 时间：2015年06月09日

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);           
   ?>