使用jQuery和PHP构建一个受Ajax驱动的Web页面(1)
大多数 PHP 开发人员都是以老式的方法学习技能。他们一般先学习如何定义和构建简单的 PHP 页面,然后再了解如何将这些页面连接到简单的 MySQL 表,于是就可以由此进行自己的开发了。随着技能水平的提高,他们还逐渐学会了如何创建更为复杂的 PHP 功能,以及如何连接 MySQL 内的表并执行其他高级任务。
在这个过程中,他们有可能还会掌握一些客户端技能来将 Web 应用程序投入使用。也有可能学会有关 XHTML 或 CSS 甚至一些 JavaScript 编程的知识。随着所参与项目的种类的增多,他们甚至有机会接触到 Ajax 以便为您的 Web 应用程序赋予 Web 2.0 或 “桌面” 的感觉。不过,如果您初次使用 Ajax 的经验与我类似的话,您可能已经做了太多的工作 — 手动实现各种函数、经历创建一个受 Ajax 驱动页面的艰难过程。
对于某些人而言,Ajax 仍是个谜。它似乎是 Web 开发/交互社区中的 “酷小孩(cool kid)” 和 “坏小孩(bad boys)” 才会做的事情,而他们则没有时间和耐心或者能力去了解并使用它。这真是个遗憾,因为很多客户的确喜欢添加 Ajax 风格的功能 — 它让 Web 应用程序更容易使用。如果您是这些 PHP 开发人员中的一员,也请不要害怕:读完本文,您所掌握的知识足以让您成为一名真正的 Ajax 专业人士。
本文展示了如何使用 jQuery 来向 PHP Web 应用程序轻松添加 Ajax 功能。我们将使用 PHP 和 MySQL 构建一个简单的 Web 应用程序 — 一个包含名字和电话号码的电话本。这个应用程序具备预期的所有标准功能 — 比如可以查找名字或电话号码、具有 MySQL 表等。接下来,还将向应用程序添加 jQuery,以便能够在键入时实时查找名字和电话号码。在完成上述任务后,您也就具备了有关 jQuery 及 Ajax 的充足的基础知识。
何为 Ajax?
描述 Ajax 的最佳方法是将其与传统方式进行对比。大多数 Web 页面和应用程序都在同步模式下工作。单击一个链接或表单的提交 按钮后,请求就被发送给服务器,而此服务器之后会处理该请求并发送回一个响应。总结此模型的最好方法是 “单击、等候、查看”。这就是您所熟知的一个永不终止的漂洗-和-重复(rinse-and-repeat)的循环过程。换言之,如果页面需要经常显示被更新的信息,那么就必须放上某类自动刷新 hack,或者是让用户刷新或单击一个链接执行刷新。
Ajax 改变了这一切。Ajax 中的第一个字母 A 代表的是 异步。Ajax 允许以任何一种编程语言创建页面,然后用来自数据库或其他后端服务器过程的信息刷新该页面的不同部分。比如,假如说您有一个电子商务站点,上面显示了所销售的产品。在每个产品页面,都有几个常见项目:标题、销售说明、缩略图图片、库存数量。
假如,您想让网站的访问者能够获得库存数量的最新信息。您就可以添加一个 Ajax 函数,该函数能运行包含 MySQL 查询的一个单独的 PHP 页面,然后就可重新填充原始页面上的信息,无需用户输入,也不必考虑事件的单击-等待-查看模式的同步性。
Ajax 中的 j 代表的是 JavaScript,它是所有行为的驱动力。这既是好事也是坏事 — 好的一面是由于是客户端代码,所以它是可移植的,而且不会影响到服务器;对 PHP 开发人员而言不好的一面是它完全不同于他们所习惯使用的那个环境。这就需要像 jQuery 这样的工具和框架来大大简化您与 Ajax 交互的方式,加快代码完成的进度。
最后的两项:+ 和 x 又代表什么呢?它们代表的是 及 XML,不过,XML 部分并不确切。大量 Ajax 应用程序在没有任何 XML 代码时仍工作得很好:它们只来回传递 HTML,甚至是纯文本。更准确的说法是让 x 代表 XMLHttpRequest,因为可使用该对象在后台检索数据,而不会干扰现有页面的显示或行为。
何为 jQuery?
jQuery 是 John Resig 创建的一种轻量的 JavaScript 库,在 2006 年早期发布于 Internet。它是免费的开源软件,具有 Massachusetts Institute of Technology (MIT) 和 GNU General Public License 的双重许可。由于它简单直观,因此赢得了开发界很多人的拥护。
那么它为何如此流行呢?因为它提供了一种简单易用的库,简化了 JavaScript,因此任何人(没错,甚至一个彻彻底底的后端程序员)无需艰苦的工作就能创建非凡的效果。您可以进行 Document Object Model (DOM) 元素选择、修改和处理 CSS、使元素更加吸引人以及处理 Ajax。所有这些功能性的实现都来自于一个 JavaScript 文件,该文件可从 jQuery 站点下载(参见 参考资料)。
下载 jQuery 之后,通过包括进一个简单的 ﹤script﹥ 标记就可以将其添加到任何的 HTML 或 PHP 文件:
﹤script type="text/javascript" src="/path/to/jquery.js"﹥﹤/script﹥ 로그인 후 복사 |
假设,您有一个非常简单却很烦人的任务要完成 — 需要很多手动操作,比如在您站点上的每个表单标签末尾添加一个冒号(:)。您可以遍历并寻找每个表单标签并在每行的末尾添加一个冒号,您也可以部署如下的 jQuery 代码:
清单 1. 使用 jQuery 添加一个冒号
﹤script type="text/javascript"﹥ 로그인 후 복사 $(document).ready(function(){ $("label").append(":"); }); ﹤/script﹥ |
此函数很简单:它将一直等待,直到页面准备好并全部加载($(document).ready() 部分)完毕,这时将运行一个匿名函数,该函数寻找所有 DOM label 元素,然后向所找到的文本的末尾追加一个冒号。$() 函数的功能是允许以其本地名字访问 DOM 元素,这就让此接口成为了已经熟悉 DOM 的那些开发人员的最佳选择。
当然,用 jQuery 还能做很多其他的事情,这只是一个好的开端。借助一个简单的内置函数,jQuery 可以确保您的代码能够工作,因为它会等待页面加载。有了另一行代码,就能对代码所找到的所有 DOM label 元素进行彻底更改,所有都在客户机内进行,而无需乏味地遍历所有标记并在那里进行更改。
1

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











