AJAX第一步:AJAX接收返回类型为text/html的字符串数据
2017-09-05 19:03
483 查看
在一个javaweb项目中,可能会用到网页的局部刷新,下面我将自己总结的使用ajax进行网页刷新的知识点记录下来。请求方式有get和post方式两种,下面我分别进行了示范。
jsp页面代码:
jsp页面代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>简易ajax 返回类型为Text/html</title> </head> <body> <input type="button" onclick="ajaxGETMethod()" value="ajax1点击"><div id="ajax1">111</div> <input type="button" onclick="ajaxPOSTMethod()" value="ajax2点击"><div id="ajax2">222</div> </body>
<!-- ajax进行局部·刷新 --> <script type="text/javascript"> function ajaxGETMethod(){ //声明对象 var xmlhttp; //创建对象 if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //请求成功的话 此方法会接收来自servlet的返回数据 xmlhttp.onreadystatechange=function() { //如果成功请求 并且成功接受响应 if(xmlhttp.readyState==4 && xmlhttp.status==200){ //id为ajax1的里面内容 设置为servlet返回的内容 document.getElementById("ajax1").innerHTML = xmlhttp.responseText; } } //设置请求method方式为get 路径 以及是否异步 get方式的Content-Type: text/plain;charset=UTF-8 xmlhttp.open("get","${pageContext.request.contextPath}/AjaxDemo_TextHTML?cmd=ajax1您好",true); //发送请求 xmlhttp.send(); } </script>
<script type="text/javascript"> function ajaxPOSTMethod(){ var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("ajax2").innerHTML = xmlhttp.responseText; } } //设置请求method方式为post 路径 以及是否异步 post方式的Content-Type: application/x-www-form-urlencoded xmlhttp.open("post","${pageContext.request.contextPath}/AjaxDemo_TextHTML",true); //设置请求头 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //发送请求 xmlhttp.send("cmd=ajax2您好"); } </script> </html>servlet页面代码:
package cn.sdut.ajaxdemo; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/AjaxDemo_TextHTML") public class AjaxDemo_TextHTML extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置返回类型text/html 和编码格式 使中文不乱码 response.setContentType("text/html;charset=utf-8"); //获得请求消息 String cmd = request.getParameter("cmd");System.out.println(cmd); //响应 response.getWriter().write(cmd); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置返回类型text/html 和编码格式 使中文不乱码 request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); //获得请求消息 String cmd = request.getParameter("cmd");System.out.println(cmd); //响应 response.getWriter().write(cmd); } }注意:浏览器会有缓存,所以每次ajax请求相同数据时,浏览器可能会给你显示的是缓存,要想不缓存 可以在请求后面加上一个时间参数,比如:
xmlhttp.open("post","${pageContext.request.contextPath}/AjaxDemo_TextHTML?date="+Date().getTime(),true);
相关文章推荐
- AJAX第二步:AJAX接收返回类型为text/XML的数据
- AJAX第三步:AJAX接收返回为JSON类型的数据
- ajax实现返回数据是html类型的跨域问题
- Ajax请求Servlet返回文本 json html和XML数据并解析xml及responseText和responseXML的区别
- ajax中解析json数据的各种方法(返回类型为json或text)
- 使用jquery、ajax不刷新页面打印表格(返回数据类型text、json);
- jquery中ajax方法返回的三种数据类型:text、json、xml;
- AFNetworking 接收text/html格式返回数据
- Ajax例子,views返回,html接收数据
- Ajax前台返回JSON数据后再Controller中直接转换成类型使用,后台接收json转成实体的方法
- ajax返回数据类型 text json xml
- ajax接收后台传来的JSON类型数据,可通过循环遍历为input赋值(input的ID需要和返回来的数据名相同)
- ajax返回数据类型是html,获取html数据中某个id的值
- 解决post请求接收数据类型为text/html时参数传递的问题
- ajax接收action的数据返回一大串的html代码的问题
- Ajax请求Servlet返回文本 json html和XML数据并解析xml及responseText和responseXML的区别
- ajax返回json时,js获取类型,是字符串类型
- ajax 接收json,xml类型数据
- struts+ajax返回json数据类型的各种情形及对应的Demo
- 将泛型集合类(List<T>)转换成DataTable,返回的DataTable所有列的数据类型为string型,且列顺序与字符串提供的字段顺序一致