导航
  • 全部
...

个人技术总结——Ajax的使用和JS与PHP的结合编写

222000201鲍仁俊 学生 2023-06-07 01:29:59
这个作业属于哪个课程2023年福大-软件工程实践-W班
这个作业要求在哪里软件工程实践总结&个人技术博客
这个作业的目标技术博客
其他参考文献ajax的traditional属性的作用

目录

  • 1、技术概述
  • 2、技术详述
  • 2.1 技术详细介绍
  • 2.2 基本使用方法
  • 2.3 使用注意之处
  • 2.4 技术使用中遇到的问题和解决过程
  • 2.4.1 如何实现接口超时再次调用的问题
  • 2.4.2 PHP脚本插入的问题
  • 2.4.3 无刷新式更新页面
  • 2.5 总结

1、技术概述

jQuery的Ajax技术是用于在不刷新整个页面的情况下，通过异步请求从服务器获取数据并更新页面的技术。在需要动态更新页面内容的情况下，可以使用Ajax技术。学习该技术的原因是为了提高网站的用户体验和性能。Ajax技术的难点在于需要处理异步请求和响应的过程，以及如何处理请求失败和超时等异常情况。

2、技术详述

2.1 技术详细介绍

jQuery的Ajax技术是一种用于在不刷新整个页面的情况下，通过异步请求从服务器获取数据并更新页面的技术。它可以通过jQuery的$.ajax()方法或$.get()、$.post()等简化方法来实现。使用Ajax技术可以提高网站的用户体验和性能，因为它可以在不刷新整个页面的情况下，动态地更新页面内容，从而避免了页面的重载和重新渲染。Ajax技术的难点在于需要处理异步请求和响应的过程，以及如何处理请求失败和超时等异常情况。为了更好地使用Ajax技术，我们需要掌握jQuery的Ajax方法的使用，了解Ajax请求和响应的过程，以及如何处理异常情况。

2.2 基本使用方法

  1. $.ajax({
  2.      type : "post",//传参方式
  3.      url : "接口地址",
  4.      data:{
  5.          "参数1":value1,
  6.          "参数2":value2
  7.      },
  8.      async : true,//异步|同步
  9.      traditional:true,//参数解析方式
  10.      dataType : "json",//数据类型
  11.      timeout : 1000,//超时时间（毫秒）
  12.      success : function(result){ 
  13.          //成功回调，返回内容为result
  14.      },
  15.      error : function(result){
  16.          //失败回调，返回内容为result
  17.      }
  18.  });

其中 traditional参数，默认false的时候如果是{a:{b:'value'}}是处理成a[b],这样形式，如果是数组：data:{a:[1,2]}，是解析成a[]=1&a[]=2，这种方式后台确实要做兼容（取a[b]或a[]）来取值。
在数组情况下把traditional参数设置成true，是解析成a=1&a=2,对后台直接通过a拿数据。但是实验了下object情况，把traditional设置成true，转成了a=[object+Object]，这样就是费的了。false时解析成上面的形式应该就是类型指示作用，我看到这种格式就知道请求数据是Array还是object了，true就是按照form提交的方式传值。

2.3 使用注意之处

  1. 首先就是一定要搞清楚后端接收参数的方式，在复用的时候容易忘记修改导致接口对接失败，而且会理所当然的略过这种很低级的错误。
  2. 其次data中的参数间的间隔符号是","而不是";"，很多时候也会误打出错，导致失败。
  3. 接口地址可以传入预定义的参数（一般来说是get方式获取的），比如
  1. $.ajax({
  2.      type : "post",//传参方式
  3.      url : "http://test.test?act=login",
  4.      data:{
  5.          "参数1":value1,
  6.          "参数2":value2
  7.      },
  8.      async : true,//异步|同步
  9.      traditional:true,//参数解析方式
  10.      dataType : "json",//数据类型
  11.      timeout : 1000,//超时时间（毫秒）
  12.      success : function(result){ 
  13.          //成功回调，返回内容为result
  14.      },
  15.      error : function(result){
  16.          //失败回调，返回内容为result
  17.      }
  18.  });

这样做可以灵活定义接口的用途，比如例子中就定义了接口是用于登录用的，那么后端就需要以GET方式接收act这个参数,然后通过switch进行选择对应的接口处理部分进行处理。

当然也可以在data中进行定义。

比如：

  1. $.ajax({
  2.    type : "post",
  3.    url : "<?=$api_link[$page_name]; ?>",
  4.    data:{
  5.        "act":"login",
  6.        "username":data.username,
  7.        "password":data.password,
  8.    },
  9.    async : true,
  10.    traditional:true,
  11.    dataType : "json",
  12.    timeout : (5000),
  13.    success : function(result){ 
  14.        if (result.code == 200) {
  15.            //将账号密码保存到本地
  16.            localStorage.setItem("username",data.username);  
  17.            localStorage.setItem("password",data.password);  
  18.            layer.msg(result.msg, function () {
  19.                 window.location = 'index.php';
  20.            });
  21.        }
  22.        else {
  23.            layer.msg(result.msg);
  24.        }
  25.    },
  26.    error : function(result){
  27.        layer.msg("接口失败",{icon: 2});
  28.    }
  29.  });

