使用jQuery发送Ajax请求

最新推荐文章于 2026-04-23 02:52:28 发布

原创最新推荐文章于 2026-04-23 02:52:28 发布 · 1.2w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #ajax #javascript #xml #异步

Web前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用jQuery简化Ajax请求的过程，以实现网页局部刷新，避免页面整体重载。通过一个实例展示了如何创建一个Java Web工程，并使用jQuery的ajax函数发送GET和POST请求，与服务器进行数据交换。详细讲解了jQuery的ajax函数参数设置和回调函数的使用，以及如何处理返回的JSON数据。

个人博客地址：http://wenzhuang.me

　　传统网页与服务器通信往往需要通过提交整个表单来实现，这样用户不得不每次在提交表单时重刷整个页面，带来很不好的用户体验，在这个背景下Ajax应运而生。
　　AJAX 即Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。Ajax不是新的编程语言，而是一种使用现有标准的新方法。Ajax能在不重新加载整个页面的情况下，与服务器进行数据交换，实现网页局部刷新。AJAX是与服务器交换数据并更新部分网页的艺术。更多Ajax的基本概念和语法可以参考 w3cschool的Ajax教程。
　　
　　使用JavaScript发送Ajax请求需要使用XMLHttpRequest对象，但是这种方式比较繁琐，需要较大的代码量。更多关于JavaScript可以访问w3cschool的JavaScript教程。jQuery是JavaScript的一个库,极大简化了JS的编程，其中就包含了对Ajax请求的封装。更多详细的jQuery语法可以访问w3cschool的jQuery教程。
　　只要了解了基本的JS语法和Ajax的基本概念、jQuery选择器的使用，jQuery很快就能上手，使用起来非常方便。使用jQuery需要先到jQuery官网下载你所需的jQuery库,jQuery类和函数的可以查询jQuery官方API文档。
　　此处输入链接的描述
　　为此，笔者新建了一个Java web工程WebDemo，已上传至Github的
WebDemo仓库。在WebRoot目录下有一个AjaxDemo.html包含了此次前端页面的代码AjaxDemo.html。src目录下包含了响应网页的服务器端代码AjaxDemoServlet。
　　AjaxDemo.html的源代码如下。jQuery代码包含在script标签中，先引用了jQuery库的地址。在文档准备就绪后，给GET按钮和POST按钮添加点击监听事件。使用了jQuery的ajax([settings])函数去发送Ajax请求，参数是一系列用于描述请求信息的键值对。具体的函数描述请见jQuery-ajax-settings。
　　在发送get请求时设置请求的方法为GET，请求的URL为服务端的AjaxDemoServlet，数据交换格式为JSON，并且实现两个回调函数，分别在响应成功和失败时调用。如果服务请求成功，通过回调函数将取到一个JSON格式的数据。本例中该JSON对象转换为字符串后为{“name”:”wenzhuang”,”task”:”java”},可以通过回调函数使用data.name和data.task取到对应的值，并显示网页上。更多关于JSON请见w3cschool的JSON教程。
　　在发送post请求时，除了设置请求方法、请求URL，数据交换格式外，还需要设置一个JSON格式的数据作为请求实体发送到服务端。这里是取出用户填在表单中的用户名密码，发送到服务器，再通过回调函数取回服务端的验证信息，显示在网页上。网页的运行效果及截图请见README.md。

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.4.js"></script>
<script>
$(document).ready(function(){
  $("#getBtn").click(function(){
    $.ajax({
        type:"GET",
        url:"/WebDemo/servlet/AjaxDemoServlet",
        dataType:"json",
        success:function(data){
            $("#data").html(data.name + '的任务是' + data.task);
        },
        error:function(jqXHR){
             $("#data").html("发生错误:"+jqXHR.status);
        }
    });
  });

   $("#postBtn").click(function(){
      $.ajax({
        type:"POST",
        url:"/WebDemo/servlet/AjaxDemoServlet",
         data:{
           username:$("#username").val(),
           password:$("#password").val(),
        },
        dataType:"json",     
        success:function(data){
            if(data.state){
                $("#test").html(data.msg);
            }else{
                $("#test").html("验证未通过:"+ data.msg);
            }
        },
        error:function(jqXHR){
             $("#test").html("发生错误:"+jqXHR.status);
        }
    });
  });
});
</script>
</head>
<body>

<div>
<button id="getBtn">GET</button>
<div id="data"></div>
</div>
<br>
<div>
<div>
<span>用户名</span>
<input type="text" id="username">
</div>
<div>
<span>密　码</span> 
<input type="text" id="password">
</div>
<button id="postBtn">POST</button>
<div id="test"></div>
</div>

</body>
</html>