>  기사  >  웹 프론트엔드  >  jQuery 비동기 양식 제출 예시 공유

jQuery 비동기 양식 제출 예시 공유

小云云
小云云원래의
2018-01-10 11:27:391295검색

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.