JSON+Ajax+JQuery实现无刷新

最新推荐文章于 2019-03-01 17:24:07 发布

凌冰_

最新推荐文章于 2019-03-01 17:24:07 发布

阅读量472

点赞数

分类专栏： JSON

本文链接：https://blog.csdn.net/hlx20080808/article/details/52757736

版权

JSON 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

具体要求: 实现注册页面的信息 (jsp+servlet)

页面index.jsp

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/xmlhttprequest.js"></script>
<script type="text/javascript" src="js/json2.js"></script></head>

<body>
	<div id="show"></div>
	name:
	<input id="name" name="name" type="text" />
	<br /> pass:
	<input id="pwd" name="pwd" type="password" />
	<br />
	<input id="submit" type="button" value="JQuery验证" />
	<input id="submit1" type="button" value="XMLHttpRequest验证" οnclick="MyAjax()" />
</body>

(1)用Ajax+JSON来实现

xmlhttprequest.js

var xmlhttp;  //核心对象
function MyAjax() {
	// 获取数据
	var name = document.getElementById("name").value;
	var pwd = document.getElementById("pwd").value;

	// 获取XMLHttpRequest对象
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		var activxName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
		for ( var i = 0; i < activexName.length; i++) {
			try {
				xmlhttp = new ActiveXObject(activexName[i]);
				break;
			} catch (e) {
			}
		}
	}
	xmlhttp.onreadystatechange = myback; // 回调函数
	var time = new Date();// 加上时间使得每次请求不一样
	var url = "my?name=" + name + "&pwd=" + pwd + "&time=" + time;
	// alert(url);
	xmlhttp.open("GET", url, true); // 以get方式发送请求
	xmlhttp.send(null); // 参数在url中，所以此处不需要参送
}

function myback() {
	if (xmlhttp.readyState == 4) {
		if (xmlhttp.status == 200) {
			// 以文本方式接收响应信息
			var txt = xmlhttp.responseText;
			// 使用json2.js中的parse方法将data转换成json格式
			var result = JSON.parse(txt);
			//结果显示这个层上
			document.getElementById("show").innerHTML = result.name + "==>"
					+ result.pwd;
		}
	}

}

注意:这里使用了json2.js; 必须在官网去下载!

(2)用JQuery+JSON来实现

index.js

function fun() {
	// 封装成对象
	var student = {
		"name" : "",
		"pwd" : ""
	};
	// 获得对应的值
	student.name = $("#name").val();
	student.pwd = $("#pwd").val();

	// 获得当前时间
	var time = new Date();
	
	//异步
	$.ajax({
		url:"my?time="+time,
		data:"name="+student.name+"&pwd="+student.pwd,
		type:"GET", 
		dataType:"json",//请求页面返回的数据类型   
		success:function(data){  //data是由请求页面返回的数据 	
			$("#show").html(data.name+"=>"+data.pwd);
		},
		error:function(data){
			$("#show").html("error");
		}
	});

}

$(function(){
	
	//show的字体颜色
	$("#show").css({"color":"blue","font-size":"36px"});
	
	
	/// 绑定按钮事件  
	$("#submit").bind("click",fun);
	
});

servlet处理页面

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		// 处理中文
		request.setCharacterEncoding("utf-8");

		//获得表单请求的数据
		String name = request.getParameter("name");
		String pwd = request.getParameter("pwd");

		//显示数据
		System.out.println("{\"name\":\""+ name +"\",\"pwd\":\""+ pwd +"\"}");
		
		// 返回JSON数据  \"是转移"
		out.println("{\"name\":\""+ name +"\",\"pwd\":\""+ pwd +"\"}");
	
		out.flush();
		out.close();
	}

效果页面

输入值之后,单击Jquery按钮

输入值之后,单击XMLHttpRequest按钮

总结: 可以用不同的方式来实现无刷新页面!

凌冰_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JSON+Ajax+JQuery实现无刷新

具体要求: 实现注册页面的信息 (jsp+servlet) 页面index.jsp name: pass: (1)用Ajax+JSON来实现 xmlhttprequest.jsvar xmlhttp; //核心对象function MyAjax() { // 获取数据 var name = document.get
复制链接

扫一扫

专栏目录