jqury ajax跨域请求的两种方法

第一种，jsonp的方法
直接上代码，前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试登录</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div>

        <p>异步登录</p>
        <input type="text" name="username" value=""/>
        <input type="text" name="pwd" value=""/>
        <select name="type" >
            <option value="login">登录</option>
            <option value="logout">退出</option>
            <option value="reg">注册</option>
        </select>
        <button onclick="send();">登录</button>
    </div>
    <script>


        function send(){
            var types = $('select:optional[name="type"]').val();
            var userName = $('input:text[name="username"]').val();
            var pwd = $('input:text[name="pwd"]').val();
            var hash = '<?php echo $hash;?>';
            $.ajax({
                url : 'http://localhost/renren/api/remote_login.php',
                type : 'POST',
                data : {'hash' : 'hash','user_name':userName,'pwd':pwd,'type':types},
                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                jsonpCallback: 'ajax_callback', //设置回调函数名
                 success:function(res){
                    console.log(res)
                    
                }
            })
        }



    </script>
</body>
</html>

后台PHP代码：

$callBack = trim($_GET['callback']);
$data = array(1,2,3,4,5,'a'=>8989); 
$res = $callback .'('.json_encode($data).')';
exit( $res );

第二种，ajax跨域模式，php需要加header头，前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试登录</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div>

        <p>异步登录</p>
        <input type="text" name="username" value=""/>
        <input type="text" name="pwd" value=""/>
        <select name="type" >
            <option value="login">登录</option>
            <option value="logout">退出</option>
            <option value="reg">注册</option>
        </select>
        <button onclick="send();">登录</button>
    </div>
    <script>


        function send(){
            var types = $('select:optional[name="type"]').val();
            var userName = $('input:text[name="username"]').val();
            var pwd = $('input:text[name="pwd"]').val();
            var hash = '<?php echo $hash;?>';
            $.ajax({
                url : 'http://localhost/renren/api/remote_login.php',
                type : 'POST',
                data : {'hash' : 'hash','user_name':userName,'pwd':pwd,'type':types},
                crossDomain: true, //这里一定要设置
                dataType:'json',

                 success:function(res){
                    console.log(res)
                    
                }
            })
        }



    </script>
</body>
</html>

后端代码，这里是php演示的：

//跨域post请求 header 头 这个不能少
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: 1000');


$data = array(1,2,3,4,5,'a'=>8989); 
$res = json_encode($data);
exit( $res ); //像普通的返回json就行了