• un9.14:前端页面中Ajax请求的标准写法。


    众所周知,Ajax是一种非常简单的从前端向后端请求数据的方法,也因为它简洁明了,所以被广泛应用,但是新手可能会有很多的疑问,什么是Ajax?Ajax有什么作用?接下来,小编就来给大家分享一下。

    Ajax全名async javascript and XML(异步JavaScript和XML),是前后台交互的能⼒,也就是我们客户端给服务端发送消息的⼯具,以及接受响应的⼯具。

    一、Ajax的请求。

    Ajax分为同步请求和异步请求。

    同步请求是指当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于生活中的排队,必须等待前一个人完成自己的事物,后一个人才能接着办。也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态。

    默认异步是当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。一般默认值为true,异步。异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。

    二、Ajax的操作流程。

    1、首先通过PHP页面将数据库中的数据取出
    2、取出后转成json格式的字符串,后利用ajax把字符串返还给前台
    3、再利用json.parse解析通过循环添加到页面上
    4、那么反之,前端的数据可以利用ajax提交到后台
    5、但是后台是没有办法直接把这些数据插入到数据库中,所以要先提交到PHP页面上
    6、最后再由PHP将数据插入到数据库中

     三、执行Ajax。

    1. function upBusiness(ids) {
    2. if(ids.length > 0){
    3. $.ajax({
    4. type: "POST",//请求类型为post
    5. contentType: "application/json",//内容类型为json
    6. url: "/ba/businessBaseInfo/upBusiness",//请求路径为
    7. dataType: "json",//数据类型为json
    8. data: JSON.stringify(ids),//将json转为String类型
    9. success: function (data) {//成功
    10. if (data && data.returnValue) {//如果数据返回的是controller中的数据
    11. layer.msg("上报成功", {time: 1500, icon: 1}, function () {
    12. initPrecautionsTable();//弹出一个上报成功的弹框,并刷新列表
    13. });
    14. } else {//否则
    15. layer.msg(data.msg, {time: 2000, icon: 2}, function () {
    16. initPrecautionsTable();//弹出一个错误提示
    17. });
    18. }
    19. },
    20. error: function () {//上报异常的时候执行此方法
    21. layer.msg("上报异常", {time: 2000, icon: 2}, function () {
    22. initPrecautionsTable();//弹出弹框显示上报异常并刷新列表
    23. });
    24. },
    25. });
    26. }else{
    27. layer.confirm("请至少选中一条数据!", {
    28. icon: 2,
    29. title: '提示'
    30. },//否则提示至少选中一条数据
    31. function (e) {
    32. layer.close(e);
    33. });
    34. }

    四、Ajax的优势xml HttpResult对象方法描述。

    以上就是Ajax的标准写法,其实Ajax最大的优势就是它不需要插件的⽀持,原⽣ js 就可以使⽤,不需要刷新⻚⾯就可以更新数据,减轻服务端和带宽的负担,但是它也有个小小的缺点,就是搜索引擎的⽀持度不够,因为数据都不在⻚⾯上,搜索引擎搜索不到。

  • 相关阅读:
    代码随想录58——单调栈:739每日温度、 496下一个更大元素I
    nginx的安装使用以及转发路径总结
    JavaScript 数组字符串方法
    QT:QSS自定义 QCheckBox实例
    元素绑定
    容器【容器介绍、Set接口介绍、 HashSet容器的使用、TreeSet容器的使用】(三)-全面详解(学习总结---从入门到深化)
    centos7离线安装neo4j
    【Android】RxJava+Retrofit+OKHttp3实现数据上传
    Spire.Office for Java 7.6.4
    LeetCode 1704. 判断字符串的两半是否相似:小难懂的代码
  • 原文地址:https://blog.csdn.net/m0_64818669/article/details/126853651