前端Ajax请求、HTTP POST请求、HTTP GET请求示例

ゝ一纸荒年。 2022-05-26 04:10 298阅读 0赞

## Ajax请求 ##

### 用法一 ###

### 用法二 ###

> Handler中用【@RequestParam Map<String, String> map】接收前段数据

layer.open({ 
         type: 1
         ,offset: "auto" //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
         ,id: 'LAY_demo' //防止重复弹出
         ,content: '<div style="padding: 20px 100px;">确认删除?</div>'
         ,btn: [ '确认', '取消']
         ,btnAlign: 'c' //按钮居中
         ,shade: 0.3 //不显示遮罩
         ,yes: function(){ 
         	//定义变量sendData
             var sendData ={ id:grid.id,user:grid.createUser};
         	$.ajax({ 
         		data: sendData,
         		url:"account/delAccount",
         		dataType: "json",
         		type: 'POST',
         		success:function(json) { 
         			layer.msg(json.msg);
         			$('#table').bootstrapTable('refresh', { url:'account/query'});
         		}
         	}); 
         	layer.closeAll();
         }
      ,btn2: function(index, layero){ 
         layer.closeAll();
    }
       });

### 用法三 ###

$.ajax({ 
        url: url,
        data: $('#dirForm').serialize(),
        dataType: "html",
        type: "post",
        success: function(result) { 
            $('#jumpbox').html(result);
            $('#jumpbox').modal('show');
        }
    });

### 用法四 ###

$(function($) { 
        $(".reset").click(function() { 
            $("#search_form :text").val("");
            $("#search_form :radio:eq(0)").prop("checked", "checked");
            $("#search_form select option:eq(0)").prop("selected", "selected");
        });
    
        $(".delete").click(function() { 
            var userId = $(this).data("userid");
            $('#sure_msg_body').html('确定要删除吗？此操作不可逆，请谨慎选择！');
            $('#sure_msgbox').modal('show');
            $("#sure_btn").unbind("click");
            $("#sure_btn").click(function() { 
                $.ajax({ 
                    url: "delete",
                    data: { 
                        userId: userId
                    },
                    dataType: "json",
                    type: "post",
                    success: function(data) { 
                        if (data.status == "1") { 
                            $('#msg_body').html('删除成功');
                            $('#msgbox').modal('show');
                            $("#msg_btn").click(function() { 
                                window.location.href = "${stcds}/userManager/query";
                            });
                        } else { 
                            if (typeof data.info == "object") { 
                                $('#msg_body').html(data.info[0].defaultMessage);
                                $('#msgbox').modal('show');
                            } else { 
                                $('#msg_body').html(data.info);
                                $('#msgbox').modal('show');
                            }
                        }
                    }
                });
            });
    
        });
    
    });

### 用法五 ###

$.ajax({ 
        url:"send/sendByIds",
        type:"POST",
        data:{ 
            ids: JSON.stringify(list)
        },
        dataType:"json",
        // 发送请求前调用的函数
        beforeSend:function(){ 
            isPost = true;
        },
        // 请求完成后回调函数 (请求成功或失败之后均调用)
        complete: function(XMLHttpRequest, textStatus){ 
            isPost = false;
        },
        success:function(data){ 
            layer.closeAll();
            layer.alert(data.msg);
            $('#table').bootstrapTable('refresh', { url:'send/querySendData'});
        },
        //调用出错执行的函数
        error: function(){ 
            layer.closeAll();
            //请求出错处理
            layer.alert("发放失败");
        }
    });

## POST请求 ##

### 用法一 ###

$.post("${stcds}/dir/" + dirId + "/delete.msg", function(result) { 
    	$('#jumpbox').html(result);
    	$('#jumpbox').modal('show');
    });

### 用法二 ###

$("input").keyup(function(){ 
      txt=$("input").val();
      $.post("demo_ajax_gethint.asp",{ suggest:txt},function(result){ 
        $("span").html(result);
      });
    });

## JS常用操作 ##

function clearValue(formId){ 
    	$("#" +formId+ " input:text").val('');
    	$("#" +formId+ " input:radio").attr('checked', false);
    	$("#" +formId+ " input:checkbox").attr('checked', false);
    	$("#" +formId+ " select").val('');
    	$("#dirCode").val('');
    }