이전 글에서는 <a href="//m.sbmmt.com/wiki/1495.html" target="_blank">jquery</a> Ajax의 데이터 로딩에 대해 소개했습니다. code> 예제는 모두 <a href="//m.sbmmt.com/wiki/188.html" target="_blank">정적</a> 파일에서 데이터를 가져오는 반면, <code>Ajax code> 백엔드 서버와의 데이터 전송, 동적으로 데이터를 요청하고 전송하는 것이 더 큰 가치입니다. <code><a href="//m.sbmmt.com/wiki/1495.html" target="_blank">jquery</a> Ajax 的数据加载中的例子都是从静态的文件中取得数据，而 Ajax 更大的价值在于与后端服务器进行数据传递，动态地请求和发送数据。
我们可以使用 GET、POST 两种方式向后端请求数据，这里以 PHP 为例，假设有测试页面 age.php，用于返回年龄信息，内容为：
if(isset($_REQUEST['name']) && $_REQUEST['name'] == 'stephen') {
echo '23';
}当前页面内容为：
<p> <a href="age.php">stephen</a> <span>age : </span> <span id="sex"></span> </p>
我们希望点击 a 标签后，在不刷新页面的前提下获取年龄信息。首先用 GET 方式请求数据:
$('a').click(function(e) {
e.preventDefault();//
var url = $(this).attr('href'),
name = $(this).text(),
requestData = {'name': name};
$.get(url, requestData, function(data) {
$('#sex').html(data);
});
});点击 a 标签后，当前页面为：
数据请求成功。我们再用 POST 方式测试下：
$('a').click(function(e) {
e.preventDefault();//
var url = $(this).attr('href'),
name = $(this).text(),
requestData = {'name': name};
$.post(url, requestData, function(data) {
$('#sex').html(data);
});
});代码几乎一样，只是由 get 方法变为了 post 方法。
这里我们其实还可以用 load 方法简化代码：
$('a').click(function(e) {
e.preventDefault();
var url = $(this).attr('href'),
name = $(this).text(),
requestData = {'name': name};
$('#sex').load(url, requestData);
});除了可以使用 Ajax 技术从后端获取数据，还可以向后端发送数据，常见的就是异步提交表单的情景，这里以用户验证为例：
<form action="validate.php"> username:<input id="username" name="username" type="text" /> password:<input id="password" name="password" type="text" /> <input value="submit" type="submit" /> </form>
假设当用户名为 stephenlee，密码为 123456 时验证通过，否则失败，测试页面 validate.php 为：
if($_REQUEST['username'] == 'stephenlee' && $_REQUEST['password'] == '123456') {
echo 'pass';
} else {
echo 'fail';
}使用 get 方式发送数据到后端验证：
$('form').submit(function(e) {
e.preventDefault();//
var url = $(this).attr('action'),
username = $('input[name="username"]').val(),
password = $('input[name="password"]').val(),
requestData = {'username': username, 'password': password};
$.get(url, requestData, function(result) {
alert(result);
});
});输入错误用户名 lucas 后，结果为：
输入正确用户名 stephenlee 后，结果为：
使用 post
GET 및 POST를 사용하여 백엔드에서 데이터를 요청할 수 있습니다. 여기서는 PHP가 있다고 가정합니다. 연령 정보를 반환하는 데 사용되는 테스트 페이지 age.php, 내용: 🎜rrreee🎜현재 페이지 내용: 🎜rrreee🎜
🎜🎜a 태그를 클릭한 후 , 페이지가 새로 고쳐지지 않습니다. 전제하에 연령 정보를 얻습니다. 먼저 GET 메소드를 사용하여 데이터를 요청하세요. 🎜a 태그를 클릭하면 현재 페이지는 🎜🎜
🎜🎜데이터 요청 성공적인. POST 메서드를 사용하여 다시 테스트해 보겠습니다. 🎜get 메서드가 포스트 코드> 메소드. load 메소드를 사용하여 코드를 단순화할 수 있습니다. 🎜rrreeeAjax 기술을 사용하는 것 외에도 백엔드에서 가져오려면 데이터를 백엔드로 보낼 수도 있습니다. 일반적인 시나리오는 양식을 비동기식으로 제출하는 것입니다. 다음은 사용자 확인 예입니다. 🎜rrreee🎜
🎜🎜사용자 이름이 stephenlee이고 비밀번호는 123456 이고 확인에 성공하고 그렇지 않으면 실패합니다. 테스트 페이지 validate.php는 다음과 같습니다. 🎜rrreee🎜get 메소드를 사용하세요. 확인을 위해 백엔드로 데이터 보내기: 🎜rrreee🎜입력 오류 사용자 이름이 lucas이면 결과는 다음과 같습니다. 🎜🎜
🎜🎜올바른 사용자 이름 stephenlee을 입력하면 결과는 다음과 같습니다. : 🎜🎜🎜🎜post 메소드를 사용하여 데이터를 전송하세요. 아이디어는 동일하므로 자세한 내용은 다시 설명하지 않겠습니다. 🎜위 내용은 jQuery Ajax 연산 분석 (2) 데이터 전송의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
