Ajax+php가 데이터 상호 작용 및 부분 페이지 새로 고침을 수행하는 방법-JS 튜토리얼-php.cn

Ajax+php가 데이터 상호 작용 및 부분 페이지 새로 고침을 수행하는 방법

php中世界最好的语言

풀어 주다： 2018-03-31 11:49:11

원래의

1685명이 탐색했습니다.

이번에는 Ajax+php가 데이터 상호 작용과 부분 페이지 새로 고침을 수행하는 방법을 보여 드리겠습니다. Ajax+php가 데이터 상호 작용과 부분 페이지 새로 고침을 수행하는 주의 사항은 무엇입니까?

Ajax란 무엇인가요?

국내 번역은 Ajax인 경우가 많으며 Ajax 축구팀의 동음어입니다. AJAX는 새로운 언어가 아니라 기존의 새로운 방법을 사용하는 기술입니다. AJAX는 백그라운드에서 서버와 소량의 데이터를 교환함으로써 웹 페이지가 비동기적으로 업데이트되도록 허용하므로 전체 웹 페이지를 다시 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있습니다.

XMLHttpRequest는 AJAX의 기반이며 서버와 데이터를 교환하는 데 사용됩니다. 모든 최신 브라우저는 XMLHttpRequest 개체를 지원합니다(IE5 및 IE6은 ActiveXObject 사용)

다음 기사에서는 주로 Ajax를 사용하여 PHP 데이터와 상호 작용하고 페이지의 관련 콘텐츠를 부분적으로 새로 고치는 방법을 소개합니다. 자세한 소개를 살펴보세요:

1. 구문 소개

1.1 기본 Ajax 구문

$.ajax({
 type: "post",        //数据提交方式（post/get）
 url: "http://xxx/test/demo.php",   //提交到的url
 data: {username:username,password:password},//提交的数据
 dataType: "json",       //返回的数据类型格式
 success: function(msg){
  ...//返回成功的回调函数
 },
 error:function(msg){
  ...//返回失败的回调函数
 }
});

로그인 후 복사

1.2 PHP 측 수신 방법

<!--?php
 $username=$_POST[&#39;username&#39;]; //接收以post方式提交来的username数据
 $password=$_POST[&#39;password&#39;];
?>

로그인 후 복사

2. 예제에 대한 자세한 설명

2.1 html 종료 코드 데모.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ajaxTest</title>
</head>
<body>
 <input type="text" id="username">
 <input type="text" id="password">
 <button id="sub">查询</button>
 <span id="text"></span><!-- 用以显示返回来的数据，只刷新这部分地方 -->
</body>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</html>

로그인 후 복사

2.2 다음 js 코드를 데모.html

<script>
 $(function(){
 $('#sub').click(function(){
  var username=$('#username').val();
  var password=$('#password').val();
  $.ajax({
  type: "post",
  url: "http://xxx/test/demo.php",
  data: {username:username,password:password}, //提交到demo.php的数据
  dataType: "json", //回调函数接收数据的数据格式
  success: function(msg){
   $('#text').empty(); //清空Text里面的所有内容
   var data='';
   if(msg!=''){
   data = eval("("+msg+")"); //将返回的json数据进行解析，并赋给data
   }
   $('#text').html("用户名为：" + data.username + ",密码为：" + data.password); //在#text中输出
   console.log(data); //控制台输出
  },
  error:function(msg){
   console.log(msg);
  }
  });
 });
 })
</script>

로그인 후 복사

2.3 PHP 최종 코드 데모.php

<!--?php
 header(&#39;Content-type:text/json;charset=utf-8&#39;);
 $username=$_POST[&#39;username&#39;];
 $password=$_POST[&#39;password&#39;];
 $data=&#39;{username:"&#39; . $username . &#39;",password:"&#39; . $password .&#39;"}&#39;;//组合成json格式数据
 echo json_encode($data);//输出json数据
?>

로그인 후 복사

3에 추가하세요. follow