PHP 8.4는 상당한 양의 기능 중단 및 제거를 통해 몇 가지 새로운 기능, 보안 개선 및 성능 개선을 제공합니다. 이 가이드에서는 Ubuntu, Debian 또는 해당 파생 제품에서 PHP 8.4를 설치하거나 PHP 8.4로 업그레이드하는 방법을 설명합니다.

숙련된 PHP 개발자라면 이미 그런 일을 해왔다는 느낌을 받을 것입니다. 귀하는 상당한 수의 애플리케이션을 개발하고, 수백만 줄의 코드를 디버깅하고, 여러 스크립트를 수정하여 작업을 수행했습니다.

VS Code라고도 알려진 Visual Studio Code는 모든 주요 운영 체제에서 사용할 수 있는 무료 소스 코드 편집기 또는 통합 개발 환경(IDE)입니다. 다양한 프로그래밍 언어에 대한 대규모 확장 모음을 통해 VS Code는

JWT는 주로 신분증 인증 및 정보 교환을 위해 당사자간에 정보를 안전하게 전송하는 데 사용되는 JSON을 기반으로 한 개방형 표준입니다. 1. JWT는 헤더, 페이로드 및 서명의 세 부분으로 구성됩니다. 2. JWT의 작업 원칙에는 세 가지 단계가 포함됩니다. JWT 생성, JWT 확인 및 Parsing Payload. 3. PHP에서 인증에 JWT를 사용하면 JWT를 생성하고 확인할 수 있으며 사용자 역할 및 권한 정보가 고급 사용에 포함될 수 있습니다. 4. 일반적인 오류에는 서명 검증 실패, 토큰 만료 및 대형 페이로드가 포함됩니다. 디버깅 기술에는 디버깅 도구 및 로깅 사용이 포함됩니다. 5. 성능 최적화 및 모범 사례에는 적절한 시그니처 알고리즘 사용, 타당성 기간 설정 합리적,

이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다

문자열은 문자, 숫자 및 기호를 포함하여 일련의 문자입니다. 이 튜토리얼은 다른 방법을 사용하여 PHP의 주어진 문자열의 모음 수를 계산하는 방법을 배웁니다. 영어의 모음은 A, E, I, O, U이며 대문자 또는 소문자 일 수 있습니다. 모음이란 무엇입니까? 모음은 특정 발음을 나타내는 알파벳 문자입니다. 대문자와 소문자를 포함하여 영어에는 5 개의 모음이 있습니다. a, e, i, o, u 예 1 입력 : String = "Tutorialspoint" 출력 : 6 설명하다 문자열의 "Tutorialspoint"의 모음은 u, o, i, a, o, i입니다. 총 6 개의 위안이 있습니다

정적 바인딩 (정적 : :)는 PHP에서 늦은 정적 바인딩 (LSB)을 구현하여 클래스를 정의하는 대신 정적 컨텍스트에서 호출 클래스를 참조 할 수 있습니다. 1) 구문 분석 프로세스는 런타임에 수행됩니다. 2) 상속 관계에서 통화 클래스를 찾아보십시오. 3) 성능 오버 헤드를 가져올 수 있습니다.

PHP의 마법 방법은 무엇입니까? PHP의 마법 방법은 다음과 같습니다. 1. \ _ \ _ Construct, 객체를 초기화하는 데 사용됩니다. 2. \ _ \ _ 파괴, 자원을 정리하는 데 사용됩니다. 3. \ _ \ _ 호출, 존재하지 않는 메소드 호출을 처리하십시오. 4. \ _ \ _ get, 동적 속성 액세스를 구현하십시오. 5. \ _ \ _ Set, 동적 속성 설정을 구현하십시오. 이러한 방법은 특정 상황에서 자동으로 호출되어 코드 유연성과 효율성을 향상시킵니다.
