发表于： 2018-02-02 23:54:42
1 581
完成
1.写了一个简单的原生ajax（参考：https://www.w3cschool.cn/ajax/ajax-example.html）
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
<script>
//点击按钮“修改内容”会调用此函数
function loadXMLDoc() {
//定义一个xmlhttp变量
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
//创建一个新的XMLHttpRequest对象,XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
//XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
xmlhttp = new XMLHttpRequest();
}
// code for IE6, IE5
else {
//创建一个新的ActiveXObject对象
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//当请求被发送到服务器时，我们需要执行一些基于响应的任务。
//每当 readyState 改变时，就会触发 onreadystatechange 事件。
//readyState 属性存有 XMLHttpRequest 的状态信息。
//onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//responseText 获得字符串形式的响应数据
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
//如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("POST", "", true);
xmlhttp.send();
}
</script>
</head>
<body>
<%--div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数--%>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>2.delete用ajax跑通
jsp文件
<head>
<title>列表</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function add() {
window.location.href = "${pageContext.request.contextPath}/insert";
}
function del(id) {
if (confirm("确定删除id吗？")) {
$.ajax({
type: "delete",
url: "${pageContext.request.contextPath}/student/" + id,
data: "{id:id}",
dataType: "text",
success: function (msg) {
if (msg == "suc") {
alert("删除成功");
location.reload();
} else {
alert("删除失败");
}
}
})
}
}
</script>
</head>控制器（两种写法）
@RequestMapping(value = "/student/{id}", method = RequestMethod.DELETE)
//去掉@ResponseBody,删除页面没有反应，要自己刷新一遍，其实已经删除了。@ResponseBody
public String Delete(@PathVariable("id") Integer id)
boolean result = studentService.delete(id);
logger.info("delete by id:" + id);
if (result) {
return "suc";
} else {
return "error";
}
}
or
@RequestMapping(value = "/student/{id}", method = RequestMethod.DELETE)
@ResponseBody
public void Delete(@PathVariable("id") Integer id, HttpServletResponse response) {
try {
studentService.delete(id);
response.getWriter().print("suc");
} catch (IOException e) {
e.printStackTrace();
}
}结果
3.其他知识点
它是对javascript的一个轻量级的封装，相当于一个编译器，将jQuery写法的语句，转为javascript进行执行。
问题
1.出现这句话
No mapping found for HTTP request with URI [/jquery-1.9.1.min.js] in DispatcherServlet with name 'dispatcherServlet'
应该在web.xml里面插入如下标签就可以了
</servlet-mapping>
2.用ajax写增加语句时不知道布尔值怎么返回前端页面，明天再解决
收获
会写简单的ajax
计划
总结任务2
返回列表
评论