AJAX简单实例

最新推荐文章于 2021-08-06 14:45:59 发布

爻爻燯

最新推荐文章于 2021-08-06 14:45:59 发布

阅读量503

点赞数

分类专栏： JAVA WEB javascript 文章标签： ajax xmlhttprequest function stylesheet input firefox

本文链接：https://blog.youkuaiyun.com/sabuhaha/article/details/6641768

版权

JAVA WEB 同时被 2 个专栏收录

22 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页面</title>
</head>
<!--  <script type="text/javascript" src="/js/lib/test.js"></script> -->
<!--  <link rel="StyleSheet" href="/css/menu.css" type="text/css" /> -->
<script type="text/javascript">
	var xmlhttp;
	function loadXMLDoc(url, cfunc) {
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = cfunc;
		xmlhttp.open("post", url, true);
		xmlhttp.send();
	}
	function myFunction() {
		loadXMLDoc("/j/LoginAction?username=1213&password=1213", function(){
			if (xmlhttp.readyState == 3) { // 系统请求过程中
				document.getElementById("tips").innerHTML = "系统请求中.....";
			}
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
				document.getElementById("tips").innerHTML = "";
			}
		});
	}
</script>
<body>

	<form action="/j/LoginAction">
		username:<input type="text" name="username"><br>
		password:<input type="password" name="password"><br> <input
			type="submit" value="submit">
	</form>
	<div id="myDiv">
		<h3>Let AJAX change this text</h3>
	</div>
	<div id="tips">
		<h3></h3>
	</div>
	<button type="button" οnclick="myFunction()">Change Content</button>
</body>
</html>

jQuery.ajax({
    type : "post",
    url : "/j/LoginAction?username=aaaaaa&password=dddd",
    dataType : "text",
    success : function(result) {
                  var rs = eval("(" + result + ")");
                  $("#tips").html(rs.result.username + rs.result.password);
              },
    error : function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数    
    alert(status);
    }
});