html 使用 ajax post请求数据类型,ajax发送post请求

最新推荐文章于 2022-10-13 23:00:46 发布

weixin_39980596

最新推荐文章于 2022-10-13 23:00:46 发布

阅读量1.2k

点赞数

文章标签： html 使用 ajax post请求数据类型

这篇博客详细介绍了如何使用Ajax的POST方法发起请求，实现网页端的局部刷新。内容包括设置请求头、发送带有参数的请求、注册回调函数以及处理服务器返回的响应，通过在index.jsp、servlet和web.xml的配置实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：在上篇中，我们使用ajax技术，以get方式发起请求，达到了网页端局部刷新的效果。这次，我们使用post方式来实现局部刷新。

在上篇的基础上，.jsp/web.xml/servlet三个部分都要改动或新写

步骤核心(就是修改index.jsp文件)：

第一步：在js中创建XMLHttpRequest对象

第二步：获取用户在id="username"的input元素中输入的信息

第三步：通过XMLHttpRequest对象发起post请求

要点

(1)ajax发起post请求，需要先设置好请求头(就得按下面那样写)

xhr.setRequestHeader(

"content-type","application/x-www-form-urlencoded");

(2)向XMLHttpRequest对象中放入请求

(3)发送请求时，xhr.send方法的参数不再是null了，需要传入我们在第二步中获取到的用户名。代码为：

xhr.send("name="+name);

注意：send方法中，写入的参数的形式必须是："参数名="+参数值

第四步：

(1)设置触发请求的事件(本例中的是onblur，光标离开事件)

(2)设置服务器返回响应的内容在浏览器的哪个位置局部刷新出来

第五步：创建回调函数，检测readyState属性的值

第六步：当readyState值为4且status值为200时，服务器返回相应完毕，从响应中获取返回的内容，显示到浏览器上指定的位置

一、index.jsp文件

<%@ page language="java" pageEncoding="utf-8"%>

<html>

<head>

</head>

......(上篇的代码部分)

//检查用户名是否可用

function checkname(){

//这次发起请求时，还要将用户输出的用户名也发给服务器

//获取请求参数

var name = document.getElementById("username").value;

//获取XMLHttpRequest对象

var xhr = new XMLHttpRequest();

//将post请求放到XMLHttpRequest对象中

xhr.open("post","/ajax01/check.do")

//ajax发起post请求，需要先设置好请求头(就得按下面那样写)

xhr.setRequestHeader(

"content-type","application/x-www-form-urlencoded");

//注册回调函数

xhr.onreadystatechange = function(){

//1、readyState状态码为4表示服务器返回响应完毕

//2、XMLHttpRequest对象的status属性：

//(1)该属性值可为：404/500/200/...

//(2)当xhr.status==200时，表示请求处理成功

//如果请求处理完毕

if(xhr.readyState == 4 && xhr.status == 200){

//获取响应的内容信息

var msg = xhr.responseText;

//将该信息追加到指定的网页位置

document.getElementById("username_msg").innerHtml = msg;

}

};

//发送请求(必须是("参数名="+参数值)的形式)

xhr.send("name="+name);

//发起请求后，显示正在检测

document.getElementById("username_msg").innerHtml = "正在检测...";

};

</script>

<body>

......(上篇的代码部分)

<hr/>

<table>

<tr>

</tr>

<tr>

<td>×××和英九在新加坡相会</td>

</tr>

<tr>

<td>经济指数有所改观</td>

</tr>

<tr>

<td>大宗商品价格下跌</td>

</tr>

</table>

<hr/>

//服务器返回的信息在这里局部刷新出来

</body>

</html>

二、创建一个servlet,用于检查浏览器端发来的用户名是否可用

package org.tarena.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class CheckServlet

extends HttpServlet{

public void service(

HttpServletRequest request,

HttpServletResponse response)

throws ServletException, IOException{

System.out.println(1);

//模拟实际请情况，延迟3s后返回结果(延迟时显示请求正在处理)

try {

Thread.sleep(3000);

} catch (InterruptedException e) {

e.printStackTrace();

}

System.out.println(2);

//设置返回的文件类型和编码集

response.setContentType("text/plain;charset=utf-8");

//获取一条输出流，用于向浏览器端显示信息

PrintWriter out = response.getWriter();

System.out.println(3);

//对于请求带过来的数据，用utf-8来解码

request.setCharacterEncoding("utf-8");

System.out.println(4);

//获取请求中name参数的值

String name = request.getParameter("name");

System.out.println(5);

//检测name值是否可用

if("scott".equals(name)){

out.println("用户名已被占用");

}else{

out.println("用户名可用");

}

System.out.println(6);

out.flush();

out.close();

}

三、在web.xml文件中为CheckServlet这个servlet设置接收的请求，我们设置该servlet接收的请求是"/check.do"(代码就不赘述了)

操作：

(1)发起请求，进入index.jsp页面

请求为：http://localhost:8080/ajax01/index.jsp

浏览器显示如图：

(2)在文本框中输入用户名，显示为：