Heim > Web-Frontend > js-Tutorial > Hauptteil

Über die Verwendung von Ajax, Ajax-Datenverarbeitung_AJAX bezogen

微波
Freigeben: 2017-06-28 13:57:32
Original
1109 Leute haben es durchsucht

Der folgende Editor bringt Ihnen einen Artikel über die Verwendung von ajax_examples und die Ajax-Datenverarbeitung. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Editor und werfen wir einen Blick darauf

Es ist zu beachten, dass die gekapselte Datenbank und die jQuery-Speicheradresse aufgerufen werden

1. Registrierung

(1) Schreiben Sie ein Textfeld, um den Benutzernamen zu überprüfen

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


(2) Mit jQuery-Anweisung schreiben: Wenn der Benutzername vorhanden ist, kann er nicht verwendet werden. Der Benutzername kann

$("#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);
      }
      });     
})
Nach dem Login kopieren

verwendet werden. 3) Registrierungsverarbeitungsseite: Ich habe es schon oft geschrieben, daher werde ich es nicht Satz für Satz erklären

<?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";  //没有重复的用户名
}
 
?>
Nach dem Login kopieren

2. Anmelden

(1) Textfeld und Anmeldeschaltfläche eingeben

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

(2) Schreiben Sie jQuery-Anweisungen

$("#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("用户名密码输入错误");
    }
  }
  })
       
})
Nach dem Login kopieren

(3) Anmeldeverarbeitungsseite : Ich habe es schon oft geschrieben

<?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";  
}
Nach dem Login kopieren


 

Anmeldung erfolgreich:

3. Ajax-Datenverarbeitung

(1) Zeigen Sie zuerst die Namenszeile an, Bearbeiten Sie es dann normal, wenn Sie es anzeigen möchten. Der Inhalt von

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

(2) Schreiben Sie eine Tabelle das den Inhalt anzeigt

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

(3) Schreiben Sie jQuery und führen Sie es dann aus, nachdem die Seite geladen ist

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

(4) Schreiben Anzeigen der Datenverarbeitungsseite (zwei Methoden)

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>*/
Nach dem Login kopieren

(5) Nach der Verarbeitung Schreiben Sie auf der Seite die Erfolgsmethode in Ajax auf die Hauptseite. Die Anweisung nach der Verarbeitung der Seite

success: function(data){
  var hang = data.split("|"); //拆分字符“|”串:显示行
           
  var str = "";
  for(var i=0;i<hang.length;i++)
  {
  var lie = hang[i].split("^"); //拆分字符串“^”:显示列
  str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[5]+"</td><td>操作</td></tr>";  //显示的行和单元格
  }
           
  $("#bg").html(str);
}
Nach dem Login kopieren

wird wie folgt angezeigt:

Das obige ist der detaillierte Inhalt vonÜber die Verwendung von Ajax, Ajax-Datenverarbeitung_AJAX bezogen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage