PHP+ajax로 구현한 시/도 연계 기능

墨辰丷
풀어 주다: 2023-03-26 16:18:01
원래의
2266명이 탐색했습니다.

이 글에서는 주로 PHP+원래 ajax로 구현한 도 및 시 연계 기능을 소개하며, Ajax 상호작용의 원리와 구현 방법, 그리고 PHP를 결합하여 도 및 시를 구현하는 관련 조작 기술을 자세히 분석합니다. 링크드롭다운 메뉴 기능이 필요한 친구는 참고하시면 됩니다.

Ajax의 핵심은 JavaScript 객체인 XmlHttpRequest입니다. 이 개체는 Internet Explorer 5에서 처음 도입되었으며 비동기 요청을 지원하는 기술입니다. 간단히 말해서 XmlHttpRequest를 사용하면 JavaScript를 사용하여 서버에 요청하고 사용자를 차단하지 않고 응답을 처리할 수 있습니다.

XMLHttpRequestXMLHttpRequest 개체는 대부분의 브라우저에서 구현되었으며 사용자의 현재 작업을 중단하지 않고 클라이언트에서 서버로 데이터를 전달할 수 있는 간단한 인터페이스를 가지고 있습니다. XMLHttpRequest를 사용하여 전송되는 데이터는 이름에서 XML 형식 데이터를 암시하지만 어떤 형식이든 가능합니다.

개발자는 이미 다른 많은 XML 관련 기술에 익숙해야 합니다. XPath는 XML 문서의 데이터에 액세스할 수 있지만 XML DOM을 이해하는 것이 필요합니다. 마찬가지로 XSLT는 XML 데이터에서 HTML 또는 XML을 생성하는 가장 간단하고 빠른 방법입니다. 많은 개발자가 이미 Xpath 및 XSLT에 익숙하므로 AJAX가 데이터 교환 형식으로 XML을 선택하는 것이 합리적입니다. XSLT는 클라이언트 측과 서버 측 모두에서 사용할 수 있으며 JavaScript로 작성된 많은 양의 애플리케이션 논리를 줄일 수 있습니다.

Internet Explorer의 경우:


인터넷 5.0-6.0:

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
로그인 후 복사


인터넷 7.0 이상:

xmlhttp_request = new XMLHttpRequest();
로그인 후 복사


자동 판단 코드:

var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
로그인 후 복사


실제 응용 프로그램에서는 다양한 버전의 브라우저와 호환되도록 XMLHttpRequest 클래스를 생성하는 방법은 일반적으로 다음 형식으로 작성됩니다.

호출 가능 HTTP 요청 클래스의 open() 및 send() 메소드는 다음과 같습니다.


try {
  if (window.ActiveXObject) {
    for (var i = 5; i; i--) {
      try {
        if (i == 2) {
          xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
          xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP." + i + ".0");
          xmlhttp_request.setRequestHeader("Content-Type", "text/xml");
          xmlhttp_request.setRequestHeader("Charset", "gb2312");
        }
        break;
      } catch(e) {
        xmlhttp_request = false;
      }
    }
  } else if (window.XMLHttpRequest) {
    xmlhttp_request = new XMLHttpRequest();
    if (xmlhttp_request.overrideMimeType) {
      xmlhttp_request.overrideMimeType('text/xml');
    }
  }
} catch(e) {
  xmlhttp_request = false;
}
로그인 후 복사


의 첫 번째 매개변수 는 HTTP 요청 메소드(GET, POST 또는 기타 서버)입니다. 원하는 통화 방법을 지원합니다. HTTP 사양에 따라 이 매개변수는 대문자로 시작해야 합니다. 그렇지 않으면 일부 브라우저(예: Firefox)가 요청을 처리하지 못할 수 있습니다. 두 번째 매개변수

는 요청한 페이지의 URL입니다.

세 번째 매개변수
는 요청이 비동기 모드인지 여부를 설정합니다. TRUE인 경우 JavaScript 함수는 서버의 응답을 기다리지 않고 계속 실행됩니다. 이것은 "AJAX"의 "A"입니다.


서버 응답

open()이 응답을 처리하는 데 사용할 JavaScript 함수를 HTTP 요청 개체에 알려야 합니다. 다음과 같이 객체의 onreadystatechange 속성을 사용할 JavaScript 함수 이름으로 설정할 수 있습니다.

xmlhttp_request.open('GET',URL,true);
xmlhttp_request.send(null);
로그인 후 복사

