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;i<form2Json.length;i++){
int 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文件
<html>
<head>
<title>Json</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/testJquery.js"></script>
</head>
<body>
<form id="">
<table border="1" width="400" style="border-collapse:collapse">
<colgroup>
<col width="150">
<col width="250">
</colgroup>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="userName" id="userName">
<div id="userDiv" style="color:red">*</div>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
男<input type="radio" name="sex" id="male" value="male">
女<input type="radio" name="sex" id="female" value="female">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd" id="pwd">
<div id="pwdDiv" style="color:red">*</div>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" name="pwdA" id="pwdA">
<div id="pwdADiv" style="color:red"></div>
</td>
</tr>
<tr>
<td>地址：</td>
<td>
<input type="text" name="address" id="address">
<div id="userDiv" style="color:red"></div>
</td>
</tr>
<tr>
<td>电话：</td>
<td>
<input type="text" name="phone" id="phone">
<div id="phoneDiv" style="color:red"></div>
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
音乐<input type="checkbox" name="hobby" id="music" value="音乐">
游戏<input type="checkbox" name="hobby" id="game" value="游戏">
读书<input type="checkbox" name="hobby" id="read" value="读书">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="register" value="注册">
<input type="reset" value="清空">
</td>
</tr>
</table>
<div id="uname"></div>
<div id="addr"></div>
<div id="pho"></div>
<div id="hob"></div>
</form>
</body>
</html>
serialize()中文乱码问题解决方法：
1.serialize主动调用了encodeURIComponent()方法进行了编码；；
2.所以得先调用decodeURIComponent()方法进行解码；
3.然后还得两次调用 encodeURI()方法进行编码；
4.后台调用URLDecoder.decode()方法解码；
5.本来应该大概经过上面四步就可以解决中文乱码问题，但不知道为什么，后台获取到的字符串中文还是乱码，(⊙﹏⊙b汗)，于是我就将截取到的字符串再做一次解码，然后...就没然后了。
本来还打算试一下serializeArray() 方法，但看到API里面介绍说serializeArray()返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。所以我就缓缓再看。
追加
其实serializeArray()用法也差不多，因为它得到的是一个JSON对象，所以先得将他解析成字符串，现在较新的浏览器都提供了原生的JSON支持，JSON.stringify()，能将JSON对象解析成JSON格式的字符串。
格式为：
[
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
/*
后台转换成JSON对象时必须拼接字符串类似格式为：
{“user”:
[
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}*/
好吧，我错了。上面注释的一段没用。
因为serializeArray()返回的Array<Object> 格式，后台字符串转换成JSON对象要用JSONArray.fromObject();
附：
JS中
JSON字符串转换为JSON对象
1.eval("(" + value+ ")");
2.value.parseJSON();
3.JSON.parse(value);
JSON对象转化为JSON字符串。
1.obj.toJSONString();
2.JSON.stringify(obj);
JAVA中
。。。。。。
相关推荐
jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式，它的作用是使得页面无需重新加载即可向服务器请求数据，并将数据动态地加载到页面中。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它...
jQuery库为开发者提供了简单易用的AJAX接口，使得前端与后台的数据交互变得更加便捷。本文将详细介绍使用jQuery AJAX实现三种不同方式的前后台数据传输，以及如何处理界面内容的传值和返回值。 1. **基本的AJAX调用...
本篇文章将深入探讨jQuery如何与后台进行Ajax交互。 ### 1. jQuery中的Ajax函数 jQuery提供了一个名为`$.ajax()`的全局函数，用于发起Ajax请求。这个函数支持多种HTTP请求方法，如GET、POST、PUT、DELETE等。基本...
本文将深入探讨如何使用jQuery结合Ajax技术从后台获取数据，并动态生成下拉选择框（Dropdown List）。 首先，理解jQuery的核心概念至关重要。jQuery通过一个简洁的语法，使得JavaScript代码更易读写，例如，`$...
综上所述，通过jQuery的AJAX功能，我们可以轻松地在客户端与ASP.NET后台之间进行通信，实现动态更新页面，提高应用的响应速度和用户体验。在实际开发中，理解这些基本原理并灵活运用，可以大大提高开发效率。
2. **前后台交互**：jQuery提供了$.ajax()函数，用于与后台服务器进行异步数据交换。这包括GET和POST请求，可以用来发送数据到服务器并接收返回的数据，实现如表单提交、数据加载等功能。例如： ```javascript $....
标题 "常用jQuery AJAX与后台交互" 指的是在Web开发中使用jQuery库进行异步数据交换的技术。AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页内容的技术。jQuery是一个...
### jQuery AJAX 接收后台传值 在本案例中，主要介绍了如何利用jQuery AJAX技术实现根据JSP页面中下拉框的选择来动态控制显示不同的内容。这种交互方式常见于需要实时响应用户操作并从服务器获取数据的应用场景。 ...
在本示例中，jQuery将用于发起Ajax请求，接收并解析JSON数据，然后在页面上以表格形式展示这些数据，实现局部刷新。 **Ajax与jQuery结合使用** 1. **创建Ajax请求**：在jQuery中，可以使用`$.ajax()`函数发起一个...
在网页开发中，jQuery AJAX 是一种非常重要的技术，它允许前端和后端进行异步通信，无需刷新整个页面。无刷验证（又称实时验证或AJAX验证）是这种技术的一个典型应用，它提高了用户体验，因为在用户输入数据时，可以...
综上所述，"ajax与后台交互案例组件"是一个非常适合初学者实践的资源，它涵盖了Ajax的基础知识，包括异步通信、局部刷新、HTTP请求和与后台数据交互的全过程。通过学习和使用这个组件，开发者可以快速入门Ajax技术，...
【标题】"Ajax获取后台菜单数据"涉及到的技术主要包括Ajax、JSON和Accordion，这些技术在现代Web开发中扮演着重要角色，特别是在构建动态交互式的用户界面时。 Ajax（Asynchronous JavaScript and XML）是一种创建...
5. **Ajax回调**：当Ajax请求完成，jQuery的回调函数会被调用，接收到的服务器响应数据可以在这里处理。将响应数据插入到页面的适当位置，更新用户界面。 这个例子的核心在于展示了客户端（JavaScript/jQuery/Ajax...
在与Java后台交互时，`url`通常指向Java的Servlet或RESTful API。`type`指定请求类型，GET用于获取数据，POST用于提交数据。`data`是一个对象，包含要传递给服务器的键值对。`dataType`指定了期望服务器返回的数据...
在Asp.Net MVC框架中，jQuery和AJAX的结合使用极大地提升了用户体验，使得网页能够实现异步数据交互，无需刷新整个页面即可完成数据的增删查改操作。本实例将深入探讨如何在Asp.Net MVC项目中应用jQuery与AJAX。 一...
总结来说，"jquery+webservice前后台交互，返回值json"这个示例展示了如何利用`jQuery`的`AJAX`功能与`WebService`进行数据交换，通过JSON格式传输数据，实现了高效、灵活的前后端通信。这在现代Web应用开发中是非常...
在Ajax后台模板中，这些方法常用于动态加载和更新数据，将服务器返回的数据渲染到页面上。 ### 5. 事件监听与用户交互 为了实现动态交互，框架可能会利用jQuery的事件监听功能，如$(selector).on('click', ...
这个标题表明我们将讨论一个使用jQuery的Ajax功能与后台交互的实际示例。Ajax（Asynchronous JavaScript and XML）允许我们在不刷新整个页面的情况下，向服务器发送请求并接收响应，从而实现页面的部分更新。 描述...
本项目利用jQuery和Ajax技术，结合Web服务，构建了一个小型的后台系统，实现了无刷新效果，即用户在页面上进行操作时，数据的交互和更新无需整个页面重新加载，提升了用户的使用体验。 首先，让我们深入了解一下...
在Struts2框架中，我们可以利用jQuery的Ajax功能进行数据交互。Struts2提供了JSON结果类型，方便与前端的Ajax请求配合。首先，你需要在Action类中添加JSON支持，并返回一个Map或自定义对象。然后，前端通过$.ajax()...