ajax 小练习

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>网站信息</title>
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/pintuer.js"></script>
</head>
<body>
    <?php
    session_start();
     if(empty($_SESSION["uid"]))
     {
         header("location:../login.html");
        exit;

     }
    ?>
<div class="panel admin-panel">

 <table width="100%" border="1" cellpadding="0" cellspacing="0" style="text-align:center">
    <tr>
        <td>栏目</td>

        <td>编辑</td>
        <td>删除</td>

    </tr>

    <tbody id="bg">

    </tbody>

</table>
</div>
<br>
<div><input type="button" value="添加栏目" id="add"/></div>
<div class="add" >栏目名称:<input type="text" id="lm"/></div>
<div class="add" >类型:<input type="text" id="lx"/></div>

<div class="add" ><input type="button" value="添加" id="tianjia"/></div>
 <script type="text/javascript">
$(document).ready(function(e) {

     jiazai();

                        //添加栏目

                    $("#tianjia").click(function(){

                        var lm = $("#lm").val(),
                            lx=$("#lx").val(),
                            xh=$("#xh").val();

                        $.ajax({
                            url:"add.php",
                            data:{lm:lm,lx:lx,xh:xh},
                            type:"POST",
                            dataType:"TEXT",
                            success:function(jia){
                                    if(jia.trim()=="OK")
                                    {
                                        //重新加载
                                        jiazai();

                                    }
                                    else
                                    {
                                        alert("添加失败");
                                    }
                                }
                            });

                    })

function jiazai()
{

        //调AJAX
        $.ajax({
                url:"lanmuchuli_hou.php",
                type:"POST",
                dataType:"TEXT",
                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 class=‘n‘>"+lie[0]+"</td><td><input type=‘button‘ value=‘修改‘ class=‘xiugai‘ code=‘"+lie[2]+"‘ /></td><td><input type=‘button‘ value=‘删除‘ class=‘shanchu‘ code=‘"+lie[2]+"‘ onclick=‘return del(1)‘ /></td></tr>";

                        }
                    $("#bg").html(str);
                    xiugai();//调用修改栏目方法
                    //删除栏目
                    $(".shanchu").click(function(){

                        var code = $(this).attr("code");
                        $.ajax({
                            url:"shanchu.php",
                            data:{c:code},
                            type:"POST",
                            dataType:"TEXT",
                            success: function(d){
                                    if(d.trim()=="OK")
                                    {
                                        //重新加载
                                        jiazai();
                                    }
                                    else
                                    {
                                        alert("删除失败");
                                    }
                                }
                            });
                    })

                    }
            });
}

    //修改栏目
                function xiugai(){
                $(".xiugai").click(function(){

                var code = $(this).attr("code");

        $.ajax({
            type:"post",
            url:"lanmuchuli_xiugai.php",
            data:{code:code},
            dataType:"TEXT",
            success:function(r){
                $("#bg").html(r);

                $("#lanmu_xiugai").click(function(){
                    var name = $("#lanmu_name").val();
                    $.ajax({
                        type:"post",
                        url:"xiugai.php",
                        data:{code:code,name:name},
                        success:function(j){
                            jiazai();
                        }
                    });                    

                })

            }
        });

                            })

        }

})

</script>
</body>

</html>处理界面:
<?php
include("../DBDA.class.php");
$db = new DBDA();
$sql = " select * from lanmu ";
$attr = $db->StrQuery($sql);
echo $attr;
<?php
include("../DBDA.class.php");
$db = new DBDA();
$lm = $_POST["lm"];
$lx = $_POST["lx"];

