ajax提交，不用刷新网页

先上图：
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>
     &nbsp;&nbsp;<input type="reset" value="重置" />
    <br> <br> <br>
    <input type="button" value="点我ajax提交表单" id="ajaxSubmit"/>&nbsp;&nbsp;
    <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>

ajax提交，不用刷新网页

怎么样学会了吗？想要应用在自己的项目中修改一些值就可以了！

相关推荐