当前位置:编程学习 > JS >>

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 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){   

               

           

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,