FunctionName은 JavaScript로 생성된 함수 이름입니다. ) 물론 onreadystatechange 후에 JavaScript 코드를 직접 생성할 수도 있습니다. 예:

xmlhttp_request.onreadystatechange =FunctionName;
로그인 후 복사

먼저 요청 상태를 확인하세요. 완전한 서버 응답이 수신된 경우에만 함수가 응답을 처리할 수 있습니다. XMLHttpRequest는 서버 응답을 판단하기 위해 ReadyState 속성을 제공합니다.


readyState


의 값은 다음과 같습니다:

0(초기화되지 않음)

1(로딩 중)

2(로딩 완료)
3(상호작용 중)

4(완료)


따라서 ReadyState인 경우에만 =4 완전한 서버 응답이 수신되면 함수는 응답을 처리할 수 있습니다. 구체적인 코드는 다음과 같습니다.

xmlhttp_request.onreadystatechange = function(){
// JavaScript代码段
};
로그인 후 복사
readyState=4일 때 완전한 서버 응답을 수신한 후 함수는 HTTP 서버 응답의 상태 값을 확인합니다. 전체 상태 값은 W3C 문서에서 찾을 수 있습니다. HTTP 서버 응답 값이 200이면 상태가 정상임을 나타냅니다.



서버에서 얻은 데이터 처리

이러한 데이터를 가져오는 방법에는 두 가지가 있습니다.

(1) 서버의 응답을 텍스트 문자열로 반환
(2) 응답을 XMLDocument 개체로 반환

애플리케이션 아키텍처 응용 프로그램 프레임워크

(작은 예 1)---------demo5.php--값 전달 방법 가져오기

if (http_request.readyState == 4) {
// 收到完整的服务器响应
}else {
// 没有收到完整的服务器响应
}
로그인 후 복사

demo51_do.php


<?php
header("content-type:text/html;charset=utf-8");
?>
<html>
 <head>
  <title>事件</title>
 </head>
 <body>
 <form action="#" method="post">
  用户名<input type="text" value="" name="uname" id="uname"/> <span id="msg" style="color:red;"></span><br />
  密码<input type="password" value="" name="upwd" id="upwd"/> <br />
  <input type="submit" value="注册"/> <br />
 </form>
