jQuery Ajax 연산 분석 (2) 데이터 전송

이전 글에서는 <a href="http://www.php.cn/wiki/1495.html" target="_blank">jquery</a> Ajax의 데이터 로딩에 대해 소개했습니다. code> 예제는 모두 <a href="http://www.php.cn/wiki/188.html" target="_blank">정적</a> 파일에서 데이터를 가져오는 반면, <code>Ajax code> 백엔드 서버와의 데이터 전송, 동적으로 데이터를 요청하고 전송하는 것이 더 큰 가치입니다. <code><a href="http://www.php.cn/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 方式请求数据:

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 方式测试下：

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 메소드를 사용하여 데이터를 요청하세요. 🎜

GET 메소드

rrreee🎜 a 태그를 클릭하면 현재 페이지는 🎜🎜🎜🎜데이터 요청 성공적인. POST 메서드를 사용하여 다시 테스트해 보겠습니다. 🎜

POST 메서드

rrreee🎜 코드는 get 메서드가 포스트 코드> 메소드.
여기서 실제로 load 메소드를 사용하여 코드를 단순화할 수 있습니다. 🎜rrreee

데이터 보내기

🎜 Ajax 기술을 사용하는 것 외에도 백엔드에서 가져오려면 데이터를 백엔드로 보낼 수도 있습니다. 일반적인 시나리오는 양식을 비동기식으로 제출하는 것입니다. 다음은 사용자 확인 예입니다. 🎜rrreee🎜🎜🎜사용자 이름이 stephenlee이고 비밀번호는 123456 이고 확인에 성공하고 그렇지 않으면 실패합니다. 테스트 페이지 validate.php는 다음과 같습니다. 🎜rrreee🎜get 메소드를 사용하세요. 확인을 위해 백엔드로 데이터 보내기: 🎜rrreee🎜입력 오류 사용자 이름이 lucas이면 결과는 다음과 같습니다. 🎜🎜🎜🎜올바른 사용자 이름 stephenlee을 입력하면 결과는 다음과 같습니다. : 🎜🎜🎜🎜post 메소드를 사용하여 데이터를 전송하세요. 아이디어는 동일하므로 자세한 내용은 다시 설명하지 않겠습니다. 🎜

위 내용은 jQuery Ajax 연산 분석 (2) 데이터 전송의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!