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里面配置一个参数
            (后面再讲)
"""

 

ajax结合sweetalert

"""
自己要学会如何拷贝
学会基于别人的基础之上做修改
研究各个参数表示的意思 然后找葫芦画瓢
"""
<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的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段