zoukankan      html  css  js  c++  java
  • Ajax跨域解决实例

    HTML

    在本例中我们跨域http://www.sucaihuo.com/jquery/demo/43/jsonp.php?callback=。你也可以试试其他域名。下面表单中,我们提交后的结果反馈到#rs中。

    <form id="form" action="#" method="post">  
       <ul>  
        <li><label>标题:</label><input type="text" class="input_text" name="title" /></li>  
        <li><label>内容:</label><input type="text" class="input_text" name="content" /></li>  
        <li><input type="submit" class="btn" value="提 交" /></li>  
       </ul>  
    </form>  
    <div id="rs" style="display:none"></div>


    jQuery

    通过getJSON我们进行跨越请求:

    $(function() 
        $("#form").submit(function() 
            var data = $(this).serialize(); //表单数据系列化 
            $.getJSON("http://www.sucaihuo.com/jquery/demo/43/jsonp.php?callback=?", data, 
            function(json) 
                var message = ''; 
                if (json) 
                    message = "<strong>返回信息:</strong><p>标题:" + json.title + "</p>内容:" + json.content + "" 
                else 
                    message = "请注意返回json格式!"; 
                
                $("#rs").html(message).show(); 
            }); 
            return false; 
        }); 
    });

    PHP

    我们看下jsonp.php的程序代码:

    $result['title'] = $_GET['title'];  
    $result['content'] = $_GET['content'];   
    echo $_GET['callback'].'('.json_encode($result).')';

    Jsonp原理:

    <ul class='ul_demo'> <li>首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。 此时,服务器先生成 json 数据。 </li> <li> 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 . </li> <li> 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。 </li> <li> 客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数, 传入到了客户端预先定义好的 callback 函数。 </li> </ul>





    知识无止境,追其宗,而归一
  • 相关阅读:
    wenbao与筛法素数及判断模板
    wenbao与dfs奇偶剪枝
    wenbao与搜索
    wenbao与反素数
    wenbao与三分
    wenbao与极角排序
    wenbao与差分约束
    wenbao与勒让德定理
    Zotero 导出参考文献列表
    为人性僻耽佳句(三)
  • 原文地址:https://www.cnblogs.com/bluesky1024/p/6296693.html
Copyright © 2011-2022 走看看