jQuery ajax教程 入门程序

我们先模拟一个场景——一个用户登录进某个网站，在不刷新整个页面的情况下，需要知道自己的余额，这就是最简单的ajax。如下图：

当点击“查询余额”按钮时，程序并不刷新整个页面，但是却去后台查询余额，并显示在输入框中。

html代码如下：

<table align="center">
    <tr>
        <td>卡号：</td><td>11010401</td>
    </tr>
    <tr>
        <td>余额：</td><td><input type="text" id="input" />（元）</td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" id="check" value="查询余额" /></td>
    </tr>
</table>

然后是js代码：

<script type="text/javascript">
    $(function(){
        $('#check').click(function(){
            $.ajax({
                type:'POST',
                url:'gotoAjax',//用的是servlet，比较土
                data:{
                    'id':'11010401'
                },
                dateType:'JSON',
                success:function(data,textStatus){
                    var retdata = eval("("+data+")");
                    $('#input').val(retdata.money);
                },
                error:function(data,textStatus){
                    alert('error');
                }
            });
        });
    });
</script>

这里后台用的是最简单的servlet，配置如下：

<servlet>
    <description></description>
    <display-name>Ajax</display-name>
    <servlet-name>Ajax</servlet-name>
    <servlet-class>Ajax</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Ajax</servlet-name>
    <url-pattern>/gotoAjax</url-pattern>
  </servlet-mapping>

接下来是后台的代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //需要注释掉下面一行
        //response.getWriter().append("Served at: ").append(request.getContextPath());

        String id = request.getParameter("id").toString();

        //可以根据id去数据库取它的余额
        //这里省略掉查数据库部分，写死为88元。
        String money = "88";

        Map<String, String> m = new HashMap<String, String>();
        m.put("money", money);

        //json技术需要一些jar包，自行百度，很简单
        JSONObject jsonObject = JSONObject.fromObject(m);
        response.getWriter().write(jsonObject.toString());
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

运行程序，点击按钮，输入框中会显示余额，如图：

这个程序省略了查询数据库的步骤。
如果再高级一点，可以加上jdbc连接数据库查询数据的代码。有兴趣的朋友可以一试~