jQuery ajax教程入门程序

最新推荐文章于 2023-06-26 21:51:24 发布

书生乄夺命剑

最新推荐文章于 2023-06-26 21:51:24 发布

阅读量655

点赞数 1

本文链接：https://blog.youkuaiyun.com/zhouchenxuan/article/details/70808806

版权

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的Ajax应用案例，通过Ajax技术实现在不刷新页面的情况下查询用户的余额，并展示了完整的HTML和JavaScript代码，以及后台servlet的配置和实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们先模拟一个场景——一个用户登录进某个网站，在不刷新整个页面的情况下，需要知道自己的余额，这就是最简单的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);
    }