Ajax的基本使用以及参数传递过程中乱码的处理

最新推荐文章于 2021-08-05 12:08:04 发布

SmartCodeKM

最新推荐文章于 2021-08-05 12:08:04 发布

阅读量887

点赞数

分类专栏： JavaScript AJax 文章标签： Ajax

本文链接：https://blog.csdn.net/SmartCodeKM/article/details/25336701

版权

JavaScript 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

AJax

1 篇文章 0 订阅

订阅专栏

网页上面随处可见ajax,说简单点就是局部刷新，浏览器不会有跳跃的感觉。有时还会对表单做验证如“检验用户名是否存在”，还有用途比较广泛的文件上传等。在此基础上传递参数也是比不可少的。传递参数可以使地址栏重写也可以使用send传递，使用地址栏重写很有可能出现乱码。下面的博客就针对这个问题做一下讲解。这里的例子就说一个比较简单的，就提供个按钮和一个div,点击按钮就在div里显示图片。

1.用来显示按钮和div的jsp

<body>
	<div id="picture"></div>
	<input type="button" value="显示图片" οnclick="showImg()" />
</body>

2.编写ajax获取另一个页面的图片，这里首先要判断浏览器使用下面的代码就OK了

var xmlHttpRequest;
	function createXMLHttpRequest() {

		//判断浏览器类型
		if (window.XMLHttpRequest) {
			xmlHttpRequest = new XMLHttpRequest(); //火狐
		} else {
			xmlHttpRequest = new ActiveXObject(Microsoft.XMLHTTP); //IE
		}
	}

接下来就是提交请求以及函数的回调了

function showImg(){
	 createXMLHttpRequest();  
     xmlHttpRequest.open("POST", "pic.jsp", true);  
     xmlHttpRequest.onreadystatechange = processResponse;  //回调函数  
     //设置消息头，因为传递的参数长度可能较大，并设置编码格式为UTF-8  
     xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");  
     //使用send传参  
     xmlHttpRequest.send("filename=潘玮柏&type=image");  
}
function processResponse() {  
    if (xmlHttpRequest.readyState == 4) {  
        if (xmlHttpRequest.status == 200) {  
            var text = xmlHttpRequest.responseText; //取得返回的内容  
            document.getElementById("picture").innerHTML = text;  
        }  
    }  
}

3.含有图片的jsp页面

<%@ 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>Insert title here</title>
</head>
<body>
<%  
    String filename=request.getParameter("filename");  
    String type=request.getParameter("type");  
    System.out.println(filename+","+type);  
      
  %>  
  <img src="pwb.jpg" alt='<%=filename%>' /> 
</body>
</html>

运行效果如下：