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>



Ajax跨域解决实例的更多相关文章

  1. 转载的别人的ajax跨域解决方法

    http://dynamic.vip.xxxxxx.com/active/<controllers>/<active>/<id> 放在浏览器地址栏中访问可以得到正确 ...

  2. ajax 跨域解决方法

    最近在开发过程中,使用ajax去异步调取图片.在开发中这个功能没什么问题,可以后来提测,重新部署之后就有问题了,这就是ajax的跨域问题. ajax核心对象XMLHttpRequest本身是不支持跨域 ...

  3. ajax 跨域解决 网上资料

    PHP中运用jQuery的Ajax跨域调用实现代码,需要的朋友可以参考下   可以在页面定义一个调用方法,如下: 复制代码代码如下: function getData(){ $.getJSON(&qu ...

  4. PHP Ajax跨域解决

    PHP Ajax 跨域问题最佳解决方案 本文通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.runoob.com,而请求的域名是serve ...

  5. jquery ajax跨域解决

    双十一开发了一个抽奖API,最近上线了,各个事业部的大神们需要前台页面,异步调用我的抽奖API,要我提供js. js 提供之后发现不对,跨域了.之前也碰到过跨域的问题,研究过这个问题,三种方法解决. ...

  6. ajax跨域解决办法

    在使用jquery的ajax作请求时,http://127.0.0.1:8080,类似这样的一个本地请求,会产生跨域问题, 解决办法一: jsonp: var url= "http://12 ...

  7. ajax跨域解决

    https://blog.csdn.net/csdn_ds/article/details/73691134 Access-Control-Allow-Origin 跨域设置多域名:http://ww ...

  8. HBuilder开发app ajax跨域 解决XMLHttpRequest

    <div id="a1" onclick="testXHR()" style="font-size: 5em;">sss1< ...

  9. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

随机推荐

  1. 读Ghost博客源码与自定义Ghost博客主题

    我使用的Ghost博客一直使用者默认的Casper主题.我向来没怎么打理过自己博客,一方面认为自己不够专业,很难写出质量比较高的文字:另一方面认为博客太耗时间,很容易影响正常的工作内容.最近公司即将搬 ...

  2. 夏令营讲课内容整理 Day 6 Part 2.

    Day 6的第二部分,数论 数论是纯粹数学的分支之一,主要研究整数的性质   1.一些符号: a mod b 代表a除以b得到的余数 a|b a是b的约数 floor(x) 代表x的下取整,即小于等于 ...

  3. qt中的udp编程

    UDP QUdpSocket ---> upd socket 1.创建 QUdpSocket *p = new QUdpSocket(); 2.最先接收数据一方 调用bind-> ip/p ...

  4. iOS UIFont 字体名字大全

    Font Family: American TypewriterFont: AmericanTypewriterFont: AmericanTypewriter-Bold Font Family: A ...

  5. 我的2017年终总结(PF项目框架设计心得分享 1.0rc new)

    一晃眼又过去了一年,在这一年里尽管有许多不如意的事,却阻挡不了我前进的脚步.先用一句话来总结去年一年的状态,那就是“无休无止的忙碌”.而这样的忙碌状态对我来说是不可取的,因为匮乏的忙碌只能让头脑处于一 ...

  6. Python 中的闭包

    通常来说,函数中的局部变量在函数调用结束的时候不能再被引用,所分配的空间也会被回收. 但是通过闭包这种技术,函数调用结束了,它的局部变量的值还可以保存在闭包里. 试举一例: def make_adde ...

  7. JavaScript 常用单词整理

    JS单词 push :添加一个数组元素 document :文档 pop :删除最后一个数组元素 console :控制台 shift :删除第一个数组元素 string :字符串 Concat 组合 ...

  8. c中有序表的简单定义

    #include <iostream> using namespace std; #define MaxSize 50 typedef int ElemType; //定义变量int的别名 ...

  9. Tesseract OCR win 32位编译

    https://github.com/tesseract-ocr/tesseract/wiki/Compiling 找到该标题:Develop Tesseract 按照上面的步骤执行即可,最后使用 v ...

  10. postman 中调试接口的小记录

    1.form-data:  就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开.既可以上传键值对,也可以上传文件.当上传的字段是文件 ...