AJAX小练习
/index.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>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn01");
btn.onclick=function(){
//创建对象
var xhr=new XMLHttpRequest();
//设置参数
var method="post";
var url="${pageContext.request.contextPath}/AServlet"; xhr.open(method,url);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xhr.send("username=liuchuan");
//接受响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var div1=document.getElementById("div1");
var data=xhr.responseText;
div1.innerHTML += data;
}
}
} }
</script>
</head>
<body> <button id="btn01">电风扇</button>
<div id="div1"> </div>
</body>
</html>
/e.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>Insert title here</title>
<script type="text/javascript" src="/web-ajax/js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn01").click(function(){
function callback(data) {
alert(data);
div1.innerHTML += data; }
$.get("${pageContext.request.contextPath}/AServlet?&t"+Math.random(),{"username":"zhangsan"},callback);
$("#div1").html(data);//加个随机数防止浏览器缓存
})
});
</script>
</head>
<body>
<button id="btn01">电风扇</button>
<div id="div1"> </div>
</body>
</html>
/class AServlet
package com.neuedu.servlet; 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("/AServlet")
public class AServlet extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("username");
System.out.println("幸福来敲门"+name);
response.getWriter().println("<h1>hello word!</h1>");
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }
AJAX小练习的更多相关文章
- 第一个ajax小demo
第一个ajax小demo 文章来源:http://blog.csdn.net/magi1201/article/details/44569657
- AJAX 小实例（转摘）
最近老总提了一个小功能,在搜索网吧列表的时候加上网吧所属代理商这个条件,原有的搜索条件是一个地区二级联动,现在需要根据不同的地区显示不同的代理商集合.即在触发地区下拉框的onchange事件时,代理商 ...
- 自定义ajax小工具以及使用
function createXMLHttpRequest(){ try{ return new XMLHttpRequest(); }catch(e){ try{ return new Active ...
- AJAX小练习，防止以后忘记
<div id="content"> <input id="btnShow" type="button" value=&q ...
- 封装一个自己的 Ajax小框架
框架代码如下: // 使用封装方法的人只关心提供http的请求方法,url地址,数据,成功和失败的回调方法 // 类的构造定义,主要职责就是新建出 XMLHttpRequest 对象 var MyXM ...
- JavaScript实现拖拽预览，AJAX小文件上传
本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. <div id="drop_area" style="bord ...
- ajax 小案例
ajax 异步提交数据,实现无刷新提交表单 ajax.html <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Fetching data with Ajax小例子
ajax获取数据示例: 示例1 通过ajax获取txt文件里面的内容示例: <html> <head> <title>Ajax at work</title& ...
- 看到一个想收藏的的AJAX小列子
用户登录的验证可以使用 form 表单提交,也可以使用 ajax 技术异步提交. AJAX 即 Asynchronous Javascript And XML(异步 JavaScript 和 XML) ...
- ajax 小练习
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
随机推荐
- Hive_Hive的数据模型_视图
- 视图是一种虚表,是一个逻辑概念:可以跨越多张表- 视图建立在已有表的基础上,视图赖以建立的这些表称为基表.- 视图可以简化复杂的查询. 创建视图 create view viewName as s ...
- java课后思考问题（八）
1.请阅读并运行AboutException.java示例,然后通过后面的几页PPT了解Java中实现异常处理的基础知识. (1)import javax.swing.*; class AboutEx ...
- Lodop套打
记录一下Lodop套打模板 实现打印功能需电脑已经连接打印机(打印什么类型的东西就连接相应的打印机 (普通大打印机 打印标签 打印发票各种打印机))和已经安装好lodop控件 控件可到官网进行下载 h ...
- vue2.0：（五）、路由vue-router
好的,接下来,我们来写路由.用的是vue2.0的路由. 步骤一:配置main.js import Vue from 'vue'; import App from './App'; import rou ...
- css：focus伪类的使用
css中:focus伪类的使用,即给已获取焦点的元素设置样式 示例一 <!DOCTYPE html> <html lang="en"> <head&g ...
- [20190625]记录npm的一些常用命令
1. 安装依赖包 npm install -g packageName //全局安装npm install packageName --save //安装在项目下并写入package.json文件中n ...
- 使用ABAP代码返回S/4HANA Material上维护的Attachment明细
在事务码 MM02里为ID为16的material维护附件: 如何使用ABAP代码获得如下附件的名称和文件内容? REPORT zgos_api. DATA ls_appl_object TY ...
- C++STL概览
本文转自http://www.cnblogs.com/ggjucheng/archive/2012/01/03/2310884.html 引言 C++ STL可以分为标准容器,算法和函数对象,迭代器和 ...
- 直接用bcdedit创建bootmgr数据库和修复启动菜单
直接用bcdedit创建bootmgr数据库和修复启动菜单 使用下面方法之前需要bcdedit和bootsect两条命令,这两条命令可以到vista或者windows 7安装光盘上获得.bootsec ...
- 【转】LDA-linear discriminant analysis
分类问题也可以用降维来理解,比如一个D维的数据点x,我们可以采用下面的映射进行线性的降维, y=θTx 在计算出y后,就可以选择一个阈值h,来进行分类.正如我们在前面的PCA模型中看到的,降维会有信息 ...