jquery jsonp跨域请求
2016-06-08 10:31
447 查看
<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:"></div>
<script>
$(function() {
$("#form").submit(function() {
var data = $(this).serialize(); //表单数据系列化 把表单数据转换成&a=1&b=2形式
alert(data)
$.getJSON("http://www.artv.cn/artv/index/callback?callback=?", data, //把表单参数拼接到地址上,获得回调数据,
function(json) {
var message = '';
if (json.status == 1) {
message = "<strong>返回信息:</strong><p>标题:" + json.title + "</p>内容:" + json.content + "</p>内容:" + json.status + ""
} else {
message = "请注意返回json格式!";
}
$("#rs").html(message);
});
return false;
});
});
</script>
服务端代码
jsonp跨域请求,返回的是一个javascript函数,客户端解析script标签,里面带上了我们的请求返回的数据,解析数据
首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。
此时,服务器先生成 json 数据。然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,传入到了客户端预先定义好的 callback 函数。
$('checkbox').eq(0).checked.each() //遍历选中的checkbox
<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:"></div>
<script>
$(function() {
$("#form").submit(function() {
var data = $(this).serialize(); //表单数据系列化 把表单数据转换成&a=1&b=2形式
alert(data)
$.getJSON("http://www.artv.cn/artv/index/callback?callback=?", data, //把表单参数拼接到地址上,获得回调数据,
function(json) {
var message = '';
if (json.status == 1) {
message = "<strong>返回信息:</strong><p>标题:" + json.title + "</p>内容:" + json.content + "</p>内容:" + json.status + ""
} else {
message = "请注意返回json格式!";
}
$("#rs").html(message);
});
return false;
});
});
</script>
服务端代码
$result['title'] = $_GET['title']; $result['content'] = $_GET['content']; echo $_GET['callback'].'('.json_encode($result).')';
jsonp跨域请求,返回的是一个javascript函数,客户端解析script标签,里面带上了我们的请求返回的数据,解析数据
首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。
此时,服务器先生成 json 数据。然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,传入到了客户端预先定义好的 callback 函数。
$('checkbox').eq(0).checked.each() //遍历选中的checkbox
相关文章推荐
- jQuery.Uploadify插件实现带进度条的批量上传功能
- 全面解析jQuery $(document).ready()和JavaScript onload事件
- jQuery提示插件qTip2用法分析(支持ajax及多种样式)
- 漂亮实用的jQuery倒计时插件特效代码
- 解决jquery $符号的冲突
- jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
- jQuery中的事件绑定bind(), live(), on(), delegate()
- jQuery 学习总结
- jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
- jQuery封装的屏幕居中提示信息代码
- jquery 上传空间uploadify使用笔记
- jquery实现的类似百度搜索的输入框自动完成功能
- Jquery中的has、find、filter方法区别
- jquery中的live、on、onclick、bind
- JQuery的部分巧用法
- jquery与php交互之GET、 POST
- jQuery给动态添加的元素绑定事件
- jQuery插件之ajaxFileUpload
- IE 9 ,IE 10 jquery ajax 缓存问题
- Jquery--------图片轮放