Jquery局部刷新--多用于评论回复等

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);
    }
}