AJAX请求跨域问题的解决方案

当前位置:首页 » jquery
In 笔记  @2018-04-24

这个问题其实刚入行的时候就碰到了,后来就在接口返回数据返回的函数里加了一行代码:

header("Access-Control-Allow-Origin: *");

一直想总结一下这个让很多新手困扰的跨域问题,现在来说一说。
首先,跨域产生的原因大家可以自行百度。
本地测试从http://localhosthttp://192.168.50.88域请求数据。

测试代码:

前台代码:

$.get('http://192.168.50.88/tp_test/Home/Test/test_jsonp', function(data) {
    console.log(data);
});

后台代码:

public function test_jsonp(){
    $data = json_encode(array(
        'uid'=>5465,
        'nick'=>'刘德华1265'
    ));
    echo $data;
}

在不做任何处理的情况下浏览器会提示跨域权限问题的,无法获取到数据。

Failed to load http://192.168.50.88/tp_test/Home/Test/test_jsonp: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access

解决方案

方案一:JSONP

这个方案虽然很古老,但依然有效,对于小型的GET请求任务还是可以胜任的,原理很取巧,理解它还是很有必要的;
他的原理就是,通过向页面添加<script></script>标签,加载接口,后台接口按照约定好的将数据放到接口中获取到的callback函数中,前台通过这个函数运行来获取到数据。
代码修改如下:
前台代码:

// callback函数叫jsonp_callback
$(document).ready(function() {
    CreateScript('http://192.168.50.88/tp_test/Home/Test/test_jsonp?callback=jsonp_callback');
});
// callback函数jsonp_callback
function jsonp_callback(data){
    console.log(data);
}
// 添加script标签
function CreateScript(src){  
    $("<script><//script>").attr("src", src).appendTo("body");
} 

后台代码:

public function test_jsonp(){
    $callback = $_GET['callback'];
    $data = json_encode(array(
        'uid'=>5465,
        'nick'=>'刘德华1265'
    ));
    echo "{$callback}({$data})";
}

可以看到,已经可以正确的将数据获取到了,这也就是JSONP的实现过程,由于这样的实现原理,导致了JSONP的两个问题:
1. 需要后台配合返回约定格式的数据。
2. JSONP只能发送GET请求。
而在使用Jquery封装好的jsonp请求时,就会更加方便一些了,同样的后端代码,前端代码就可以做简化了:

$.ajax({
    url: 'http://192.168.50.88/tp_test/index.php/Home/Test/test_jsonp',
    dataType: 'jsonp',
    jsonp:'callback',
})
.done(function(data) {
    console.log(data);
})

Jquery的封装帮我们完成了所有前台需要完成的工作,只需要后台将数据放到callback中返回就可以了。
由于JSONP只能发送GET请求,其他的场景就需要第二种方案;

方案二:HTTP访问控制(CORS)

CORS是一个W3C标准,全称是”跨域资源共享”Cross-origin resource sharing。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
CORSJSONP的使用目的相同,但是比JSONP更强大。JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
CORS的用法很简单:我们只需要的被请求的接口的回复头中添加:

// 星号表示所有的域都可以请求这里的数据
Access-Control-Allow-Origin: *
//或者指定域,例如上面的测试中我们需要加入即可正常得到数据了
Access-Control-Allow-Origin: http://localhost

关于CORS更多的设置和用法请自行搜索。

标签: , , , , ,   评论: 1枚 

Jquery校验中国身份证号码是否正确

当前位置:首页 » jquery
In 笔记  @2018-01-15

在项目中使用表单时经常会涉及到身份证号码是否正确的校验,下面看看应该中国二代身份证号码应该怎么用Jquery校验呢?

二代身份证校验码的计算方法

二代身份证由17位数字和一位校验码组成,那么校验方法是怎样的呢?

  1. 将前面的身份证号码17位数分别乘以不同的系数。从第一位到第十七位的系数分别为:7-9-10-5-8-4-2-1-6-3-7-9-10-5-8-4-2。
  2. 将这17位数字和系数相乘的结果相加。
  3. 用加出来和除以11,得到余数
  4. 余数只可能有0-1-2-3-4-5-6-7-8-9-10这11个数字。其分别对应的最后一位身份证的号码为1-0-X-9-8-7-6-5-4-3-2。

使用Jquery校验身份证

function check_id(value){
    var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];//加权因子  
    var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];//校验码  
    if(/^\d{17}\d|x$/i.test(value)){   
        var sum = 0, idx;  
        for(var i = 0; i < value.length - 1; i++){  
            // 对前17位数字与权值乘积求和  
            sum += parseInt(value.substr(i, 1), 10) * arrExp[i];  
        }  
        // 计算模(固定算法)  
        idx = sum % 11;  
        // 检验第18为是否与校验码相等  
        return arrValid[idx] == value.substr(17, 1).toUpperCase();  
    }else{  
        return false;  
    }  
}

标签: ,   评论: Jquery校验中国身份证号码是否正确已关闭评论 

jQuery使用change事件获取select当前值并动态赋值

当前位置:首页 » jquery
In 学习  @2016-03-04

需求描述:
在文章编辑页面:
QQ截图20160304171422
当我们通过下拉菜单选择不同分类的时候,需要将该分类的值赋值给一个hidden类型的元素,在提交修改或添加的时候将这个值写入数据库标识文章的分类,由于选择的值是变化的,在不重新加载页面的情况下,完成动态赋值。

模板文件:

<form class="form-horizontal" role="form" action="{:U('Blog/adds')}" method="post">
<input type="hidden" id="ptitle" name="ptitle" value="{$_GET.title}">
<input type="hidden" name="id" value="{$_GET.id}">
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 父类目</label>
        <div class="col-sm-9">
        <!-- 栏目选择下拉框 -->
            <select class="col-xs-10 col-sm-5" name="pid" id="pid">
                <volist name="list" id="list">
                <option value="{$list.id}" <if condition="$list['id'] eq $_GET['pid']">selected="selected"</if> >{$list.title}</option>
                </volist>
            </select>
        </div>
    </div>
    <div class="clearfix form-actions">
        <div class="col-md-offset-3 col-md-9">
            <button class="btn btn-info" type="submit">
                <i class="icon-ok bigger-110"></i>
                提交
            </button>
                 
            <button class="btn" type="reset">
                <i class="icon-undo bigger-110"></i>
                重置
            </button>
        </div>
    </div>
</form>

pid发成改变的时候,获取option:selected文本给ptitle赋值

<script>
$("#pid").change(function() {   
     var ptitle = $(this).find("option:selected").text();        
     $("#ptitle").attr("value",ptitle);
})
</script>

// 20170718更新,这样来获取select的选中项的值value和文本text
//文本
$('#pid option:selected').text();
$('#pid option:selected').val();
标签: , ,   评论: 2枚