ajax
Posted 五月雨变奏
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax相关的知识,希望对你有一定的参考价值。
""" 异步提交 局部刷新 例子:github注册 动态获取用户名实时的跟后端确认并实时展示的前端(局部刷新) 朝发送请求的方式 1.浏览器地址栏直接输入url回车 GET请求 2.a标签href属性 GET请求 3.form表单 GET请求/POST请求 4.ajax GET请求/POST请求 AJAX 不是新的编程语言,而是一种使用现有标准的新方法(比较装饰器) AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程) Ajax我们只学习jQuery封装之后的版本(不学原生的 原生的复杂并且在实际项目中也一般不用) 所以我们在前端页面使用ajax的时候需要确保导入了jQuery ps:并不只有jQuery能够实现ajax,其他的框架也可以 但是换汤不换药 原理是一样的 """
""" 页面上有三个input框 在前两个框中输入数字 点击按钮 朝后端发送ajax请求 后端计算出结果 再返回给前端动态展示的到第三个input框中 (整个过程页面不准有刷新,也不能在前端计算) """ $(‘#btn‘).click(function () { // 朝后端发送ajax请求 $.ajax({ // 1.指定朝哪个后端发送ajax请求 url:‘‘, // 不写就是朝当前地址提交 // 2.请求方式 type:‘post‘, // 不指定默认就是get 都是小写 // 3.数据 {#data:{‘username‘:‘jason‘,‘password‘:123},#} data:{‘i1‘:$(‘#d1‘).val(),‘i2‘:$(‘#d2‘).val()}, // 4.回调函数:当后端给你返回结果的时候会自动触发 args接受后端的返回结果 success:function (args) { {#alert(args) // 通过DOM操作动态渲染到第三个input里面#} {#$(‘#d3‘).val(args)#} console.log(typeof args) } }) }) """ 针对后端如果是用HttpResponse返回的数据 回调函数不会自动帮你反序列化 如果后端直接用的是JsonResponse返回的数据 回调函数会自动帮你反序列化 HttpResponse解决方式 1.自己在前端利用JSON.parse() 2.在ajax里面配置一个参数 (后面再讲) """
""" 自己要学会如何拷贝 学会基于别人的基础之上做修改 研究各个参数表示的意思 然后找葫芦画瓢 """ <script> $(‘.del‘).on(‘click‘,function () { // 先将当前标签对象存储起来 let currentBtn = $(this); // 二次确认弹框 swal({ title: "你确定要删吗?", text: "你可要考虑清除哦,可能需要拎包跑路哦!", type: "warning", showCancelButton: true, confirmButtonClass: "btn-danger", confirmButtonText: "是的,老子就要删!", cancelButtonText: "算了,算了!", closeOnConfirm: false, closeOnCancel: false, showLoaderOnConfirm: true }, function(isConfirm) { if (isConfirm) { // 朝后端发送ajax请求删除数据之后 再弹下面的提示框 $.ajax({ {#url:‘/delete/user/‘ + currentBtn.attr(‘delete_id‘), // 1 传递主键值方式1#} url:‘/delete/user/‘, // 2 放在请求体里面 type:‘post‘, data:{‘delete_id‘:currentBtn.attr(‘delete_id‘)}, success:function (args) { // args = {‘code‘:‘‘,‘msg‘:‘‘} // 判断响应状态码 然后做不同的处理 if(args.code === 1000){ swal("删了!", args.msg, "success"); // 1.lowb版本 直接刷新当前页面 {#window.location.reload()#} // 2.利用DOM操作 动态刷新 currentBtn.parent().parent().remove() }else{ swal(‘完了‘,‘出现了位置的错误‘,‘info‘) } } }) } else { swal("怂逼", "不要说我认识你", "error"); } }); }) </script>
以上是关于ajax的主要内容,如果未能解决你的问题,请参考以下文章