2.4 技术使用中遇到的问题和解决过程

2.4.1 如何实现接口超时再次调用的问题

针对这个问题一开始是通过外部设置一个时间控制器来实现，但是后来查阅资料发现，JQ的AJAX是支持超时的功能的，所以可以将ajax调用封装为一个函数。

  1. //count:{test:最大次数,now:当前第几次}
  2. var ajaxLogin = function(timeout, count, param, url){
  3.     $.ajax({
  4.          type : "post",//传参方式
  5.          url : url,
  6.          data:param,
  7.          async : true,//异步|同步
  8.          traditional:true,//参数解析方式
  9.          dataType : "json",//数据类型
  10.          timeout : timeout,//超时时间（毫秒）
  11.          success : function(result){ 
  12.              //成功回调，返回内容为result
  13.          },
  14.          error : function(result){
  15.              //失败回调，返回内容为result
  16.              //失败重复调用
  17.              if(count.test>count.now){
  18.                  ajaxLogin (timeout, {test:count.test,now:(count.now+1)}, param, url);
  19.              }
  20.          }
  21.      });
  22. }

根据分析有些请求极有可能是因为服务端查询速度慢，或者数据量过大造成的不能及时响应，针对这个问题，如果返回的内容本身就很多，那么无论调用多少次依然都是失败的，所以可以模仿计算机网络中的窗口进行动态的调控超时的时间，类似TTL。

  1. //count:{test:最大次数,now:当前第几次}
  2. var ajaxLogin = function(timeout, count, param, url){
  3.     $.ajax({
  4.          type : "post",//传参方式
  5.          url : url,
  6.          data:param,
  7.          async : true,//异步|同步
  8.          traditional:true,//参数解析方式
  9.          dataType : "json",//数据类型
  10.          timeout : timeout,//超时时间（毫秒）
  11.          success : function(result){ 
  12.              //成功回调，返回内容为result
  13.          },
  14.          error : function(result){
  15.              //失败回调，返回内容为result
  16.              //失败重复调用
  17.              if(count.test>count.now){
  18.                  //动态增大超时数
  19.                  ajaxLogin (timeout + 1000, {test:count.test,now:(count.now+1)}, param, url);
  20.              }
  21.          }
  22.      });
  23. }

2.4.2 PHP脚本插入的问题

由于开发的后端是PHP，前端部分也涉及到部分PHP的脚本，在PHP脚本的插入上遇到了问题。根据分析发现是参数类型的不匹配。

比如PHP部分有：

  1. <?php
  2.     $act = "login";
  3. ?>

而JS部分需要实现：

