使用AJAX的几种方式

AJAX应用详解

最新推荐文章于 2022-05-06 17:46:30 发布

zy苦行僧

最新推荐文章于 2022-05-06 17:46:30 发布

阅读量462

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.youkuaiyun.com/zy1817204670/article/details/77842464

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了AJAX的基本使用方法，包括普通形式的AJAX请求、通过表单提交数据、使用validate插件验证表单数据以及自定义验证规则等内容，并展示了如何在前端与后端之间进行JSON数据交互。

普通形式的AJAX

        var data={'id':id};
        jQuery.ajax({
             type:'post',
             url:XXX,
             data:data,
             dataType:'json',
             cache:false,
             async:true,  //true为异步，false为同步
             success:function(data){}
        });

ajax提交form表单

         $("#submit").live("click",function(){
                $.ajax({
                    cache: true,
                    type: "POST",
                    url:XXX,
                    data:$('form表单的id').serialize(),
                    async: false,
                    error: function(request) {
                        alert("Connection error");
                    },
                    success: function(data) {}
                });
            })

validate提交表单

          $("#ajaxForm").validate({
                 rules:{
                    name:"required",""
                    value:"required"
                 },
                submitHandler:function(){
                    //这里写处理提交前的限制条件的内容
                    jQuery.ajax({
                        cache:false, 
                        type:"POST",
                        url:XXX,
                        data:{'id':id},
                        success: function(data){},
                        error:function(a,b,c){
                            alert("Connection error");
                        }
                    });
                 }
            });

            rules：字段的过滤条件

            submitHandler：submitde的提交实现

            自定义字段过滤器：
            jQuery.validator.addMethod("rules的方法名", function (value, element) { 
            //字段名的限制  
            if(jQuery.trim(value) != ''){
                return 限制方法; 
            }
            return true;
        }, jQuery.validator.format("错误提示"));

AJAX调用

        $.post(url,{'id':id},function(result){},"json")

AJAX获取页面

        //ajax跳转至页面，所以返回页面内容即result
        $http({
            method : 'GET',
            params : {},
            url : XXX,
        }).success(function(result, status, headers, config) {
            //可直接操作result页面的内容
        }).error(function(data, status, headers, config) {
            alert("加载数据失败");
        });

    后台代码：
        public String ajaxResponse(HttpServletRequest request, HttpServletResponse response, int status, Map<String, Object> data) throws IOException {
                return 'XXX';
            }

JAVA后台响应：

        后台代码：
        public void ajaxResponse(HttpServletRequest request, HttpServletResponse response, int status, Map<String, Object> data) throws IOException {
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json");
            if (data == null) {
                data = new HashMap<String, Object>();
            }
            data.put(XXX, XXX);
        response.getWriter().write(JSONObject.fromObject(data).toString());
        }