ajax提交,不用刷新网页
先上图:
网页是没有刷新的!
需要有一下五个文件。你需会使用html,JavaScript以及它的库jquery,java。下面一个个讲。
首先你要有图上的两个.JS文件,怕麻烦不下载可以用网络上的:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
在前端网页中的代码(index.jsp):
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<title>Title</title>
<!--jquery需要引入的文件-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<!--ajax提交表单需要引入jquery.form.js-->
<script src="http://malsup.github.io/jquery.form.js"></script>
<script>
$(function () {
$("#ajaxSubmit").on("click",function () {
$("#ajaxForm").ajaxSubmit({
type : "POST",
url : "testAjax",
success:function (data) {
alert("提交成功");
data = eval( '('+data+')');
if(data.status == 200){
var show=document.getElementById("show");
show.innerHTML=data.message;
}
}
});
});
});
</script>
</head>
<body>
<form id="ajaxForm">
姓名:<input type="text" name="name"/><br>
年龄:<input type="text" name="age"><br>
性别:男 <input type="radio" value="man" name="sex" checked/> 女 <input type="radio" value="woman" name="sex"/><br/>
<br><br><br>
<input type="reset" value="重置" />
<br> <br> <br>
<input type="button" value="点我ajax提交表单" id="ajaxSubmit"/>
<div id="show"></div>
</form>
</body>
</html>
然后在后端服务器上写代码(TestAJAXContorller.java):
package test;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestAJAXContorller extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("进入了doGet方法!");
//调用都doPost方法,get和post做同样处理
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("进入了doPost方法!");
//设置请求编码
req.setCharacterEncoding("UTF-8");
//设置响应编码
resp.setCharacterEncoding("UTF-8");
//得到表单中的name
String name = req.getParameter("name");
//得到表单中的age
String age = req.getParameter("age");
//得到表单中的sex
String sex = req.getParameter("sex");
//输出打印
System.out.println("name = "+name + " age = " + age +" sex = "+sex);
String message = "name = "+name + " age = " + age +" sex = "+sex;
//返回客户端结果
String result = getResponseResult(200,message);
//将result返回客户端
resp.getWriter().print(result);
//这里可以不用关闭 resp.getWriter()流,由容器负责管理
}
//这里为了简单,没有引入处理json的包,这是模拟json数据
public static String getResponseResult(int status,String message){
return "{status: "+status+",message: '"+message+"'}";
}
}
在配置文件中映射(web.xml):
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>testAjax</servlet-name>
<servlet-class>test.TestAJAXContorller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>testAjax</servlet-name>
<url-pattern>/testAjax</url-pattern>
</servlet-mapping>
</web-app>
**
怎么样学会了吗?想要应用在自己的项目中修改一些值就可以了!
**