if(PHP的act参数 == "login"){//code}

如果这样使用就会出现失败的问题：

  1. if(<?=$act; ?> == "login"){//code}

乍一看，感觉是利用PHP输出了一个字符串可以与字符串进行比较，但是实际会提示login未定义，因为这句语句相当于if(login == "login"){//code}

解决方法：其实解决也比较简单就是在PHP脚本外在包括一层括号，这样就可以解决问题了。

if("<?=$act; ?>" == "login"){//code}

2.4.3 无刷新式更新页面

在回调函数中可以对DOM树进行更新，可以调用jq的方法去控制页面的元素内容，可以将获取的数据通过模板动态的渲染到页面上。

比如：

  1. $.ajax({
  2.    type : "post",//传参方式
  3.    url : "<?=$api_link[$page_name]; ?>",//接口地址
  4.    data:{
  5.        "act":"user_get",
  6.        "user":loading_user,
  7.    },
  8.    async : true,
  9.    traditional:true,
  10.    dataType : "json",
  11.    //最大等待时间
  12.    timeout : 5000,
  13.    //result.data是字符串（“编辑修改成功”或者是“编辑修改失败”）
  14.    success : function(result){
  15.        var temp_id_name = ['uid', 'nickname', 'wx_openid', 'avatar', 'invitedby', 'invitecode', 'reg_time', 'login_time', 'state'];
  16.        var lock_input = ['nickname', 'wx_openid', 'avatar', 'invitedby', 'state'];
  17.        var lock_input_holdtip = ['请输入用户昵称', '请输入微信ID', '请输入头像地址', '请输入邀请该用户的用户ID', '请输入用户状态'];
  18.        switch(result.code){
  19.            case(201):{
  20.                for(var i = 0; i < lock_input.length; i++){
  21.                    var varname = "user_info_" + lock_input[i];
  22.                    $("#" + varname).attr("disabled", "disabled");
  23.                    $("#" + varname).attr("placeholder", "请输入用户ID");
  24.                    $("#" + varname).addClass("layui-bg-gray");
  25.                }
  26.                for(var i = 0; i < temp_id_name.length; i++){
  27.                    if(temp_id_name[i] != 'uid'){
  28.                        var varname = "user_info_" + temp_id_name[i];
  29.                        eval("$('#" + varname + "').val('')");
  30.                        var form = layui.form;
  31.                        form.render("select");
  32.                    }
  33.                }
  34.                var form = layui.form;
  35.                form.render("select");
  36.                uid_tip = layer.tips('ID为'+loading_user+'的用户不存在', '#user_info_uid', {
  37.                  tips: [1, '#3595CC'],
  38.                  time: 4000
  39.                });
  40.                $("#user_info_submit").addClass("layui-btn-disabled");
  41.                break;
  42.            }
  43.            case(200):{
  44.                get_invitedby(result.data.uid);
  45.                for(var i = 0; i < temp_id_name.length; i++){
  46.                    var varname = "user_info_" + temp_id_name[i];
  47.                    eval("$('#" + varname + "').val(result.data." + temp_id_name[i] + ")");
  48.                }
  49.                for(var i = 0; i < lock_input.length; i++){
  50.                    var varname = "user_info_" + lock_input[i];
  51.                    $("#" + varname).removeAttr("disabled");
  52.                    $("#" + varname).attr("placeholder", lock_input_holdtip[i]);
  53.                    $("#" + varname).removeClass("layui-bg-gray");
  54.                }
  55.                var form = layui.form;
  56.                form.render("select");
  57.                $("#user_info_submit").removeClass("layui-btn-disabled").addClass("layui-btn-normal");
  58.                if(typeof uid_tip != "undefined"){
  59.                    layer.close(uid_tip);
  60.                }
  61.                break;
  62.            }
  63.            case(-200):{
  64.                for(var i = 0; i < temp_id_name.length; i++){
  65.                    if(temp_id_name[i] != 'uid'){
  66.                        var varname = "user_info_" + temp_id_name[i];
  67.                        eval("$('#" + varname + "').val('')");
  68.                    }
  69.                }
  70.                var form = layui.form;
  71.                form.render("select");
  72.                for(var i = 0; i < lock_input.length; i++){
  73.                    var varname = "user_info_" + lock_input[i];
  74.                    $("#" + varname).attr("disabled", "disabled");
  75.                    $("#" + varname).attr("placeholder", "请输入用户ID");
  76.                    $("#" + varname).addClass("layui-bg-gray");
  77.                }
  78.                $("#user_info_submit").addClass("layui-btn-disabled");
  79.                layer.msg('查询失败', {icon: 2});
  80.                break;
  81.            }
  82.            default:{
  83.                
  84.                break;
  85.            }
  86.        }
  87.        layer.close(index_find_user);
  88.    },
  89.    error : function(result){
  90.        //接口失败回调
  91.        layer.msg("接口失败",{icon: 2});
  92.        layer.close(index_find_user);
  93.    }
  94. });

2.5 总结

AJAX使用起来也比较的方便，但是细节方面还是需要注意，往往接口调用不成功就是因为一些格式的问题和符号的错误。而这些错误恰恰是开发者们容易忽视的错误，所以不用专门的调试工具仅仅靠浏览器的调试可能很难发现这些问题。在我的实际开发中也经常遇到这些问题，特做此篇分享参考。

...全文
给本帖投票
117 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
软件工程实践总结——也是结束也是开始>>
回复
切换为时间正序
请发表友善的回复…
发表回复
7、使用JSON向服务器发送数据——ajax基础笔记
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它以其简洁明了的文本形式，易于人阅读和编写，同时也易于机器解析和生成。在Web开发中，JSON经常用于客户端与服务器之间的数据交互，特别是在AJAX...
ASP网站整站程序源码——php ajax 域名查询实例开发.rar
在本案例中，“ASP网站整站程序源码——php ajax 域名查询实例开发.rar”是一个包含完整网站源代码的压缩包，主要用于教授如何使用ASP技术结合PHP和AJAX实现一个实时的域名查询功能。 首先，我们需要理解ASP的基础...
PHP+Ajax（PPT）
【PHP+Ajax（PPT）】教程主要涵盖了两个核心编程技术——PHP和Ajax，它们在Web开发中扮演着至关重要的角色。PHP是一种服务器端的脚本语言，常用于处理动态网页内容，而Ajax（Asynchronous JavaScript and XML）则是...
PHP实例开发源码——jquery插件之wScratchPad.js.zip
【标题】"PHP实例开发源码——jquery插件之wScratchPad.js.zip" 提供了一个实际的PHP项目，其中包含了一个基于jQuery的插件——wScratchPad.js。这个插件主要用于创建模拟刮刮卡效果，常用于网页互动设计、游戏或者...
php+apc+ajax实现大文件上传进度条
本项目“php+apc+ajax实现大文件上传进度条”旨在提供一种高效、用户友好的解决方案，通过结合PHP、Alternative PHP Cache (APC) 和AJAX技术来跟踪并展示文件上传进度。 首先，PHP作为服务器端脚本语言，负责处理...
2023年福大-软件工程实践-W班

686

社区成员

798

社区内容

发帖
与我相关
我的任务
社区描述
2023年福州大学软件工程实践课程W班的教学社区
软件工程团队开发软件构建 高校 福建省·福州市
社区管理员
  • FZU_SE_teacherW
  • aboutazhang
  • 郭渊伟
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章
手机看
关注公众号

关注公众号

 客服 返回
顶部