jQuery中的ajax与Java交互

最近用到了jQuery中的ajax，但没有去连Java，后来又起了兴趣，用Hbuilder里面写了html+css+JavaScript，用myeclipse写的Java，再链上数据库（MySQL），就简单的实现了一个登录注册功能的页面。

因为我是在网上学习的，那么就得感谢那些分享经验的网友大佬们，那么别人帮助了我，那么我也分享一下我使用后的经验吧，如果有问题和不足的地方，希望大家留言提出，我会好好改善的！！！

那么废话不多少，让我们来看一下他们是怎么 链接 的吧…

1.这个只是简单的实现了把前端的字符串传到后端然后再返回到前端的代码

前端代码：

<script type="text/javascript">
			$.ajax({
				//jQuery里面的ajax只有get传参
				type:"get",
				data:{
					//传给后端的属性和属性值
					userid:"123",
				},
				//这是在myeclipse里面创建的文件在myeclipse自带的tomcat里面运行的地址
				url:"http://localhost:8080/ajax/servlet/jsonpServlet",
				//false为同步请求，true为异步请求
				async:false,
				// 返回的数据类型，设置为JSONP方式
				dataType:"jsonp",
				//传给Java端的字符键，也可以称为钥匙
				jsonp:"callback",
				//设置回调函数名，可以把这个自己建立的名字再次建立函数
				jsonpCallback:"cb",
				//当前端与后端成功连接是进行的操作，所有的从Java传过来的数据都存在result中，下面function后面括号里面的值可以随便改
				success:function(result){
					console.log(result);
				},
				//当前端与后端链接失败时实行的方法
				error: function (e) {
                	alert("error");
            	},
			});
		</script>

后端代码：

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

		//这里括号里面的callback就是前端的 jsonp属性传过来的属性值
		String callback = (String)request.getParameter("callback");
		//获取前端data里面的属性，并把该属性的属性值赋值给自定义的userid属性中
		String userid = request.getParameter("userid");
		//把前端或者自己创建的数据打包成json格式的数据（json字符串的拼接），这里的callback和userid就是上面自定义的，而不是直接使用前端的
		String retStrs = callback + "(" + userid + ")"; 
		//把拼接好的json格式字符串发送给前端
		response.getWriter().append(retStrs);
	
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

这就简单的实现了前端的html+JavaScript与后端的Java的链接了，这样的链接只能进行 字符与字符串或者数字之间的传参 ，如果遇到传 “汉字” 的问题，那么得需要再改变几句话，下面再给大家看看 前端和后端传“汉字” 问题了。

2.我们接下来再看一下解决前端把汉字传到后端乱码的情况

首先看一下前端代码：

function button1(){
				$.ajax({
					type:"get",
					data:{
						id:1,
						name:"小明"
					},
					url:"http://localhost:8080/ajax/servlet/JsonpServlet2",
					//false为同步请求，true为异步请求
					async:false,
					// 返回的数据类型，设置为JSONP方式
					dataType:"jsonp",
					contentType: "application/x-www-form-urlencoded;charset=UTF-8",
					//指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
					//Jquery生成验证参数的名称
					//服务端用于接收callback调用的function名的参数 
					jsonp:"findname",
					//设置回调函数名
					jsonpCallback:"cb",
					//成功的回调函数
					success:function(result){
						alert(result.name);
						console.log(result.name);
					}
				});
			}
			function button2(){
				$.ajax({
					type:"get",
					data:{
						id:2,
						name:"小红"
					},
					url:"http://localhost:8080/ajax/servlet/JsonpServlet2",
					//false为同步请求，true为异步请求
					async:false,
					// 返回的数据类型，设置为JSONP方式
					dataType:"jsonp",
					contentType: 'application/jsonp; charset=utf-8',
					//指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
					//Jquery生成验证参数的名称
					//服务端用于接收callback调用的function名的参数 
					jsonp:"findname",
					//设置回调函数名
					jsonpCallback:"cb",
					//成功的回调函数
					success:function(result){
						var a=result;
						alert(a);
						console.log(a);
					}
				});
			}

大家可以发现这里的data里面的属性值就变成了汉字，如果按照上面的方法，后台会这样

这个是后台Java中console.log出来的值

这个是在浏览器运行出来的数据

所以就会出现这个 传参乱码的问题，那么就得修改之前的代码了，前端不用修改，只需要修改 后端Java获取前端数据的方式 就可以了。

之前Java获取前端属性值的方法是这样的（就是上面的第一个教程）：

		String userid = request.getParameter("userid");

现在得把这句修改成这样的（就是加了一下utf-8编码格式）：

		String userid = new String(request.getParameter("userid").getBytes("iso8859-1"),"utf-8"); 

后面的getParameter(“userid”)括号里面的userid同样是前端传过来的属性名称，并把该属性的属性值赋值给自己定义的String userid 中，这样前端传过来的汉子就可以了，给大家看看！！！

这个是后台Java中console.log出来的值

这个是在浏览器运行出来的数据

把后台Java的整体的代码放到这里了：

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//设置请求编码格式
		request.setCharacterEncoding("UTF-8");
		//设置响应编码格式
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//前端传过来的请求总参数
		String findname=(String)request.getParameter("findname");
		//此处传过来的值不属于中文，所以不用进行编译
		String id = request.getParameter("id");
		//获取前端传过来的值，并编译为"utf-8"编码格式，编译为中文
		//其中的name是获取前端data里面的属性，并把属性值赋值给新的变量
		String names = new String(request.getParameter("name").getBytes("iso8859-1"),"utf-8"); 
		if(id.equals("1")){
			//把前端或者自己创建的数据打包成json格式的数据（json字符串的拼接）
			String jsonData = names;
			String retStr = findname + "(" + jsonData + ")";
			//把拼接好的json格式字符串发送给前端
			response.getWriter().append(retStr);
		}else if(id.equals("2")){
			//把前端或者自己创建的数据打包成json格式的数据（json字符串的拼接）
			String jsonData = "{\"name\":\""+names+"\"}";
			String retStr = findname + "(" + jsonData + ")"; 
			//把拼接好的json格式字符串发送给前端
			response.getWriter().append(retStr);
		}
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}

这样就解决了前端的汉字传到后端的问题了，那么，还有一个问题，就是后端的汉子如何传到前端呢？这又得涉及到一个json的字符串拼接的知识，那么就让我们看看怎么解决后端的汉子传到前端的问题吧，也不是太麻烦，只需要改动一点就可以！！！

使用object的方法，后端Java的字符串拼接，如果不拼接，前端就会出现这种情况，

Java端修改方式如下：

		//把names的属性值进行json字符串拼接，然后按照之前的方式打包发给前端
		String jsonData = "{\"name\":\""+names+"\"}";
		String retStr = findname + "(" + jsonData + ")"; 

前端的控制台中就会这样显示（因为我是把result给console.log了）：

这样就把后端的汉字传到前端来了，只需要点它里面的属性就OK了：

		success:function(result){
			//result里面的所有的值就是上面图片里面的，然后result.里面的属性就得到他的属性值了
			alert(result.name);
		}

（End）这样就把前端和后端的链接及传参或者传汉字的问题全部解决了