Article Directory
Ajax Introduction
Ajax namely "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), refers to a create interactive, web development technology fast dynamic web applications, without having to reload the entire web page technical section of the page can be updated.
ajax show examples of student information
- In order to issue a page request ajax introduced jquery.js, js new web directory listings placed
- Introduced can be converted into a jar and configured json
- Create an entity class Student.java
package com.oracle.pojo;
public class Student {
private String name;
private int age;
public Student(String name, int age) {
this.name = name;
this.age = age;
}
public Student() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
@Override
public String toString() {
return "Student{" +
"name='" + name + '\'' +
", age=" + age +
'}';
}
}
- Creating a write controller components ajaxAction.java, focus on asynchronous AJAX requests should use ResponseBody comment
package com.oracle.controller;
import com.oracle.pojo.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/admin")
public class ajaxAction {
//显示学生信息,异步AJAX请求来的，都要使用ResponseBody注解
@ResponseBody
@RequestMapping("/showstu")
public Student showstu() {
Student stu = new Student("zh", 22);
return stu;
}
}
- Ajax request to write a page, import the jQuery library, issued ajax request
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Title</title>
<!--导入jQuery函数库-->
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//发出ajax请求
function show() {
$.ajax({
url:"${pageContext.request.contextPath}/admin/showstu.action",
type:"post",
dataType:"json",
success:function (stu) {
var s=stu.name+"----------"+stu.age;
$("#showStu").html(s);
},
error:function (e) {
alert(e.message);
}
});
}
</script>
<p><a href="${pageContext.request.contextPath}/admin/showstu.action">显示学生信息（原始方法）</a></p>
<p><a href="javascript:show()">显示学生信息(单个数据)</a></p>
<div id="showStu"></div>
</body>
</html>
- Operating results
of the original request method
ajax request
