> 백엔드 개발 > PHP 문제 > PHP는 양식 제출을 구현하지만 점프하지 않습니다.

PHP는 양식 제출을 구현하지만 점프하지 않습니다.

PHPz
풀어 주다: 2023-03-29 11:10:56
원래의
1219명이 탐색했습니다.

웹 개발에 있어서 폼(Form)은 매우 중요한 요소입니다. 양식을 통해 사용자는 서버에 데이터를 제출할 수 있습니다. 많은 지원서에서 양식을 제출한 후 다른 페이지로 이동합니다. 이렇게 하면 제출 결과가 잘 표시될 수 있지만 때로는 이동하지 않고 양식을 제출해야 하는 경우도 있습니다. 이 기사에서는 점프하지 않고 PHP 양식 제출을 구현하는 방법을 소개합니다.

1. AJAX를 사용하여 양식 제출

AJAX는 Asynchronous JavaScript and XML의 약어로, 브라우저가 서버에 비동기적으로 요청을 보내고 응답을 받을 수 있게 해줍니다. AJAX 기술을 사용하면 페이지를 새로 고치지 않고도 양식을 제출할 수 있고 서버에서 반환한 데이터를 페이지에 동적으로 표시할 수 있습니다.

다음은 사용자 이름 및 비밀번호 입력 상자와 제출 버튼이 포함된 양식의 HTML 코드입니다.

<form id="login-form" method="post" action="">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  
  <label for="password">密码:</label>
  <input type="password" id="password" name="password">
  
  <button type="submit" id="submit-btn">提交</button>
</form>
로그인 후 복사

다음으로 JavaScript 코드를 사용하여 양식의 제출 이벤트를 캡처한 다음 AJAX 기술을 사용해야 합니다. 양식 데이터를 서버로 보냅니다. 이 예에서는 코드를 단순화하기 위해 jQuery 라이브러리를 사용하고 있습니다.

$(document).ready(function() {
  $('#login-form').submit(function(event) {
    // 阻止表单默认提交行为
    event.preventDefault();
  
    // 通过AJAX提交表单数据
    $.ajax({
      type: 'POST',
      url: 'login.php',
      data: $('#login-form').serialize(),
      success: function(data) {
        // 处理服务器返回的数据
        alert('登录成功!');
      }
    });
  });
});
로그인 후 복사

위 코드에서는 먼저 양식의 기본 제출 동작을 방지해야 합니다. 그런 다음 $.ajax() 메서드를 사용하여 양식 데이터를 서버로 보냅니다. $.ajax() 메소드는 JavaScript 객체를 요청 유형, URL, 데이터 및 콜백 함수와 같은 정보가 포함된 매개변수로 허용합니다. $.ajax() 方法来向服务器发送表单数据。 $.ajax() 方法接受一个 JavaScript 对象作为参数,该对象中包含了请求的类型、URL、数据和回调函数等信息。

二、使用隐藏iframe提交表单

除了使用AJAX技术,我们还可以使用隐藏iframe技术来提交表单,并在同一个页面中显示服务器返回的结果。

下面是一个表单的HTML代码,其中包含了一个用户名和密码输入框以及提交按钮:

<form id="login-form" method="post" action="login.php" target="login-iframe">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  
  <label for="password">密码:</label>
  <input type="password" id="password" name="password">
  
  <button type="submit" id="submit-btn">提交</button>
</form>

<iframe name="login-iframe" id="login-iframe" style="display:none;"></iframe>
로그인 후 복사

在表单中,我们设置了一个目标为 "login-iframe" 的隐藏iframe元素,并将表单的target属性设置为该iframe的名称。当用户提交表单时,表单数据将被提交到指定的URL并在该iframe中进行处理。

接下来,我们需要使用JavaScript代码来捕获表单的提交事件,并将其重定向到隐藏的iframe中。

$(document).ready(function() {
  $('#login-form').submit(function() {
    // 将表单的action属性替换掉iframe的src属性
    $('#login-iframe').attr('src', $('#login-form').attr('action'));
    return false;
  });
});

function loginSuccess() {
  // 处理服务器返回的数据
  alert('登录成功!');
}
로그인 후 복사

在上述代码中,我们将表单的 action 属性替换为隐藏的iframe的 src 属性,从而将表单数据提交到服务器。 由于表单的提交可以在iframe中进行,因此我们可以在服务器返回数据并且将其显示在该iframe中。在返回的数据中,我们可以通过JavaScript调用 loginSuccess()

2. 숨겨진 iframe을 사용하여 양식 제출

AJAX 기술을 사용하는 것 외에도 숨겨진 iframe 기술을 사용하여 양식을 제출하고 서버에서 반환한 결과를 동일한 페이지에 표시할 수도 있습니다.

다음은 사용자 이름 및 비밀번호 입력 상자와 제출 버튼이 포함된 양식의 HTML 코드입니다.

rrreee

양식에서 대상 "login-iframe"을 사용하여 숨겨진 iframe 요소를 설정하고 양식의 target 속성은 iframe의 이름으로 설정됩니다. 사용자가 양식을 제출하면 양식 데이터가 지정된 URL로 제출되고 해당 iframe 내에서 처리됩니다. 🎜🎜다음으로 JavaScript 코드를 사용하여 양식의 제출 이벤트를 캡처하고 숨겨진 iframe으로 리디렉션해야 합니다. 🎜rrreee🎜위 코드에서는 양식의 action 속성을 ​​숨겨진 iframe의 src 속성으로 대체하여 양식 데이터를 서버에 제출합니다. 양식 제출은 iframe에서 수행될 수 있으므로 서버에서 데이터를 반환하여 iframe에 표시할 수 있습니다. 반환된 데이터에서 JavaScript를 통해 loginSuccess() 함수를 호출하여 서버에서 반환된 데이터를 처리할 수 있습니다. 🎜🎜요약🎜🎜위에서는 점프하지 않고 PHP 양식 제출을 구현하는 두 가지 방법을 소개합니다. 그 중 AJAX 기술로 구현하는 방법은 더 편리하고 확장하기 쉽지만 특정 JavaScript 기술이 필요합니다. 숨겨진 iframe 기술을 사용하여 양식을 제출하는 것이 더 간단하지만 특정 보안 위험이 있을 수 있으므로 주의해서 사용해야 합니다. 🎜🎜실제 개발에서는 필요에 따라 적합한 방법을 선택할 수 있습니다. 어떤 방법을 사용하든 애플리케이션의 보안을 보장하기 위해 양식 데이터를 엄격하게 검증하고 필터링하는 것이 좋습니다. 🎜

위 내용은 PHP는 양식 제출을 구현하지만 점프하지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