AJAX学习笔记——发送AJAX的POST请求，模拟from表单提交

关于AJAX发送POST请求，首先演示一个小案例。

当输入用户名：张三，密码：123。点击发送请求按钮

 

这是用post请求模拟的表单提交。接下来看一下如何用AJAX发送POST请求

后端代码：

@WebServlet("/ajaxServlet03")
public class ajaxServlet03 extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setContentType("text./html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String username = request.getParameter("username");
        String userpwd = request.getParameter("userpwd");
        out.print("用户名:"+username+",密码:"+userpwd);
    }
}

 前端代码（每一步都做了详细笔记）：

    
    
    




用户名:

密码：

发送ajax POST请求

注意：

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

这段代码会用来设置请求头的内容类型的，及用于模拟from表单。

但是这段代码必须放在开启通道后，发送请求前。（即，open前和send后）

AJAX POST请求和GET请求的代码区别在哪里？就是前端代码有区别。后端代码没有区别。

// 4. 发送AJAX POST请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 设置请求头的内容类型。模拟form表单提交数据。
// 获取表单中的数据
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// send函数中的参数就是发送的数据，这个数据在“请求体”当中发送。
xhr.send("username="+username+"&password="+password)