Jquery之Ajax(页面后台间数据交互)

主题：Jquery之Ajax(页面后台间数据交互)

内容部分

JSP页面表单数据通过Ajax,以json格式发送到后台处理，最后返回json对象，显示在页面上。

原意就打算了解一下json格式数据的传递，没打算做的多复杂，但乱码问题搞得我头都大了。

直接贴代码解释

JS文件

$(\"#register\").click(function(){

var userFormTemp = $(\"form\").serialize();

var userFormDecode = decodeURIComponent(userFormTemp,true);

var userForm = encodeURI(encodeURI(userFormDecode));

$.ajax({

type : \"post\

url : \"UserServlet\

contentType: \"application/x-www-form-urlencoded; charset=UTF-8\

data : {user : userForm},

dataType : \"json\

success : function(data){

$(\"#uname\").text(data.userName);

$(\"#addr\").text(data.address);

$(\"#pho\").text(data.phone);

$(\"#hob\").text(data.hobby);

},

error : function(textStatus,e){

alert(e.status);

}

});

});

相关行解释：

1.var userFormTemp = $(\"form\").serialize();

学习Ajax时看到这个方法觉得有意思就拿来试验一下，serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。输出的格式为：name=value&name1=value1&name2=value2...

类似于路径后面的参数列表。get方式提交也可以直接加到路径后面传送。

ajax使用与寻常无异，就是数据类型改为json:dataType : \"json\"。

Form2Json文件

因为要使用json格式传递数据，后台先将序列化表单后的字符串转换成json格式的字符串然后再装换成json对象。

public class Form2Json {

public JSONObject string2Json(String stringForForm) throws Exception{

String form2Json[] = stringForForm.split(\"&\");

String jsonForStringTemp = \"\";

for (int i=0;iint index = form2Json[i].indexOf(\"=\");

jsonForStringTemp += \"\\\"\"+form2Json[i].substring(0, index)+\"\\\"\"

+\":\"+\"\\\"\"+URLDecoder.decode(form2Json[i].substring(index+1,form2Json[i].length()),\"UTF-8\")+\"\\\"\"+\

}

String jsonForString = \"{\" + jsonForStringTemp +\

JSONObject jo = JSONObject.fromObject(jsonForString);

return jo;

}

}

主要就是做些字符串的截取。

Servlet文件

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType(\"text/html;charset=UTF-8\");

response.setCharacterEncoding(\"UTF-8\");

PrintWriter out = response.getWriter();

String s = request.getParameter(\"user\");

s = URLDecoder.decode(s,\"UTF-8\");

Form2Json f2j = new Form2Json();

JSONObject jo = null;

try{

jo = f2j.string2Json(s);

}catch(Exception ex){

ex.printStackTrace();

}

out.print(jo);

out.flush();

out.close();

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doGet(request,response);

}

jsp文件