jquery ajax跨域提交请求获取远程更新文件

参考教程地址:https://www.cnblogs.com/freeweb/p/4908832.html 利用jquery提交的请求地址如果是相对地址(如 url : "index.php?id=2")这种就不涉及跨域,如果提交的地址是http地址那么可能就会被禁止。如果需要从远处服务器获取的东西比较简单是不是可以利用下面方式来获取呢?大家可以自行验证下
发送请求端
$get=file_get_contents("http://www.xxx.com/index.php?id=2");
echo $get;

远程服务器http://www.xxx.com/index.php
if(isset($_GET['id'])){
echo 'id='.$_GET['id'];
}
本文主要讲的是客户端服务器提交自身系统的code请求远程服务器获取更新文件的下载地址,达到获取更新文件的目的。如果code与远程文件上备案的code不一致就返回错误信息,不提供下载地址。至于code的有效性可以利用数据库存储查询进行灵活扩展,更新文件的下载地址一般要设置的比较复杂一点防止被人猜测到。 下面讲利用jquery ajax跨域提交——请求文件(一定要引用jquery文件,我用的是2.1.3的,下面源码中引用了远程cdn上的jquery版本文件没验证是否可用,如果不可用可以自行百度下载到本地后再引用)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>系统更新</title>
<script src="../js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script?src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<br>
更新服务器地址:<input name='url' type='text' style="width:380px" id='url' value="http://ranjuan.cn/"/>
<br>
<br>
<input type='button' name='button' id='check_up' onclick="check_up()" value='检查更新'/>
<br><br>
<span id='up_file_url'></span>
</body>
<script>
function check_up(){
  var url=$('#url').val();//更新服务器地址
  $.ajax({
      type : "GET",//jsonp只支持GET方式,不支持post
      async:true,    //是否异步
      url : url+"up_svr.php?code=123456",//更新服务器地址/up_svr.php
      dataType:"jsonp",    //跨域json请求一定是jsonp;普通请求是json
      jsonp: "callbackparam",    //跨域请求的参数名,默认是callback
           //jsonpCallback:"successCallback",    //自定义跨域参数值,回调函数名也是一样,默认为jQuery自动生成的字符串
      data:{"action":"1","error_model":"2"},//提交的数据
      success : function(data) {

  if(data.code==1){		
alert("发现更新"+data.msg);
$('#up_file_url').html(data.msg);
  }else{
    alert("错误!"+data.msg);
  }   
      },
      error : function() {
        alert("更新服务器连接失败!");//远程服务器返回的只要不是jsonp格式都会error(同理如果远程的up_svr.php存在语法错误也会error)
      }
      
    });
}
</script>
</html>
jquery ajax提交远程文件——http://ranjuan.cn/up_svr.php文件
<?php
$source=$_GET['code'];
if($source=='123456'){
  
  $result=array('code'=>1,'msg'=>'http://ranjuan.cn/111.zip');
  echo $_GET['callbackparam']."(".json_encode($result).")";
  //echo json_encode($result);//如果校验正确,返回客户端下载文件地址
}else{
  
  $result=array('code'=>0,'msg'=>'系统授权码非法!');
  //echo json_encode($result);
  echo $_GET['callbackparam']."(".json_encode($result).")";
}
上面的远程文件改成相对路径(非跨域)提交也可以,不能使用post提交,跨域POST提交参考下面的后续更新说明。 /**/ 2019.6.5更新说明:如果上面方法只在局域网环境成功,在web上不成功可能与云端服务器的环境有关,可以尝试在被请求页面最前面增加以下语句: header("Access-Control-Allow-Origin: *");////支持全域名访问,不安全,部署后需要固定限制为客户端网址 header('Access-Control-Allow-Headers:x-requested-with,content-type'); //响应头 请按照自己需求添加。 header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http 动作 /**/ 至于获取到更新文件的连接后如何下载到本地服务器,可以利用curl 达到目的。

后续更新:

服务端设置支持跨域
主要是Access-Control-Allow-Origin头参数,该参数用来指定允许哪个来源的域请求。服务端代码如下:

// 表示支持所有来源的域进行请求
// 实际在操作过程中可以设置为指定域
header('Access-Control-Allow-Origin:*');
$data = json_encode(array("id" => "1", "name" => "tom"));
echo $data;




对应的js代码:

$.ajax({
    type: "POST",
    url: "http://ranjuan.cn/xxx.php",
    dataType: "json",
    success: function(data) {
        console.log(data);
    }
});
可以支持post请求。

基于互联网精神,在注明出处的前提下本站文章可自由转载!

本文链接:https://ranjuan.cn/jquery-ajax跨域提交请求获取远程更新文件/

赞赏

微信赞赏支付宝赞赏

发表评论