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

主题：Jquery之Ajax(页面后台间数据交互)内容部分JSP页面表单数据通过Ajax,以json格式发送到后台处理，最后返回json对象，显示在页面上。原意就打算了解一下json格式数据的传递，没打算做的多复杂，但乱码问题搞得我头都大了。直接贴代码解释JS文件$(#register).click(function(){varuserFormTemp=$(form).serialize();varuserFormDecode=decodeURIComponent(userFormTemp,true);varuserForm=encodeURI(encodeURI(userFormDecode));$.ajax({type:post,url:UserServlet,contentType:application/x-=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.varuserFormTemp=$(form).serialize();学习Ajax时看到这个方法觉得有意思就拿来试验一下，serialize()方法通过序列化表单值，创建URL编码文本字符串。输出的格式为：name=value&name1=value1&name2=value2...类似于路径后面的参数列表。get方式提交也可以直接加到路径后面传送。ajax使用与寻常无异，就是数据类型改为json:dataType:json。Form2Json文件因为要使用json格式传递数据，后台先将序列化表单后的字符串转换成json格式的字符串然后再装换成json对象。publicclassForm2Json{publicJSONObjectstring2Json(StringstringForForm)throwsException{Stringform2Json[]=stringForForm.split(&);StringjsonForStringTemp=;for(inti=0;iform2Json.length;i++){intindex=form2Json[i].indexOf(=);jsonForStringTemp+=\+form2Json[i].substring(0,index)+\+:+\+URLDecoder.decode(form2Json[i].substring(index+1,form2Json[i].length()),UTF-8)+\+,;}StringjsonForString={+jsonForStringTemp+};JSONObjectjo=JSONObject.fromObject(jsonForString);returnjo;}}主要就是做些字符串的截取。Servlet文件publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{response.setContentType(text/html;charset=UTF-8);response.setCharacterEncoding(UTF-8);PrintWriterout=response.getWriter();Strings=request.getParameter(user);s=URLDecoder.decode(s,UTF-8);Form2Jsonf2j=newForm2Json();JSONObjectjo=null;try{jo=f2j.string2Json(s);}catch(Exceptionex){ex.printStackTrace();}out.print(jo);out.flush();out.close();}publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{doGet(request,response);}jsp文件htmlheadtitleJson/titlemetahttp-equiv=pragmacontent=no-cachemetahttp-equiv=cache-controlcontent=no-cachescriptsrc==nofollow/scriptsrc==nofollow//headbodyformtableborder=1width=400style=border-collapse:collapsecolgroupcolwidth=150colwidth=250/colgrouptrtd用户名：/tdtdinputtype=textname=userNamedivstyle=color:red*/div/td/trtrtd性别：/tdtd男inputtype=radioname=sexvalue=male女inputtype=radioname=sexvalue=female/td/trtrtd密码：/tdtdinputtype=passwordname=pwddivstyle=color:red*/div/td/trtrtd确认密码：/tdtdinputtype=passwordname=pwdAdivstyle=color:red/div/td/trtrtd地址：/tdtdinputtype=textname=addressdivstyle=color:red/div/td/trtrtd电话：/tdtdinputtype=textname=phonedivstyle=color:red/div/td/trtrtd爱好：/tdtd音乐inputtype=checkboxname=hobbyvalue=音乐游戏inputtype=checkboxname=hobbyvalue=游戏读书inputtype=checkboxname=hobbyvalue=读书/td/trtrtdcolspan=2inputtype=buttonvalue=注册inputtype=resetvalue=清空/td/tr/tablediv/divdiv/divdiv/divdiv/div/form/body/htmlserialize()中文乱码问题解决方法：1.serialize主动调用了encodeURIComponent()方法进行了编码；；2.所以得先调用decodeURIComponent()方法进行解码；3.然后还得两次调用encodeURI()方法进行编码；4.后台调用URLDecoder.decode()方法解码；5.本来应该大概经过上面四步就可以解决中文乱码问题，但不知道为什么，后台获取到的字符串中文还是乱码，(⊙﹏⊙b汗)，于是我就将截取到的字符串再做一次解码，然后...就没然后了。本来还打算试一下serializeArray()方法，但看到API里面介绍说serializeArray()返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。所以我就缓缓再看。