【4858美高梅】混合式应用开辟之串口通信,其余同伴读代码也不那么吃力了

By admin in 4858美高梅 on 2019年4月16日

发送指令与分析数据

先说精通

写在前边

说来也很巧,
早晨再做一个页面,再平凡不过的分页列表,笔者或然像往常1模同样,基于MVC环境下,作者健康用PagedList.MVC
AJAX做无刷新分页,这时候难点就来了,列表数据中有个轮播图用到了slides.js插件,轮播图也使用了分页,数据第3页轮播图页码能健康使用,数据列表翻到第二页则轮播图的页码就不可能寻常使用,实际上PagedList.MVC自带的体裁文件已经和slides.j自带的样式文件冲突,作者还特意修改了slides.js的体制文件,然并无卵用,让郁闷飞壹会。。。

先说清楚

  

  Cordova插件 : 

  安装:cordova plugin add cordovarduino

  代码示例:

  

var opts = {
        baudRate: 115200
    };
    $scope.allData = [];
    serial.requestPermission(function success(res){
        console.log(res);
        serial.open(opts, function success(res){
            console.log(res);
        }, function error(err){
            console.log(err);
        });
    }, function error(err){
        console.log(err);
    });
    var view = [];
    serial.registerReadCallback(function success(res) {
                var lin = new Uint8Array(res);
                view = view.concat(Array.from(lin));//因为插件把一次数据分多次返回所以先进行拼接
                if (view.length == 35) {
                    //单卡
                    $scope.anaData(view);
                    console.log('单' + view)
                }else{
                        //多卡
                    if ((view.length-35)%20 == 0) {
                        console.log('多' + view)
                        $scope.anaDatas(view);
                    }
                }
            },function error(error) {
                console.log(error)
    }); 
    //发送指令
    $scope.sendOrder = function(){
        serial.writeHex(myOrderString, function success(res){
            console.log(res);
        }, function error(err){
            console.log(err);
        });
    }
    //接收数据
    //解析数据单个
     $scope.anaData = function(aaa){
        var bbb = aaa.slice(13,29);
        var ccc = '';
        var arr = [];
        var ddd = [];
        function topow(x) {
            return x.toString(16)
        };
        bbb.map(topow);
        ccc = String.fromCharCode.apply(null,bbb);
        for (var i = 0;i<ccc.length;i=i+2) {
            arr.push(ccc.substring(i,i+2));
        }
        arr.reverse();
        ddd = arr.join('')
        console.log(ddd);
        $scope.allData.push(ddd);
        $scope.$apply();
     };

以此跨域异步上传功能大家赖以了Jquery.form插件,它在异步表单方面很有意义,而跨域我们会在HTTP响应头上增加access-control-allow-method,当然那几个头标志唯有IE10,火狐和谷歌(Google)上支持,对于IE拾以下的浏览器来讲,大家就不能够用那种办法了,大家须求换个思路去干这事,让服务端去重写向大家的客户端,由客户端(与公事上传页面在同域下)来回到相关数据就能够。

【4858美高梅】混合式应用开辟之串口通信,其余同伴读代码也不那么吃力了。1、基于MVC PagedList.MVC的分页写法