<script type="text/javascript">
 function $(id){
  return document.getElementById(id);
 }
 //全局对象
 var http = null;
 var uname = $("uname");
 uname.onblur = function(){
//1:创建对象 xmlhttprequest 对象
 if(window.XMLHttpRequest){
 // FF GOOLE IE 8 9 10
  http = new XMLHttpRequest();
 }else{
 //IE 6 7
  http = new ActiveXObject("Micrsoft.XMLHTTP");
 }
//2:准备url地址与参数 ?? bug
 var url = "demo51_do.php?uname="+$("uname").value;
//3:定义处理返回结果方法
 http.onreadystatechange = result;
//4:发送请求
 http.open(&#39;GET&#39;,url,true);//异步
 http.send(null);
 };
 //5:接收服务器返回结果
 function result(){
//6:判断状态 接收完成 0 初始 1 发送 2处理 3 发送结果
//4:发送结果结束
//404 not found
//200 ok 正确响就能
//7:判断状态 数据正确
 if(http.readyState == 4 && http.status == 200){
 //8:接收返回结果 {text/xml}
 var rs = http.responseText;
 //9:显示结果
 var ms = "";
 if(rs == 1){
  ms = "己存在";
 }else{
  ms = "可以使用";
 }
 $("msg").innerHTML = ms;
 }
}
</script>
 </body>
</html>
로그인 후 복사

( 작은 예 2)

게시물 값 전송 방법 deco6.php


<?php
header("content-type:text/html;charset=utf-8");
$uname = $_GET[&#39;uname&#39;];
$link = mysql_connect("127.0.0.1","root","");
mysql_query("set names utf8");
mysql_select_db("test");
$sql = "select count(*) from t_user where name = &#39;{$uname}&#39;";
$rs = mysql_query($sql);
if($row = mysql_fetch_array($rs)){
  if($row[0] == 1){
   echo "1";//己存在
  }else{
   echo "0";//不存在可以使用
  }
}
mysql_free_result($rs);
mysql_close($link);
?>
로그인 후 복사

demo6_do.php


<?php
header("content-type:text/html;charset=utf-8");
?>
<html>
 <head>
  <title>事件</title>
 </head>
 <body>
 <form action="#" method="post">
  用户名<input type="text" value="" name="uname" id="uname"/> <span id="msg" style="color:red;"></span><br />
  密码<input type="password" value="" name="upwd" id="upwd"/> <br />
  <input type="submit" value="注册"/> <br />
 </form>
<script type="text/javascript">
 function $(id){
  return document.getElementById(id);
 }
var http = null;
var uname = $("uname");
uname.onblur = function(){
//1:创建对象 xmlhttprequest 对象
 if(window.XMLHttpRequest){
  http = new XMLHttpRequest();
 }else{
  http = new ActiveXObject("Microsoft.XMLHTTP");
 }
//2:准备url地址与参数
 var url = "demo6_do.php";
//3:定义处理返回结果方法
 http.onreadystatechange = result;
//4:发送请求
 http.open(&#39;POST&#39;,url,true);
 http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 http.send("uname="+$("uname").value);
};
//5:接收服务器返回结果
function result(){
//6:判断状态 接收完成
//7:判断状态 数据正确
if(http.readyState == 4 && http.status == 200){
 //8:接收返回结果 {text/xml}
 var rs = http.responseText;
 var ms = "";
 if(rs == 1){
  ms = "己存在";
 }else{
  ms = "可以使用";
 }
 //9:显示结果
 $("msg").innerHTML = ms;
}
}
</script>
 </body>
</html>
로그인 후 복사

(작은 예 3)----xml

demo7 .php


<?php
header("content-type:text/html;charset=utf-8");
$uname = $_POST[&#39;uname&#39;];
$link = mysql_connect("127.0.0.1","root","");
mysql_query("set names utf8");
mysql_select_db("test");
$sql = "select count(*) from t_user where name = &#39;{$uname}&#39;";
$rs = mysql_query($sql);
if($row = mysql_fetch_array($rs)){
  if($row[0] == 1){
   echo "1";//己存在
  }else{
   echo "0";//不存在可以使用
  }
}
mysql_free_result($rs);
mysql_close($link);
?>
로그인 후 복사

demo7_do.php


<?php
header("content-type:text/html;charset=utf-8");
?>
<html>
 <head>
  <title>事件</title>
 </head>
 <body>
 <form action="#">
  省
  <select name="sel" id="sel">
    <option value=&#39;0&#39;>--请选择--</option>
    <option value=&#39;1&#39;>--河北--</option>
    <option value=&#39;2&#39;>--河南--</option>
    <option value=&#39;3&#39;>--广东--</option>
  </select>
  市
  <select name="city" id="city">
    <option value=&#39;0&#39;>--请选择--</option>
  </select>
 </form>
<script type="text/javascript">
 function $(id){
  return document.getElementById(id);
 }
 var http = null;
 var sel = $("sel");
 sel.onchange = function(){
//1:创建对象 xmlhttprequest 对象
 if(window.XMLHttpRequest){
 http = new XMLHttpRequest();
 }else{
 http = new ActiveXObject("Microsoft.XMLHTTP");
 }
//2:准备url地址与参数
 var url = "demo7_do.php?shen="+$("sel").value;
//3:定义处理返回结果方法
 http.onreadystatechange = result;
//4:发送请求
 http.open(&#39;GET&#39;,url,true);
 http.send(null);
 };
 //5:接收服务器返回结果
 function result(){
//6:判断状态 接收完成
//7:判断状态 数据正确
 if(http.readyState == 4 && http.status == 200){
 //8:接收返回结果 {text/xml}
 var rs = http.responseXML;
 var citys = rs.getElementsByTagName("city");
 for(var i = 0;i < citys.length;i++){
  var o = document.createElement("option");
  o.value = ""+(i+1);
  o.text = citys[i].firstChild.data;
  $("city").add(o,null);
 }
 //9:显示结果
 }
 }
</script>
 </body>
</html>
로그인 후 복사

관련 권장 사항:

Ajax PHP 새로 고침 없음 보조 연결 드롭다운 메뉴(

지방 및 도시 연결

) 소스 코드_PHP 튜토리얼

Ajax지방 및 도시 연결으로 작성, 수정 시 주소에 기존 지방 및 도시를 표시하는 방법

ajax-ecshop 모바일 버전지방 및 도시 연결bug

위 내용은 PHP+ajax로 구현한 시/도 연계 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!