JSON+Ajax+JQuery实现无刷新

一时失言乱红尘 2024-02-17 18:05 56阅读 0赞

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

**页面index.jsp**

(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;
    		}
    	}
    
    }

![Center][]

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

(2)用JQuery+JSON来实现

**index.js**

**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();
    	}

**效果页面**

**![Center 1][]**

**输入值之后,单击Jquery按钮**

**![Center 2][]**

**输入值之后,单击XMLHttpRequest按钮**

**![Center 3][]**

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

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/20bda0b59b6443f5881cf9ec7350a938.png
[Link 1]: https://github.com/douglascrockford/JSON-js
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ad474e8a57234bb8808a9ddf40d98a78.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5f4c35ba7aa1407c899bc17476ab39e4.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9334f75d6c054ad588698695f8fc8772.png