>웹 프론트엔드 >JS 튜토리얼 >ajax_Examples 사용 방법, ajax 데이터 처리

ajax_Examples 사용 방법, ajax 데이터 처리

亚连
亚连원래의
2018-05-22 14:16:301465검색

이제 ajax_examples와 ajax 데이터 처리 사용법에 대한 글을 가져오겠습니다. 이제 그것을 여러분과 공유하고 모든 사람에게 참고 자료로 제공하겠습니다.

캡슐화된 데이터베이스 호출과 jQuery 저장 주소

1. 등록

(1) 사용자 이름 확인을 위한 텍스트 상자 작성

<input type="text" id="uid" />
<span id="tishi"></span> //这个使用来显示提示信息的

(2) jQuery 문을 사용하여 작성: 사용자 이름은 사용할 수 없지만 사용자 이름은 사용할 수 있습니다.

$("#uid").blur(function(){
  //取用户名
  var uid = $(this).val();
  //查数据库,调ajax
  $.ajax({  //ajax方法中必须是json格式
  url: "zhucecl.php",  //处理页面的地址
  data:{u:uid},  //这里是Json的格式:u是起的个名字,uid才是值
  type:"POST", //数据提交方式
  dataType:"TEXT",  //返回的数据格式:字符串格式
  success:function(data){  //成功的话返回匿名函数(回调函数)
      //执行处理页面成功后的语句
      var str = "";
                 
      if(data=="OK")
      {
        str = "用户名可以使用";
        $("#tishi").css("color","green");
      }
      else
      {
        str = "已有用户名";  
        $("#tishi").css("color","red");
      }
      $("#tishi").text(str);
      }
      });     
})

(3) 등록 처리 페이지: 여러 번 썼으므로 쓰지 않겠습니다. 문장별로 설명해주세요

<?php
//调封装好的类:注意保存位置
include("DBDA.class.php");
$db = new DBDA();
 
//传的值起的名字
$uid = $_POST["u"];
$sql = "select count(*) from renyuan where username=&#39;{$uid}&#39;";
 
//调用封装的函数
$attr =$db->Query($sql);
 
//判断用户名是否存在
if($attr[0][0]>0)
{
  echo "NO"; //有重复的用户名
}
else
{
  echo "OK";  //没有重复的用户名
}
 
?>

2. 로그인

(1) 글상자 작성 및 로그인 버튼

<p>账号:<input type="text" id="uid" /></p>
<p>密码:<input type="password" id="pwd" /></p>
<input type="button" value="登录" id="btn" />

(2) 쓰기 jQuery 문  

$("#btn").click(function(){
  var uid=$("#uid").val(); //找到用户
  var pwd=$("#pwd").val(); //找到密码
 
  //调ajax方法,里面要用json格式
  $.ajax({
  url:"denglucl.php", //登陆的处理页面
  data:{uid:uid,pwd:pwd}, 
  type:"POST",
  dataType:"text",
  success: function(data)
  {
    if(data.trim()=="OK")
    {
      window.location.href="zhuce.php" rel="external nofollow" ; //用户名密码正确,进入一个页面
    }
    else
    {
      alert("用户名密码输入错误");
    }
  }
  })
       
})

(3) 로그인 처리 페이지 : 여러번 썼기 때문에 한 문장씩 설명하지 않겠습니다

<?php
include("DBDA.class.php");
$db = new DBDA();
 
$uid = $_POST["uid"];
$pwd = $_POST["pwd"];
 
$sql = "select mima from huiyuan where yonghu=&#39;{$uid}&#39;";
$attr = $db->Query($sql);
 
if(!empty($pwd) && !empty($attr) && $attr[0][0]==$pwd) //密码不为空,数组不为空,输入密码和查出的密码是否相同
{
  echo "OK";  
}
else
{
  echo "ON";  
}

  

로그인 성공 :

세 .Ajax 데이터 처리

(1) 먼저 이름 행을 표시하고 정상적으로 표시하려는 내용을 편집합니다.

<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>代号</td>
    <td>名称</td>
    <td>价格</td>
    <td>产地</td>
    <td>库存</td>
    <td>操作</td>
  </tr>
</table>

(3) jQuery 작성, 페이지 로드 후 실행

<tbody id="bg">
  //里面放遍历的某个表中的数据内容
</tbody>

(4) 디스플레이 데이터 처리 페이지 작성(2가지 방법)

$(document).ready(function(e) {
  $.ajax({
  url:"xianshicl.php",  
  dataType:"TEXT",
  success: function(data){
    //处理页面处理完成后执行的
       });

(5) 이후 처리 페이지가 완료되었습니다. 메인 페이지의 ajax에서 성공한 방법에서는 처리 페이지가 끝난 후

include("DBDA.class.php"); //调用封装好的类:注意存在位置
$db = new DBDA(); //造新对象
   
$sql = "select * from fruit"; //写sql语句
   
echo $db->StrQuery($sql);  //1.调用封装好的拼接数组为字符串的方法
/* //2.
$attr = $db->Query($sql); //调用封装类中的方法来执行sql语句
$str = "";
foreach($attr as $v)
{
  $str .= implode("^",$v)."|"; //拼接数组为字符串
}
       
echo substr($str,0,strlen($str)-1); //截取字符串:最后的拼接符不显示<br>*/
명령문을 작성하면 다음과 같이 표시됩니다.

위는 제가 컴파일한 내용입니다. 모두를 위해. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:

CSS 스타일의 !important, *, _ 기호에 대한 자세한 설명

IE6의 위치에 대한 자세한 설명: 문제 해결

IE9 이전 버전의 JavaScript 메모리 누수 문제(자세한 요약)

위 내용은 ajax_Examples 사용 방법, ajax 데이터 처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.