[Javascript][jQuery]jQuery + json 实现的简易Ajax调用-CSDN博客

本文链接：https://blog.csdn.net/szwangdf/article/details/7003350

jQuery + json 实现的简易Ajax调用

Userservlet.java代码

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

Html代码

<body>  
    帐号 jquery 密码 ajax  
    <form id="mainform">  
        <ul>  
            <li>  
                帐号  
                <input type="text" name="userName" />  
            </li>  
            <li>  
                密码  
                <input type="password" name="password" />  
            </li>  
            <li>  
                <input οnclick="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>

UserServlet 记得要导入工具类 JSONStringObject JSONUtil

jsp 要导入 jquery.js和 json.js