폼 제출 - form 제출 및 ajax 제출

1. 사용 장면: 안전성 이 똑 같 고 모두 http 프로 토 콜 을 보 냅 니 다.안전성 은 파일 을 제출 하 는 업무 처리 (형식 검 측, 주입 방지) 와 관련 이 있 으 며 제출 방식 과 무관 합 니 다.일반적으로 로그 인 은 폼 으로 제출 하고 제출 을 클릭 하면 submit 이 벤트 를 촉발 합 니 다. 일반적으로 페이지 가 이동 하고 페이지 의 이동 등 행위 의 제 어 는 백 엔 드 에 있 으 며 백 엔 드 는 페이지 의 이동 과 데이터 의 전달 을 제어 합 니 다.그러나 어떤 때 는 페이지 가 뛰 는 것 을 원 하지 않 거나 제어 권 을 앞 에 두 고 js 를 통 해 페이지 의 점프 나 데이터 변 화 를 조작 하려 고 할 때 보통 이러한 비동기 작업 은 ajax 를 사용 합 니 다.그러나 Ajax 는 브 라 우 저가 비밀 번 호 를 저장 하지 않 아 사용자 습관 에 맞지 않 는 숨겨 진 문제 가 있 을 수 있 습 니 다.이상 적 인 방식: 숨겨 진 iframe 을 만 들 고 form 태그 의 target 을 iframe 에 가리 키 고 iframe 의 상 태 를 검사 합 니 다.2. 비교: (1) ajax 는 제출, 요청, 수신 시 모두 비동기 로 진행 되 며, 웹 페이지 는 새로 고침 할 필요 가 없 으 며, 페이지 부분 만 새로 고침 하고, 관심 이 없 으 며, 페이지 의 다른 부분의 내용 에 도 영향 을 주지 않 습 니 다.Form 제출 은 새 페이지 입 니 다. 자신의 페이지 에 제출 하 더 라 도 새로 고침 이 필요 합 니 다. 페이지 사용자 가 폼 에 대한 상태 변 화 를 유지 하기 위해 컨트롤 러 와 템 플 릿 사이 에 더 많은 파 라 메 터 를 전달 하여 페이지 상 태 를 유지 해 야 합 니 다.(2) ajax 가 제출 할 때 배경 에 새 요청 을 합 니 다.Form 은 이 페이지 를 포기 하고 요청 합 니 다.(3) ajax 는 js 로 이 루어 져 야 합 니 다. 디 버 깅 번 거 로 움, 브 라 우 저 호환성 문제 가 존재 하고 js 브 라 우 저 를 사용 하지 않 으 면 작업 을 수행 할 수 없습니다.Form 폼 은 브 라 우 저 에서 직접 가 져 온 것 으로 js 를 켜 든 말 든 폼 을 제출 할 수 있 습 니 다.(4) ajax 는 제출, 요청, 수신 시 전체 과정 에서 프로그램 을 사용 하여 데이터 처 리 를 해 야 합 니 다.Form 폼 제출 은 폼 구조 에 따라 자동 으로 이 루어 지 며 코드 관여 가 필요 없습니다.submit 으로 제출 합 니 다.3. 다른 측면: 입력 내용 에 대한 검증, ajax 는 요소 내용 을 가 져 와 프로그램 으로 판단 할 수 있 습 니 다.form 폼 의 속성 에는 검 증 된 필드, easyui, jeecg 등 이 있 습 니 다. 사용 자 는 정규 표현 식 의 검사 규칙 만 추가 하면 됩 니 다.4. 예: (1) form 으로 제출


<html>
<head>
    <title>login testtitle>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
head>
<body>
<div id="form-div">
    <form id="form1" action="/users/login" method="post">
        <p>   ：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/>p>
        <p> 　 ：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/>p>
        <p><input type="submit" value="  ">&nbsp<input type="reset" value="  ">p>
    form>
div>
body>
html>

(2) ajax 로 제출


<html>
<head>
    <title>login testtitle>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
    <script type="text/javascript">
        function login() {
            $.ajax({
                type: "POST",
                dataType: "json",//          
                contentType: "application/json",//post       
                url: "/users/login" ,
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//               (   )
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    };
                },
                error : function() {
                    alert("  ！");
                }
            });
        }
    script>
head>
<body>
<div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>   ：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/>p>
        <p> 　 ：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/>p>
        <p><input type="button" value="  " onclick="login()"> <input type="reset" value="  ">p>
    form>
div>
body>
html>

다음 내용 참고:https://segmentfault.com/q/1010000004461470 https://www.cnblogs.com/han-1034683568/p/7199168.html

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

폼 제출 - form 제출 및 ajax 제출

좋은 웹페이지 즐겨찾기