var currentPage = 1;        $(function () {            //工具栏绑定页码            currentPage = $('.pagination li.active').text();            currentPage = $('.pagination li.active').text();            $.on('click', '.pagination li:not(".active")', function  {                var txtnum = $.text();                if (parseInt > 0) {                    DoSearch;                } else if (txtnum == '»') {                    DoSearch(parseInt(currentPage) + 1);                } else if (txtnum == '«') {                    DoSearch(parseInt(currentPage) - 1);                } else if (txtnum == '««') {                    DoSearch;                } else if (txtnum == '»»') {                    var pagenum = $.find.attr.replace(/[^\d]+/gi, '');                    DoSearch;                }                return false;            });        });//列表复合查询条件 function DoSearch {         var item = {};         if  {            item.pageIndex = page;          }          PostData;        }//重点就是这个方法,用于AJAX分页效果,主要是利用页面携带的数据来循环替换function PostData {         $.post('/Home/Index?rdm=' + Math.random(), objdata, function  {               //1、替换页面内列表数据                $(".contentajax").html.find(".contentajax").html;               //2、替换页码                $(".ajaxpage").html.find(".ajaxpage").html;                currentPage = $('.pagination li.active', $.text();        }); }

  

本条跨域异步上传功效大家借助了Jquery.form插件,它在异步表单方面很有效率,而跨域大家会在HTTP响应头上增多access-control-allow-method,当然那个头标识只有IE10,火狐和谷歌(谷歌(Google))上支撑,对于IE拾之下的浏览器来讲,大家就不能够用那种艺术了,大家须求换个思路去干这事,让服务端去重写向大家的客户端,由客户端(与公事上传页面在同域下)来回到相关数据就可以。

   注意:

    不明了插件的难点要么硬件的主题材料,本来应该1次回到的数额报文分了往往回到,所以在监测回调接收数据的时候先把接收的多寡拼接之后再开始展览下一步处理。若是你的配备不奇怪能够去除这一步。

  

 

再做事

二、郁闷时在园子里看看一位朋友发的jq分页插件

再做事

1 Jquery.form的使用

3、效果图

4858美高梅 1

4858美高梅 2

1 Jquery.form的使用

<form method="post" action="http://127.0.0.1:801/Home/UploadResult" enctype="multipart/form-data" id="form1">
<input name="qdctvfile" id="qdctvfile11" type="file" onchange="eventStart()">
</form>
<script type="text/javascript">
$("#form1").ajaxForm({
beforeSerialize: function () {
var filepath = $("#qdctvfile11").val()
var extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length).toUpperCase();
if (ext != ".PNG" && ext != ".JPG") {
alert("图片仅支持png,jpg格式");
$("#qdctvfile11").val("");
return false;
}
},
success: function (data) {
alert(data);
}
});
function eventStart(obj) {
$("#form1").submit();
}

四、 理论再华丽依然要用coding来进行并发现js模版插件

自身根据这位情人小说中写到的用法以及查看API写了个demo,发现先后尚未报错正是未有多少,他涉及remote参数中带有3个事件:beforeSend、success、complete,注释中写到在success中拍卖后台再次回到的多寡,也正是个json串,json串中务必带有数据总的数量(total或count)。
小编在demo中看到那多少个事件不起来效率,不知底那位伙计自身实践了未曾,于是自个儿查看插件源码,发现源码中唯有二个callback事件,在此间处理回来的多少,OK,解决了数据重临难点。

上面难题又来了,由于是分页,还算是比较平常的须要,那么此时小编就发现,常常的做法必将是一贯在callback中foreach,各类拼接字符串、单引号、双引号。
作者拼着拼着友好就拼不下来了,小编随后看这一个插件的DEMO,该插件的pageIndex是从0开端,繁多插件都以从一方始,所以基于linq的分页1般都这么写:((pageIndex-1)*pageSize),那假诺是0的话就绝不减了。
在API的下方1个概念迷惑了自作者的眼珠子:怎么着表现重回的数目,介绍一款jq模版插件,只需定义呈现模版,壹行js化解数据表现。其实js模版倒不是何等不熟悉,只是原先没去用过,觉的拼凑jq就很牛气了,没悟出那么些模版这么大的吸引力。
而且一定水准上这些模版的合计就好像Angularjs的多少操作格局一样。

纠结了那半天本人又再度把DEMO写了一次,化解。
DEMO虽轻松,不过带给作者的拿走却十分大,
作者会重构我们的种类,并且拓宽前台尝试那种办法。

<form method="post" action="http://127.0.0.1:801/Home/UploadResult" enctype="multipart/form-data" id="form1">
 <input name="qdctvfile" id="qdctvfile11" type="file" onchange="eventStart()">
</form>
<script type="text/javascript">
 $("#form1").ajaxForm({
  beforeSerialize: function () {
   var filepath = $("#qdctvfile11").val()
   var extStart = filepath.lastIndexOf(".");
   var ext = filepath.substring(extStart, filepath.length).toUpperCase();
   if (ext != ".PNG" && ext != ".JPG") {
    alert("图片仅支持png,jpg格式");
    $("#qdctvfile11").val("");
    return false;
   }
  },
  success: function (data) {
   alert(data);
  }
 });
 function eventStart(obj) {
  $("#form1").submit();
 }

只顾,代码中的eventStart方法是指在甄选文件后,自动提交表单,而ajaxForm表示提交表单为万分方式,success回调方法是指
异步重临表单地址 的再次回到值。

五、关键地点处理代码

 1 @{ 2     ViewBag.Title = "Index"; 3     Layout = "~/Views/Shared/_Layout.cshtml"; 4 } 5 <style> 6     h2 7     { 8         margin-left:80px; 9     }10 </style>11 <link href="~/Content/bootstrap.css" rel="stylesheet" />12 <link href="~/Content/jquery.pagination.css" rel="stylesheet" />13 <h2>jq Pagination and js Template</h2>14 <div class="container">15     <table id="rsTable" class="table table-striped">16         <thead>17             <tr>18                 <th>ID</th>19                 <th>Name</th>20                 <th>Price</th>21             </tr>22         </thead>23         <tbody id="rsbody">24 25         </tbody>26 27     </table>28     <div id="pager" class="m-pagination"></div>29 </div>30 31 <script src="~/Scripts/jsrender.min.js"></script>32 <script src="~/Scripts/jquery.pagination-1.2.1.js"></script>33 <script type="text/javascript">34     $(function () {35 36         $("#pager").page({37             remote: {38                 url: '/Home/AjaxList', //请求地址39                 param: {},             //请求参数40                 callback: function  {41                     //回调函数,处理返回值42                     var modelList = data.modelList;43                     $("#rsbody").empty().html($("#trTmpl").render(modelList));44                 },45                 pageIndexName: 'pageIndex',46                 pageSizeName: 'pageSize',47                 totalName: 'total'48             },49             pageSize: 350         });51     });52 </script>53 <script type="text/x-jsrender" id="trTmpl">54     <tr>55        <td>{{:ID}}</td>56        <td>{{:Name}}</td>57        <td>{{:Price}}</td>58     </tr>59 </script>

 public ActionResult Index()        {            return View();        }        public JsonResult AjaxList()        {            int pageIndex = Convert.ToInt16(Request["pageIndex"]);            int pageSize = Convert.ToInt16(Request["pageSize"]);            IList<Product> list = new List<Product>()            {                new Product{ID=1,Name="iphone6 plus",Price=6999},                new Product{ID=2,Name="iphone6",Price=4999},                new Product{ID=3,Name="MX5",Price=1799},                new Product{ID=4,Name="MEILAN NOTE",Price=799},                new Product{ID=5,Name="XIAOMI 2S",Price=1299}            };            IList<Product> modelList = list.Skip(pageIndex * pageSize).Take.ToList();            int count = list.Count;            var strJson = new JsonResult();            strJson.Data = new            {                modelList=modelList,                total=count            };            strJson.JsonRequestBehavior = JsonRequestBehavior.AllowGet;            return strJson;        }

注意,代码中的eventStart方法是指在挑选文件后,自动提交表单,而ajaxForm表示提交表单为特别情势,success回调方法是指异步重返表单地址的重回值。

2 跨域的初叶实现

总结

就算是做了个分页的demo,不过在采纳这一个分页插件的进度中,却发现了js模版插件这一个好东西,写法简洁而且页面jq也轻便不少。
在此之前还写过一片基于MVC Angularjs分页。多多相比较,遵照本身索要选取。

下载链接: 访问密码 4d30

二 跨域的初始达成

化解域访问,大家能够在服务端的响应头上增加Access-Control-Allow-Origin和Access-Control-Allow-Methods两特性状就可以,那一个特征在IE⑩以下的浏览器不被帮忙,万分烦恼。

解决域访问,大家能够在服务端的响应头上增添Access-Control-Allow-Origin和Access-Control-Allow-Methods多少个特征即可,这个特点在IE10以下的浏览器不被接济,极度郁闷。

/// <summary>
/// MVC模式下跨域访问
/// </summary>
public class MvcCorsAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
Dictionary<string, string> headers = new Dictionary<string, string>();
headers.Add("Access-Control-Allow-Origin", "*");
headers.Add("Access-Control-Allow-Methods", "*");
foreach (var item in headers.Keys)
{
filterContext.RequestContext.HttpContext.Response.Headers.Add(item, headers[item]);
}
base.OnActionExecuting(filterContext);
}
}
 /// <summary>
 /// MVC模式下跨域访问
 /// </summary>
 public class MvcCorsAttribute : ActionFilterAttribute
 {
  public override void OnActionExecuting(ActionExecutingContext filterContext)
  {
   Dictionary<string, string> headers = new Dictionary<string, string>();

   headers.Add("Access-Control-Allow-Origin", "*");
   headers.Add("Access-Control-Allow-Methods", "*");
   foreach (var item in headers.Keys)
   {
    filterContext.RequestContext.HttpContext.Response.Headers.Add(item, headers[item]);
   }

   base.OnActionExecuting(filterContext);
  }
 }

留神,在生养环境下,我们的 Access-Control-Allow-Origin
应该是钦定合法的域名的,*意味着对因而网址都开放访问,那是危险的。

小心,在生育条件下,我们的Access-Control-Allow-Origin应该是点名合法的域名的,*表示对为此网址都绽放访问,那是人命关天的。

叁 消除IE拾以下不能跨域的标题

三 化解IE十以下不能够跨域的主题素材

对此IE浏览器确实无法说了,即使很欢悦微软的事物,但对于IE来讲,作者不得不是NO,我真不想过多的去谈论它,先看看IE达成跨域上传的缓解思想:由客户端不直接回到数据,而是重写向到客户端的callback地址,由
callback 像 ajaxForm 方法再次来到最后的多少,这

对此IE浏览器确实无法说了,纵然非常的慢乐微软的事物,但对于IE来讲,作者不得不是NO,作者真不想过多的去谈论它,先看看IE达成跨域上传的缓解思想:由客户端不直接回到数据,而是重写向到客户端的callback地址,由callback像ajaxForm方法再次来到最后的数码,那样就缓解了直白的跨域难题了。

样就缓解了直白的跨域问题了。

  /// <summary>
  /// 第三方的服务端
  /// </summary>
  /// <param name="name"></param>
  /// <returns></returns>
  [HttpPost]
  public ActionResult UploadResult()
  {
   string data = "{'code':'OK','thumpImgUrl':'http://127.0.0.1/images/1.jpg'}";
   return Redirect("http://localhost:9497/Home/UploadCallback?data=" + data);
  }

  /// <summary>
  /// 可能是服务端来调用它
  /// </summary>
  /// <returns></returns>
  public ActionResult UploadCallback(string data)
  {
   return Content(data);
  }
/// <summary>
/// 第三方的服务端
/// </summary>
/// <param name="name"></param>
/// <returns></returns>
[HttpPost]
public ActionResult UploadResult()
{
string data = "{'code':'OK','thumpImgUrl':'http://127.0.0.1/images/1.jpg'}";
return Redirect("http://localhost:9497/Home/UploadCallback?data=" + data);
}
/// <summary>
/// 可能是服务端来调用它
/// </summary>
/// <returns></returns>
public ActionResult UploadCallback(string data)
{
return Content(data);
}

稍稍时候,大家在想一个主题材料的消除格局时,假诺一条路走不通过,可以调换思路,或者会有意料之外的获取!

稍微时候,我们在想三个主题材料的消除办法时,如若一条路走不通过,可以调换思路,恐怕会有意料之外的获取!

有人问,那块使用POST方式在服务端与客户端进行数据传递能够不得以,公公说:不得以,因为POST在交付到客户端后,客户端处理,然后仍旧把结果回到给服务端,最终服务端再把结果重临给ajaxform,那只怕又回到了开班的跨域问题,哈哈!

有人问,这块使用POST格局在服务端与客户端进行多少传递能够不得以,五叔说:不可以,因为POST在提交到客户端后,客户端处理,然后依旧把结果重临给服务端,最终服务端再把结果重回给ajaxform,那要么又再次来到了开头的跨域难题,哈哈!

4858美高梅 3

4858美高梅 4

4858美高梅 5

以上所述是笔者给大家介绍的依据jQuery.form插件完结jQuery跨域异步上传文件的相干内容,希望对大家全部帮忙!

呵呵,怎么着,挺有意思的呢!

你只怕感兴趣的稿子:

  • jQuery插件ajaxFileUpload异步上传文件
  • 基于Jquery插件完成跨域异步上传文件成效
  • PHP结合jQuery插件ajaxFileUpload完成异步上传文件实例
  • jQuery异步上传文件插件ajaxFileUpload详细介绍
  • JQuery插件ajaxfileupload.js异步上传文件实例
  • jQuery插件ajaxFileUpload完成异步上传文件效果
  • jquery之ajaxfileupload异步上传插件(附工程代码)
  • Jquery插件之多图片异步上传
  • 动用jQuery异步上传文件的插件用法详解

4858美高梅,更加多精粹内容,请点击《jQuery上传操作汇总》,进行深切学习和钻研。

以上正是本文的全部内容,希望对大家的读书抱有援助,多谢各位的读书!

您或者感兴趣的稿子:

  • jQuery插件ajaxFileUpload异步上传文件
  • jQuery.form插件的使用及跨域异步上传文件
  • PHP结合jQuery插件ajaxFileUpload达成异步上传文件实例
  • jQuery异步上传文件插件ajaxFileUpload详细介绍
  • JQuery插件ajaxfileupload.js异步上传文件实例
  • jQuery插件ajaxFileUpload完毕异步上传文件效果
  • jquery之ajaxfileupload异步上传插件(附工程代码)
  • Jquery插件之多图片异步上传
  • 动用jQuery异步上传文件的插件用法详解

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有