2017.9.13 关于ajax、Lambda表达式和页面加载事件等问题的研究

分享人:黄华英

一、问题及解决方案

1. 关于ajax

image.png

这是昨天姜葳讲到的下拉框选中某值后,文本框自动出现该值,直接给文本框附上控件的value,可以从页面上取到这个值附进去,但是如果textbox中需要的值是根据下拉框选中的值从数据库取出来的呢?我们需要访问数据库,必须跑后台代码对不对,但是我们又不想刷新当前页面,怎么办呢?使用ajax :

image.png
image.png
image.png
  • 先给textbox绑定blur()事件,这个事件去调用了ajax
image.png
  • async这个属性,用于控制请求数据的方式,默认是true即异步请求。当你的function2与function1有关系的时候,那你就需要设置async值为false(同步),它会等到function1全部执行完毕之后才执行。

image.png
image.png
image.png
  • 关于type:POST/GET
    • Get:如果调用是要检索服务器上的数据则使用GET, 若有大量的数据需要传输,建议一次发出多个只传递少量信息的Ajax
    • POST:如果调用是向服务器上发送任意数据,就可以使用POST

附:Ajax中Get和Post两种传值方式的异同

2. Lambda表达式

Lambda 表达式(C# 编程指南):https://docs.microsoft.com/zh-cn/dotnet/csharp/programming-guide/statements-expressions-operators/lambda-expressions

image.png

与之相似jQuery遍历 filter方法

Var  childtree=(treedata).filter(p => p.A==A && p.B!=C);
image.png
image.png

二、遗留问题

1. 页面加载事件

常用的页面加载事件:

  • $(function(){}):DOM文档加载完毕后执行

  • onload:页面包含图片等文件在内的元素全部加载完成后执行

$(function(){})不会被覆盖,而window.onload会被覆盖

$(function(){    console.log("ready执行");});
$(function(){    console.log("ready1执行");});
window.onload = function(){    console.log('load执行');};
window.onload = function(){    console.log('load1执行');}

  • DOM文档加载步骤:
    1.解析HTML结构
    2.加载外部的脚本和样式文件
    3.解析并执行脚本代码
    4.执行$(function(){})内对应代码
    5.加载图片等资源
    6.页面加载完毕,执行window.onload
image.png
该图实际执行效果是先执行window.onload弹出onload,再加载图片等资源,这与DOM文档加载步骤不一致,为什么?

附:Js页面加载触发事件document.ready和onload的区别:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/


更新:

img的显示和onload应该是平行的
LoadImg()->showImg()
->window.onload()
加载图片的方法是比onload先的
但是显示的时候应该是和onload同时执行
分两步 LoadImg()->showImg()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容