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()