jQuery教程 3分钟了解异步跨域问题
沉沙 2018-06-07 来源 : 阅读 1268 评论 0

摘要:本篇jQuery教程讲解了有关异步跨域问题的内容,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

回车提交异步请求

 $(function (){
    // 点击保存评论
    $(".reComment").on("click", function (){
        saveCommentData($(this).prev());
    });
 
    // 获取焦点情况下回车提交评论
    $(".reCommentInput").on("focus", function (){
        var _this = $(this);
        $(this).on('keyup', function (e) {
            e.stopPropagation();
 
            // 上下方向键
            if (e.keyCode == "38" || e.keyCode == "40"){
                console.log('你在动方向键');
            }
 
            // 回车
            if (e.keyCode == "13") {
                saveCommentData(_this);
            }
        });
    });
});

Ajax JSONP 跨域

/**
 * 保存评论内容
 * @param  _this
 */function saveCommentData(_this){
    var content     = _this.val();
    var id          = _this.attr("data-id");
 
    // JSONP 不支持post跨域请求
    $.ajax({
        type: 'POST',
        jsonp: 'callback',
        dataType: 'jsonp',
        data:{id:id, content:content},
        url: "//baidu.com/index.php",
        success: function (data) {
            console.log(data.id);
        }
    });                                                                                                                                                               }

getJSON 跨域

/**
 * 保存评论内容
 * @param  _this
 */function saveCommentData(_this){
    var content     = _this.val();
    var id          = _this.attr("data-id");
 
    // getJson简单跨域请求
    $.getJSON("//baidu.com/index.php?callback=?", {id:id, content:content}, function (date) {
        console.log(date);
    });
}

php 原生服务器端代码

public function saveReData(Request $request){
    $data = $_GET;
    return $_GET['callback'].'('.json_encode($data, JSON_UNESCAPED_UNICODE).')';
}

 php Laravel框架务器端代码

public function saveReData(Request $request){
    $data = $request->all();
    return response()->jsonp(array_get($data, 'callback'), ['id'=>'ssssssssssssss']);
}

本文由职坐标整理发布,学习更多的jQuery相关知识,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程