이 글은 주로 jQuery 비동기 양식 제출 예제를 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.
머리말:
개발할 때 반드시 ajax를 사용하여 양식을 비동기식으로 제출할 것입니다. 요약은 다음과 같습니다.
전제 준비 사항: 스크립트 소개
<!--jquery需要引入的文件--> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script> <!--ajax提交表单需要引入jquery.form.js--> <script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>
프런트 엔드 페이지:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>Title <!--jquery需要引入的文件--> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script> <!--ajax提交表单需要引入jquery.form.js--> <script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script> <script> $(function () { //给id为ajaxSubmit的按钮提交表单 $("#ajaxSubmit").on("click",function () { //alert(1); $("#ajaxForm").ajaxSubmit({ beforeSubmit:function () { // alert("我在提交表单之前被调用!"); }, success:function (data) { //alert("我在提交表单成功之后被调用"); if (typeof(data) == "string"){ data = eval( '('+data+')'); //alert(data); object handle(data); }else{ handle(data); } } }); }); }); //处理返回数据 function handle(data){ if(data.status == 200){ alert(data.message); //处理逻辑 }else{ alert(data.message); //处理逻辑 } } </script>
백엔드 서블릿 코드:
package cn.cupcat.controller; 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 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>upload_demo</display-name> <!-- 测试ajax servlet开始 --> <servlet> <servlet-name>testAjax</servlet-name> <servlet-class>cn.cupcat.controller.TestAJAXContorller</servlet-class> </servlet> <servlet-mapping> <servlet-name>testAjax</servlet-name> <url-pattern>/testAjax</url-pattern> </servlet-mapping> <!-- 测试ajax servlet结束 --> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> </web-app>
참고:
ajaxSubmit({})은 다음과 같이 양식의 메서드, 작업 및 양식 항목을 설정할 수도 있습니다.
type: 'post', // 提交方式 get/post url: 'your url', // 需要提交的 url data: { 'title': title, 'content': content }, success: function(data) { // data 保存提交后返回的数据,一般为 json 数据 // 此处可对 data 作相关处理 alert('提交成功!'); }
관련 권장 사항:
jquery의 ajax를 사용하는 방법 비동기식 제출 양식 데이터
jquery 다음 비동기식 제출 양식 비동기식 교차 도메인 제출 form_jquery
Jquery.Form 비동기식 제출 양식의 간단한 예_jquery
위 내용은 jQuery 비동기 양식 제출 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!