使用jQuery发送Ajax请求

By |
0 Comment

准备工作

javascript原生的ajax操作比较麻烦，新版js中提供了更为便捷的操作方式我们后面再介绍，这里先看下jQuery操作ajax。jQuery提供了一些函数简化了这些操作，接下来我们看下如何使用jQuery发送ajax请求。先准备一个servlet用来处理ajax发送的请求。

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        PrintWriter out = response.getWriter();
        out.write("hello");

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

准备一个html，里面编写一个button，当点击该按钮的时候执行我们编写好的函数发送ajax请求

<body>
    <button id="btn">发送异步请求</button>
</body>
<script>
    $(function () {
        $("#btn").click(
            function () {
                //发送ajax请求的代码
            }
        );
    });
</script>

$.ajax()方式

通过使用$.ajax()函数，我们可以发送一个ajax请求，该函数需要传入一些参数。

//使用$.ajax()发送异步请求
$.ajax({
    url:"ajaxServlet" , //请求路径
    type:"POST" , //请求方式
    data:{"username":"jack","password":123},//请求参数
    dataType:"text",//设置接受到的响应数据的格式
    //回调函数
    success:function (data) {
        console.log(data);
    },
    error:function () {
        console.log("出错啦...")
    }//表示如果请求响应出现错误，会执行的这个回调函数

})

$.get方式

该方式会发送get请求方式的ajax请求。
语法如下，其中[]的内容是可选的：

$.get(url, [data], [callback], [type])

* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型

代码

$.get("ajaxServlet",//请求路径
        {username:"jack"},//请求参数
        function (data) {//回调函数
            console.log(data);
        },
        "text"//响应结果的类型
);

$.post方式

该方式会发送post请求方式的ajax请求
语法如下，其中[]的内容是可选的：

$.post(url, [data], [callback], [type])
    * url：请求路径
    * data：请求参数
    * callback：回调函数
    * type：响应结果的类型

代码

$.post("ajaxServlet",//请求路径
        {username:"jack"},//请求参数
        function (data) {//回调函数
            console.log(data);
        },
        "text"//响应结果的类型
);