zoukankan      html  css  js  c++  java
  • jquery-12 jquery的ajax如何使用

    jquery-12 jquery的ajax如何使用

    一、总结

    一句话总结:就是$.get()和$.post()方法的使用,看参考手册就好,与php的交互。

    1、删除元素的时候如何设置删除特效?

    animate()自定义或者slide和fade系列方法

     9             obj.parent().parent().fadeOut(100);

    2、$.get()方法如何接收从后台返回来的数据?

    callback:载入成功时回调函数。里面的参数,比如下面的r,php后台返回1表示删除成功。

    50     $.get('delete.php',{id:id},function(r){
    51         if(r=='1'){
    52             obj.parent().parent().fadeOut(100);
    53         }
    54     });

    3、$.post()方法和$.get()方法区别明显么?

    用户几乎一模一样,不熟悉的时候去看参考手册

    50     $.get('delete.php',{id:id},function(r){
     7     $.post('delete.php',{id:id},function(r){

    4、jquery中方法中的参数中的回调函数怎么用?

    就是一个匿名函数,只不过带参数,参数是从后台返回的而已。

    callback:载入成功时回调函数。

    50     $.get('delete.php',{id:id},function(r){
    51         if(r=='1'){
    52             obj.parent().parent().fadeOut(100);
    53         }
    54     });

    二、jquery的ajax如何使用

    1、ajax get请求

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10     </style>
    11     <script src="jquery.js"></script>
    12 </head>
    13 <body>
    14     <h1>用户管理:</h1>
    15     <?php 
    16     //用php去数据库获取数据
    17     $pdo=new PDO('mysql:host=localhost;dbname=test','root','123');
    18     $pdo->exec('set names utf8');
    19 
    20     $sql="select * from user";
    21     $smt=$pdo->query($sql);
    22     $rows=$smt->fetchAll(PDO::FETCH_ASSOC);
    23     ?>
    24     <table width='1000px' border='1px' cellspacing='0'>
    25         <tr>
    26             <th>ID</th>
    27             <th>用户名</th>
    28             <th>密码</th>
    29             <th>删除</th>
    30         </tr>
    31         <?php 
    32         foreach($rows as $row){
    33             echo "<tr>";
    34             echo "<td>{$row['id']}</td>";
    35             echo "<td>{$row['username']}</td>";
    36             echo "<td>{$row['password']}</td>";
    37             echo "<td><a href='javascript:' class='del' id='{$row['id']}'>删除</a></td>";
    38             echo "</tr>";
    39         }
    40         
    41          ?>
    42     </table>
    43 </body>
    44 <script>
    45 $('.del').click(function(){
    46     id=this.id;
    47     obj=$(this);
    48 
    49     //ajax通讯
    50     $.get('delete.php',{id:id},function(r){
    51         if(r=='1'){
    52             obj.parent().parent().fadeOut(100);
    53         }
    54     });
    55 });
    56 </script>
    57 </html>

    2、ajax post请求

     1 <script>
     2 $('.del').click(function(){
     3     id=this.id;
     4     obj=$(this);
     5 
     6     //ajax通讯
     7     $.post('delete.php',{id:id},function(r){
     8         if(r=='1'){
     9             obj.parent().parent().fadeOut(100);
    10         }
    11     });
    12 });
    13 </script>
     
  • 相关阅读:
    storcli64 查看raid
    初学者路径规划 | 人生苦短我用Python
    Vue.js组件的重要选项
    三个Bootstrap免费字体和图标库
    前端实时消息提示的效果-websocket长轮询
    前端实时消息提示的效果-websocket长轮询
    带分页的标签
    带分页的标签
    VMware-workstation安装
    VMware-workstation安装
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9244971.html
Copyright © 2011-2022 走看看