Jquery_Ajax

package com.iss.servlet;   
  
import org.json.JSONException;   
import org.json.JSONObject;   
  
import com.iss.pojo.User;   
import com.iss.util.JSONUtil;   
  
public class UserServlet extends HttpServlet {   
  
    public void doGet(HttpServletRequest request, HttpServletResponse response)   
            throws ServletException, IOException {   
        doPost(request, response);   
    }   
  
    public void doPost(HttpServletRequest request, HttpServletResponse response)   
            throws ServletException, IOException {   
        response.setContentType("text/html;charset=utf-8");   
           
        //list 添加对象   
        List<User> userList = new ArrayList<User>();   
        User user1 = new User("张三", "男", "18");   
        User user2 = new User("李四", "男", "19");   
        User user3 = new User("王五", "男", "20");   
        userList.add(user1);   
        userList.add(user2);   
        userList.add(user3);   
        PrintWriter out = response.getWriter();   
        String str = null;   
        try {   
            //帐号密码如果匹配则把list 返回给界面   
            if (request.getParameter("userName").equals("jquery")    
                    && request.getParameter("password").equals("ajax")) {   
                str = JSONObject.quote(JSONUtil.toJSONString(userList));   
            }   
              
            out.print(str);   
        } catch (JSONException e) {   
            // TODO Auto-generated catch block   
            e.printStackTrace();   
        }   
        System.out.println("str  "+str);   
        out.flush();   
        out.close();   
    }   
  
  
}  





//   jsp 
<body>  
    帐号 jquery 密码 ajax   
    <form id="mainform">  
        <ul>  
            <li>  
                帐号   
                <input type="text" name="userName" />  
            </li>  
            <li>  
                密码   
                <input type="password" name="password" />  
            </li>  
            <li>  
                <input onclick="login()" type="button" value="登录" />  
            </li>  
        </ul>  
    </form>  
    查询到的数据   
    <div id="diva">  
  
    </div>  
  
    <script type="text/javascript">  
          function login(){   
             
          //获取form的参数    
           var args =$("#mainform").serialize();   
              
           //调用 jquery 的json获取方法   
            //三个参数分别为 :请求路径  ,请求参数,返回数据的回调函数   
           $.getJSON("servlet/UserServlet",args,function (data){   
           if(data!=null){   
               
                
            // 界面返回的是一个json格式字符串 调用JSON.parse()把数据转化为json   
            // 格式的对象    
                 
            var jsondata =JSON.parse(data);   
            parseData(jsondata);   
           }else{   
            alert("帐号密码输入有误");   
           }   
           })   
          }   
          function parseData(data){   
           var str="";   
           //遍历json格式数据   
           for (var key in data){   
           strstr =str+" 用户"+data[key].userName+"   年龄"+data[key].age+"<br/>"   
           alert(str);   
           }   
           //把数据添加到div中   
          $("#diva").html(str);   
          }   
        </script>  
</body>  

你可能感兴趣的:(Jquery_Ajax)