ajax用法_parent.layer.load-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42117413/article/details/123176654

本文详细介绍了三种使用Ajax进行页面提交的方法：HTML形式提交、序列化表单提交以及使用ajaxSubmit插件提交。通过这些方法，可以在不刷新整个页面的情况下更新内容，实现页面的局部刷新。示例代码展示了如何处理数据、设置回调函数以及处理表单文件上传。这些技术对于提升用户体验和优化网页性能至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、html形式提交,返回直接是页面嵌入

$.post("<%=basePath %>gdzcgl/bfcgqdAdd.jsp?xtggbh="+xtggbh+"&ActionID=<%=ActionID%>"+mxbhs,function(html){
	document.getElementById("cgqd").innerHTML=html;
});

2、使用序列化form 表单的方式提交无需插件

$.ajax({

    url:"getAccountData",

    type:"post",

    dataType:"html",

    cache:false,

    data:$("#search").formSerialize(),//url传参形式 序列化表单

    success:function(data){

        $("#data").html(data);//这个返回的是一个跳转的jsp页面，直接嵌入

    }

});

3、ajaxSubmit()使用插件提交form表单需引入

实例：

（1）、快捷

function doSave(){	
		$("#form1").attr("action","uplodbfwj.jsp?ActionID=<%=ActionID%>&wjlx=<%=wjlx                         %>&ggbh=<%=ggbh%>");
		$("#form1").attr("enctype","multipart/form-data"); 

		$("#form1").ajaxSubmit({
                type:'post',
                contentType:'json',
                success:function(data){    
			var json = JSON.parse(data);                								                	
                	if(json.result=="success"){
                		$('#file').attr('value',''); 
					$('#form1')[0].reset() ;
			      		alert("上传成功,2秒后自动刷新！");
                		setTimeout('close()', 1000);	
          
	                }else{
				$('#file').attr('value',''); 
				$('#form1')[0].reset() ;
	                	alert(json.msg);
		            }
		             
                }
              
            });
	   }

（2）、全面

参数对照：

var options = {
		target: ‘#output1’, 		//把服务器返回的内容放入id为output1的元素中
		beforeSubmit: showRequest,		//提交前的回调函数
		success: showResponse,			//提交后的回调函数
		url: url,			//默认是form的action，如果声明，则会覆盖
		type: type,		//默认是form的method，如果声明，则会覆盖
		dataType: json	,	//接受服务端返回的类型
		clearForm: true,	//成功提交后，清除所有表单元素的值
		resetForm: true,	//成功提交后，重置所有表单元素的值
		timeout: 3000		//限制请求的时间，当请求大于3秒后，跳出请求
}

<form id="addform" class="form-horizontal" method="post" action="请求接口地址" enctype="multipart/form-data" target="rfFrame"> </form>
<iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>  

$("#submit").click(function(){
        var options  = {    
            url:请求接口地址,   //同action 
            type:'post',
            beforeSend:function(xhr){//请求之前
                  var index = layer.load(1, {
                      shade: [0.5,'#000'] //0.5透明度的黑色背景
                    });
              },    
            success:function(data)    
            {   
　　　　　　
            },

　　   complete:function(xhr){//请求完成
                       layer.closeAll('loading');
                      //询问框
                        layer.confirm('广告主修改成功！页面将跳转到列表页。', {
                          btn: ['确定'] //按钮
                        }, function(){
                          location.href = "adList.html";//location.href实现客户端页面的跳转 
                        });
                       
                   },
             error: function(xhr,status,msg){
                     //alert("状态码"+status+"; "+msg)
                     layer.msg('玩命加载中..');

                  }    
                };    
           $("#addform").ajaxSubmit(options);
        });