집 >웹 프론트엔드 >JS 튜토리얼 >JS+ajax는 PHP 비동기 양식 제출을 구현합니다.

JS+ajax는 PHP 비동기 양식 제출을 구현합니다.

php中世界最好的语言원래의: 2018-04-04 14:53:392050검색

이번에는 PHP 비동기 제출 양식을 구현하기 위한 JS+ajax를 소개하겠습니다. JS+ajax를 사용하여 PHP 비동기 제출 양식을 구현하는 데 필요한 Notes는 무엇입니까? 다음은 실제 사례입니다.

양식을 비동기식으로 제출해야 하는 경우가 많습니다. 양식이 너무 많으면 하나씩 getElementById를 수행하는 것이 매우 비현실적입니다.

물론 jquery는 비동기식 양식 제출을 구현할 수 있으며 jquery.form.js 라이브러리는 상당히 유용한 것 같습니다. 인기가 많네요

그때만 해도 추가 라이브러리를 사용하고 싶지 않아서 직접 작성해보고 순수 js를 사용하여 양식의 비동기 제출을 구현해볼까

구현 방법은 다음과 같습니다(여기서 예를 들어, POST는 제출에 사용되고 php는 서버 스크립트로 사용됩니다.)

HTM L 파일: test

<html>
<head>
  <script type="text/javascript" src="name_form.js"></script>
</head>
<body>
  <form action="process.php" id="ajax_form">
    Username:<input type="text" name="username" id="username"/><br>
    <input type="button" onclick="submitForm(&#39;name_form&#39;)" value="Submit">
  </form>
  <p id="tip"></p>
</body>
</html>

JS 파일: name_form.js

function createXmlHttp() {
  var xmlHttp = null;
   
  try {
    //Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
  } catch (e) {
    //IE
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
   
  return xmlHttp;
}
 
function submitForm(formId) {
  var xmlHttp = createXmlHttp();
  if(!xmlHttp) {
    alert("您的浏览器不支持AJAX！");
    return 0;
  }
  
  var url = 'test.php';
  var postData = "";
  postData = "username=" + document.getElementById('username').value;
  postData += "t=" + Math.random();
  
  xmlHttp.open("POST", url, true);
  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      if(xmlHttp.responseText == '1') {
        alert('post successed');
      }
    }
  }
  xmlHttp.send(postData);
}

PHP 파일: test. php

<?php
  if(isset($_POST[&#39;username&#39;]) {
    echo &#39;1&#39;;
  }
?>

위 프로그램의 원리는 사용자가 먼저 test.html 파일 정보에 사용자 이름을 입력한 후, name_form.js 파일을 이용하여 ajax를 구현하여 폼을 제출한 후, 다음과 같이 동작하는 것입니다. 여기서는 사용자 이름이 설정되어 있는지, 즉 사용자 이름이 존재하는지 확인하는 것입니다. 존재하는 경우 추가로 데이터베이스를 작동할 수도 있습니다. .) 한 후 연산 결과를 판단하면 1을 출력합니다. js 파일의 xmlHttp.responseText에 반환된 정보를 판단하면 1만 출력되므로 판단이 정확하고 팝업이 나타납니다. . 프롬프트 상자의 내용은 '게시 성공'입니다. 이러한 방식으로 우리는 Ajax를 사용하여 PHP 비동기 양식 제출을 성공적으로 구현했습니다.

참고: ajax가 반환된 정보를 정확하게 얻을 수 있도록 PHP 파일 에코 전에 출력이 없는지 확인하세요.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!