$sql = "insert  into lanmu values(‘{$lm}‘,‘{$lx}‘,‘‘,‘xiugai‘)";
$r=$db->Query($sql,0);
if($r)
{
    echo "OK";
}
else
{
    echo "NO";
}
<?php
include("../DBDA.class.php");
$db = new DBDA();
$code = $_POST["c"];
$sql = "delete from lanmu where code=‘{$code}‘";
$r = $db->Query($sql,0);
if($r)
{
    echo "OK";
}
else
{
    echo "NO";
}
<?php
include("../DBDA.class.php");
$db = new DBDA();
$sql = "select * from lanmu";
$code=$_POST["code"];
$at = $db->Query($sql);
$str = "";
foreach($at as $v)
{
    if($v[2]==$code)
    {
        $str.="<tr><td class=‘n‘><input type=‘text‘ id=‘lanmu_name‘ value=‘{$v[0]}‘></td><td><input type=‘button‘ value=‘保存‘ id=‘lanmu_xiugai‘ code=‘{$v[2]}‘ /></td><td></td></tr>";
    }
    else
    {
        $str.="<tr><td class=‘n‘>{$v[0]}</td><td><input type=‘button‘ value=‘修改‘ class=‘xiugai‘ code=‘{$v[2]}‘ /></td><td><input type=‘button‘ value=‘删除‘ class=‘shanchu‘ code=‘{$v[2]}‘ /></td></tr>";
    }

}
echo $str;
?>
<?php
include("../DBDA.class.php");
$db = new DBDA();
$code=$_POST["code"];
$name=$_POST["name"];
$sql = " update lanmu set name=‘{$name}‘ where code={$code}";
$db->Query($sql,0);
?>

删除功能:

添加功能:

修改功能:

时间: 2024-12-09 05:49:05

ajax 小练习的相关文章

封装ajax小工具:

1 ajax-lib/ajaxutils.js: 2 3 // 创建request对象 4 function createXMLHttpRequest() { 5 try { 6 return new XMLHttpRequest();//大多数浏览器 7 } catch (e) { 8 try { 9 return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 10 } catch (e) { 11 try { 12 return ActvieXOb

AJAX小问题

临时做个小项目,初学AJAX,遇到个小问题.网上搜到了.现在MARK一下. $.ajax({             type: "post",            url: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",            dataType:"json",            data: { User: username.value, PassWord: userpass.value },     

ajax小练习

接口地址:http://apis.juhe.cn/cook/query.php 支持格式:json/xml 请求方式:get/post 请求示例:http://apis.juhe.cn/cook/query?key=&menu=%E8%A5%BF%E7%BA%A2%E6%9F%BF&rn=10&pn=3 JSON返回示例: { "resultcode": "200", "reason": "Success&quo

自己封装的一个Ajax小框架

在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架: 1 /** 2 * frameAjax 3 * 4 * 参数: 5 * paramsObj: Json 6 * required params: 7 * type:请求参数类型(String) 8 * url:请求地址(String) 9 * data:请求参数(Json),data可为空值. 10 * success:请求回调(Function) 11 * async:表示请求是否异步处理

传统AJAX小例

index.jsp: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.

封装一个自己的 Ajax小框架

框架代码如下: // 使用封装方法的人只关心提供http的请求方法,url地址,数据,成功和失败的回调方法 // 类的构造定义,主要职责就是新建出 XMLHttpRequest 对象 var MyXMLHttpRequest = function () { var xmlhttprequest; if (window.XMLHttpRequest) { xmlhttprequest = new XMLHttpRequest(); if (xmlhttprequest.overrideMimeTy

ajax小demo---JSONP 跨域原理及简单应用

一.jsonp Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 因为同源策略,(它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略.)我们不能从不同的域(网站)访问数据,而jsonp就是用来实现这种不能跨域请求数据. 二.jsonp原理: 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img.iframe.scri

ajax小demo-----ajax中json的使用

使用简单例子,表单的的输入,将表单输入以JSON的形式传入,并后台返回JSON格式,使用js函数处理,进行显示,进一步熟悉了ajax的用法,以及JSON的的使用.例子如下: html部分: <form action="test1.php" method="get" onsubmit="return check();">  <label for="username">用户名 </label>&

AJAX小扩展

ajax请求的时候,会碰到这种情况,例如需要在每个ajax请求都带上相同的验证参数,是否有方法能够自动的将这些参数在ajax请求的时候自动带上? 我们都知道jQuery的ajaxSetup函数可以在ajax发起请求前,修改ajax请求的默认设置选项,之后执行的ajax的请求,如果对应的选项参数没有设置,将使用更改后的默认设置.设置的选项会存放于jQuery.ajaxSettings中. $.ajaxSetup({ data: { token: "XXXX" //在每次ajax请求带上t

JavaScript实现拖拽预览,AJAX小文件上传

本地上传,提前预览(图片.视频) 1.html中div标签预览显示.button标签触发上传事件. <div id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此</div> <button onclick="xhr2()">ajax上传</button> 2.禁止浏览器打开文件行为 doc