.net webform客户端ajax数据实时刷新

Posted 2023-05-01

小弟在做一个项目，需实现以下功能，先看图

有三种状态，三种状态显示的数目（即红框）内的数字是实时更新的。小弟不才，用了最笨的方法，即在后台访问数据库统计出数据后，在前台通过js的setinterval不断刷新来获取，但是用这种方法对数据库会造成一定的压力。
现想进行优化，但苦于小弟才疏学浅，希望各路大神给点建议。百度了一下有类似的如http的长连接、缓存机制等，但不熟，看得一头雾水。。。

cache对象里，有个参数是数据库缓存依赖，就是数据库的某个表发生了变更就更新缓存。然后你的前端，隔个0.5秒去读取缓存里的数据，服务器能承受的。 参考技术A 缓存吧设置成数据依赖，前台仍然是ajax。

打造颠覆你想象中的高性能，轻量级的webform框架---无刷新提交后台（第四天）

 

问题3：使用webform,每次提交后台界面都要刷新，能不能让我们与后台 交互的时候像ajax一样，界面不用刷新，同时还能返回参数并且继续在前台执行？？

    相信很多人和我一样，这也是很多人开发放弃webform最重要的原因吧！！这也是很多人觉得webform不好的原因吧！！！其实mvc提交form表单  也会刷新，但是 视图中没有像webfrom一样的后台，所以必须使用 ajax 的方法提交后台，所以没有刷新！

     其实这个问题的解决方案早在很多年前就已经解决了，只是知道的人不多，所以大家的印象中一直认为webform 提交后台总是要界面刷新。这里呢，我提供的2个种解决方案，也是我们工作和学习中常见的2个解决方案。

     第一种方法是使用 jquery.form.js   的插件，我们只需要将$("#form1").sumit() 改为 $("#form1").ajaxSubmit();

     例如： 

function ajaxGohoutai(fangfa,canshu,aftergo) {   .//前台传入参数和方法名字，后台自动绑定执行方法
$("#hid_fangfa").val(fangfa);
$("#hid_canshu").val(canshu);

$("#form1").ajaxSubmit(function (result) {

aftergo(result);

});

}

实例：

  <input  type="button"  onclick="ajaxgo()"  value="ajax提交1个参数" />
function ajaxgo(){

ajaxGohoutai("ajax", "我不是人", function (result) {
alert(result);

});
}

　　使用插件不是我们的初衷，我们希望能够用我们的代码去控制我们想要得到的数据以及能够控制form表单输出的数据，因为我们还是不知道 form表单能够无刷新提交？

     想要弄懂这些个为什么，我们必须要懂得form表单的属性，为了让大家更好的了解form 表单 属性，我们来拿生活中常见 买菜的例子为例子。

    表单提交其实就是一个买菜的过程，买菜钱你要准备钱等一些东西，这个东西就是我们  表单控件中的 用 name 属性标记的，  它告诉们这些是我们需要提交的东西。

   买菜我们需要知道是什么方式去买菜，坐车还是走路，还是其他方法，这个就是form表单的method 属性 包括post，get，delete，put 属性。

   买菜我们要知道去哪里买菜？是去超市买菜，还是去菜市场买菜，还是去其他地方买菜，这属性就是我们的  action的属性，系统默认的为 该页面本身地址的后台，其实我们只需要改变form1表单的地址，同样我们可以提交到其他页面。

  买完菜之后我们需要将什么地方重写布置一下？这里的布置就是刷新的意思，系统默认的 页面本身的地址 ，系统默认属性为target=“_self”, 下面为其他属性。

      

_blank	在新窗口中打开。
_self	默认。在相同的框架中打开。
_parent	在父框架集中打开。
_top	在整个窗口中打开。
framename	在指定的框架中打开。

 通过以上的属性可以看出，导致form 表单提交后界面被刷新的罪魁祸首是  target=“_self”的属性，它指向了自己，如果想界面不被刷新，我们看了一下，好像只能将target指向一个 iframe  的name的值，界面似乎就可以不被刷新了。下面我们来试一下呗！！！！！在前面代码的基础上，我们只需要将提交的代码修改成这样。

  第一步 ： 前台加入 一个隐藏的iframe 。

       <iframe name="_NofreshIframe"  id="_NofreshIframe"  style="display:none;"></iframe>

第二步：修改我们以往的方法，在form表单提交将    target指向 为 iframe 的值，我们就可以不刷新提交了。

   例如：

$("#form1").attr("target", "_NofreshIframe");
$("#form1").submit();

然后我们测试 发现界面确实没有刷新了，而且也能够做到无刷新提交到后台了。

但是我们发现，这还是不能达到我们想要的效果，什么效果呢？我们需要在后台执行完成后能马上执行前台，并且还能够将参数传递给前台，简单点说就是要做到和ajax 的效果一样！！！！！

    没办法，那执行放到下期去解决！！！！！！！