Loading

jQuery ajax

概述

通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见get和post方法。$.ajax()方法可以更加详细的设置底层的参数。

语法

jQuery.ajax([settings])

其中，settings是一个js字面量形式的对象，格式是{name:value,name:value... ...}，常用的name属性名如下：

属性名称 解释
url 请求的服务器端url地址
async (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
data 发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"
dataType 预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
success 请求成功后的回调函数
error 请求失败时调用此函数

代码

  • js代码
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            function sendRequest(){
                $.ajax({
                    url:"/day14/ajaxServlet2",
                    async:true,
                    data:"name=迪丽热巴&age=21",
                    type:"GET",
                    dataType:"text",
                    success:function (data) {
                        alert(data);
                    },
                    error:function () {
                        alert("数据没有成功返回");
                    }
                });
            }
        </script>
    </head>
    <body>
        <input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
    </body>
</html>
  • Servlet代码
@WebServlet("/ajaxServlet2")
public class AjaxServlet2 extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        //获得请求参数
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        response.getWriter().write("ajax response data ..."+ name +"..."+age);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}
posted @ 2021-03-25 22:29  克豪  阅读(63)  评论(0)    收藏  举报