1、新建一个ajax.html页面

jQuery ajax方法_json


我们通过点击按钮执行ajax方法，将提交的数据显示在上图下面那个div中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <style type="text/css">
        #time,#res{
            width: 300px;
            height: 100px;
            border: 1px solid #f00;
        }
    </style>

</head>
<body>

<button id="btn">ajax方法</button>
<div id="time"></div>
<div id="res"></div>
<script type="text/javascript">
$(function () {
    var time=new Date();
    $('#time').html(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());

    $('#btn').click(function () {
        $.ajax({
            url:"post",
            data:{name:'lisi',age:'30'},
            type:"post",
            success:function (data) {
                $('#res').html(data.res);
            },
            dataType:"json"
            });
    });
});
</script>


</body>
</html>

参数解释

url:发送请求的地址
data:发送到服务器的数据。将自动转换为请求字符串格式。
type:请求方式 ("POST" 或 "GET")， 默认为 "GET"。
success:请求成功后的回调函数。参数：由服务器返回，并根据
  dataType参数进行处理后的数据；描述状态的字符串
dataType:预期服务器返回的数据类型。

2、新建一个servlet

package com.qf;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/post")
public class PostTest extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name=req.getParameter("name");
        String age = req.getParameter("age");
        System.out.println("age="+age);
        System.out.println("name="+name);
        PrintWriter writer = resp.getWriter();
        String json="{\"res\":\"success\"}";
        writer.write(json);
    }
}

这里我们将数据按照json格式返回

3、部署项目：

jQuery ajax方法_ajax_02


点击ajax方法之后：

jQuery ajax方法_js_03