AJAX(Asynchronous Javascript And XML)

AJAX(Asynchronous Javascript And XML),第1张

  AJAX,async javascript and XML(异步JavaScript和XML)。

  AJAX 是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术。

  在没有JQuery之前,我们一般的代码都像下面:

  在JQuery出现后,我们用的多的往往是下面的形式:

		$.ajax({
			type:get/post,
			url:请求地址,
			async:是否异步(默认是true),默认true表示异步,
			data:发送到服务器的数据,
			datatype:预期服务器返回的数据类型,
			contentType:请求头,
			success:function(data){//请求成功时
				
			},
			error:function(data){//请求失败时
				
			}
		})

  一般设置四个参数即可:type、url、data、success。

  实际上,JQuery中总封装了四种使用样式:

		$.ajax({
			type:"get",
			url:"data.txt",
			success:function(data){
				console.log(data);
				// 将字符串转换为JSON格式
				let obj=JSON.parse(data);
				console.log(obj);				
			}			
		});
		

		$.get("data.txt",function(data){
			console.log(JSON.parse(data));
		});


		$.post("data.txt",function(data){
			console.log(JSON.parse(data));
		});

		
		$.getJSON("data.json",function(data){
			console.log(data);
		});

  只是我们一般习惯了使用$.ajax这样的方式,也可以根据需要选择相应的方式。

  向后台传递参数,我们一般传递的是JSON格式的对象,也可以使用form封装方式:

let wordFile = document.getElementById('readFile');
const fd = new FormData();//FormData构造器接收的是一个form的DOM对象
fd.append("wordFile",wordFile.files[0]);//Word文件数据
fd.append("c01",$('#Dc01').val());//文件名
fd.append("c02",fileExt);//文件后缀
fd.append("c03",$('#Dc03').val());//选择分类
fd.append("c04",$('#Dc04').val());//上传人
fd.append("c05",$('#Dc05').val());//上传时间
fd.append("c07",$('#Dc07').val());//说明
fd.append("c08",$('#Dc08').val());//说明
fd.append("OP","新增");// *** 作类型
$.ajax({						
	url: 'ZTBHTDocxFile.php',
	type: "POST",
	data: fd,
	dataType: "JSON",
	async: false,
	processData: false,//设置为false,JQuery则不对数据进行序列化
	contentType: false,//设置为false,JQuery则不设Content-Type请求头
	beforeSend: function(xhr){
	},
	complete: function(xhr,status){
	},
	error: function(xhr,status,error){
		console.log("xhr:"+xhr);
		console.log("status:"+status);								
		console.log("error:"+Error);
	},
	success: function(result){
				//刷新父窗口表格
				parent.layui.$(".layui-laypage-btn")[0].click();
				// 关闭d出层
				var iframeIndex = parent.layer.getFrameIndex(window.name);
				parent.layer.close(iframeIndex);																								
	}
});			

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/944753.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-18
下一篇 2022-05-18

发表评论

登录后才能评论

评论列表(0条)

保存