原生Ajax post提交

最新推荐文章于 2022-09-21 11:24:02 发布

原创最新推荐文章于 2022-09-21 11:24:02 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xmlhttp

AjAX 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用JavaScript的XMLHttpRequest对象创建并发送XML请求，实现前端数据与后端服务之间的交互。通过实例演示了如何获取输入框数据，并通过POST方法将数据发送到服务器端进行处理。



function CreateXmlRequest(){
	var xmlHttp=null;
	if(window.XMLHttpRequest){
		xmlHttp=new XMLHttpRequest();
	}else if(window.ActiveXObject){
		try {
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			} catch (failed) {
				xmlHttp=false;
			}
		}

	}
	return xmlHttp;
}

function CreateAdd(){
	var username=document.getElementById("username").value;
	var password=document.getElementById("password").value;
	alert("password="+password)
	var request=CreateXmlRequest();
	if(!request){
		document.getElementById("show").innerHTML="当前浏览器不支持javascript";
	}else{
		var content="username="+username+"&password="+password;
		request.open("post","addObj",false);
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		request.send(content);
		request.onreadystatechange=function(){
			if(request.readyState==4){
				document.getElementById("show").innerHTML="loading...";
				if(request.status==200){
					var result=request.responseText;
					alert(result)
					if(result=="add"){
						document.getElementById("show").innerHTML="增加成功";
					}else if(result=="notadd"){
						document.getElementById("show").innerHTML="增加失败";
					}
				}

			}
		}



		document.getElementById("show").innerHTML="";
	}
}