1----
首先导入json jar包
javascript部分:
<script src="js/jquery-2.2.4.js"></script>
<script>
$(function(){
$("#button").click(function(){//点击事件
//把数据提交,实际是通过ajax的方式去提交数据到服务器
var sdata =$("#from1").serialize();//对表单的数据进行序列化
var url="reg.do?"+sdata;
alert(sdata);//可以弹出sdata看看是什么
$.ajax({
type:"GET",
url:url,
success:function(data)
{
for(var i in data)
{
$("#Shows tr:not(:first)").remove();//局部刷新前先清空table的数据 不包括第一行
alert(data[i].username); //i表示的是索引
$("#Shows").append("<tr><td>"+data[i].username+"</td><td>"+data[i].userpwd+"</td></tr>");
}
},
dataType:"json"//设置返回的数据格式为json对象
});
});
});
</script>
html部分:
<form id="from1">
<table border=0px>
<tr class="tr1">
<td class="td1"> 用户名:</td>
<td class="td2"><input class="f1" type="text" name="Name" height="30px" width="100px"></td>
</tr>
<tr class="tr1">
<td class="td1">密码:</td>
<td class="td2"><input class="f1" type="password" name="Pwd" height="30px" width="100px"></td>
</tr>
<tr class="tr1">
<td class="td1">确认密码:</td>
<td class="td2"><input class="f1" type="password" name="Spwd" height="30px" width="100px"> </td>
</tr >
<tr class="tr1">
<td class="td1"> 电子邮箱:</td>
<td class="td2"> <input class="f1" type="text" name="Email" height="30px" width="100px"> </td>
</tr>
<tr class="tr1">
<td class="td1">注册原因: </td>
<td class="td2"> <input class="f1" type="text" name="yuanyin" height="30px" width="100px"> </td>
</tr>
<tr class="tr1">
<td class="td1">居住地: </td>
<td class="td2"> <input class="f1" type="text" name="Adress" height="30px" width="100px"> </td>
</tr>
<tr class="tr1">
<td class="td1">
</td>
<td class="td2">
<input id="button" type="button" value="提交注册"/>
</td>
</tr>
</table>
</form>
<table id="Shows">
<tr>
<td>用户名:</td>
<td>密码:</td>
</tr>
</table>
Servlet部分:
@WebServlet(urlPatterns="/reg.do")
public class CreateAjaxAction extends HttpServlet
{
UserService user = new UserService();
protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException
{
String userName=req.getParameter("Name");
String userpwd =req.getParameter("Pwd");
String Email=req.getParameter("Email");
String result=req.getParameter("yuanyin");
String adress =req.getParameter("Adress");
userinfo u =new userinfo();
u.setUsername(userName);
u.setUserpwd(userpwd);
u.setEmail(Email);
u.setResults(result);
u.setAdress(adress);
try
{
userinfo us =user.CreateUser(u);
if(us!=null)
{
List<userinfo> list =user.getAllUser();
JSONArray jsonArray=JSONArray.fromObject(list);
String infostr = jsonArray.toString();
System.out.println(infostr);
PrintWriter pw = resp.getWriter();
pw.print(infostr);
}
}
catch (SQLException e)
{
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException
{
doGet(req,resp);
}
}