json和ajax的简单应用

需求：

设置以下输入框

输入信息提交到Servlet，在其中获取姓名和学校，再转发到前台，并将姓名输入框内容改为200，学校输入框内容改为成功插入数据库。

使用ajax异步处理可以让浏览器在更新网页时不重新绘制网页，提高性能及用户体验。

html代码：

姓名：<input id="input_name" name="name" type="text" />
学校：<input id="input_school" name="school" type="text" />
<input id="sub_1" type="button"  value="提交" />

JS代码：

	$("#sub_1").bind("click",function(){
		
		postTest();
		
	});
	
	function postTest(){
		
		var data = {
				"name":$("#input_name").val(),
				"school":$("#input_school").val()		
		}
		
		
		
		 $.ajax({
		        type: "post",
		        url: "http://localhost:8080/qingshanboya/SerTest2",
		        data: data,
		        cache: false,
		        async : false,
		      //  dataType: "JSON",
		        success: function (data ,textStatus, jqXHR)//返回成功执行
		        { 	
		        	changeData(data);
		        	
		        },
		        error:function (XMLHttpRequest, textStatus, errorThrown)//返回失败执行
		        {
		           
		        }
		     });	
	}
	
	function changeData(dat){	
		$("#input_name").val(dat.code);
		$("#input_school").val(dat.message);
	}

Servlet中doPost()代码：

                request.setCharacterEncoding("utf-8");
		String name = request.getParameter("name");
		String school = request.getParameter("school");
		String rep = "";
			
		rep = "{\"code\":\"200\",\"message\":\"成功插入数据库\"}";
		//\"成功插入数据库\"
		
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json; charset=utf-8");
		response.getWriter().write(rep);