前端jquery之ajax响应

最新推荐文章于 2022-02-27 08:39:01 发布

小泽泽泽ya

最新推荐文章于 2022-02-27 08:39:01 发布

阅读量236

点赞数

本文链接：https://blog.csdn.net/qq_36259105/article/details/108210549

版权

PHP 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jquery-Ajax

ajax是与服务器交换数据并更新部分网页
获取html中控件，可以采用id获取，控件的值 $("#date").val()
也可以获取name,利用类似这样的语句 $(“input[name=‘date’]”).val() 其中input是input控件类型
而利用layui的form控件来监听，可以通过控件的name来获取控件的value值

<html>
<body>
...省略
 <input class="layui-input" placeholder="日期" name="date" id="date" value={$date}>
 <input class="layui-input"name="some_name" id="some_name1" value={$some_name}>
 <button  lay-submit lay-filter='save' class='layui-btn' title='提交'>提交</button>
                                
   ...省略
</body>
</html>
<script>
 "add_date":$("#date").val()//利用获取id=date的值
   layui.use(['form','layer','jquery'], function(){
        var  form = layui.form,
            layer = layui.layer;
        form.on('submit(save)',
            function (data) {
                $.ajax({
                    url: "submit",//url是跳转的控制器的名字，也就是路径
                    type: "post",
                    dataType: "json",
                    data: {//这里的data 默认和html中的控件的中name字段对应，自动获取
                        "id":data.field.id,
                        "some_name": data.field.some_name,
                        "some_word": data.field.some_word,
                        "add_date":$("#date").val()
                        "data":data//将整个data传送过去
                    },
                    success: function (data){//这里的data是控制器返回的json数据
                        if (data.code==1) {
                            layer.alert(data.message, {//通过.去访问这个json的字段对应的值
                                icon: 6
                            },function () {
                                location.reload();//刷新页面，不重载
                            });
                        }else if (data.code==2){
                            layer.alert(data.message, {
                                icon: 7
                            });
                        } else {
                            layer.alert(data.message, {
                                icon: 5
                            });
                        }
                    },
                    error: function (data) {
                        layer.alert(data.message, {
                            icon: 5
                        });
                    }
                });
                return false;
            });
    });
</script>

利用jquery 封装的ajax可以快速处理事件，从而进行增删改查的操作或者跳转到其他的控制器
回调函数
如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。

beforeSend
在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。

error
在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）

dataFilter
在请求成功之后调用。传入返回的数据以及 “dataType” 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。

success
当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。

complete
当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。

jquery 通过url访问到控制器，控制器处理完返回到前端，返回json格式的数据，根据这些数据可以动态变动前端表格数据。

小泽泽泽ya

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端jquery之ajax响应

Ajaxajax是与服务器交换数据并更新部分网页获取html中控件，可以采用id获取<html><body>...省略 <input class="layui-input" placeholder="日期" name="date" id="date" value={$date}> <input class="layui-input"name="some_name" id="some_name1" value={$some_name}> ..
复制链接

扫一扫

专栏目录