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

Ajax请求

用法一

function check() {
	//定义变量sendData
	var sendData ={id:"123456",status:"222"};
	$.ajax({
		url:basePath + '/getUser',
		type:'post',
		dataType:'json',
		contentType:"application/json",
		async:true,//异步请求
		cache:false,
		data:JSON.stringify(sendData),//使用变量sendData
		//执行成功的回调函数
		success:function(data) {
			alert(data.info)
		},
		//执行失败或错误的回调函数
		error:function(data) {
			alert("认证失败");
		}
	});
}

用法二

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('');
}