ajax 即点即改

最新推荐文章于 2022-07-24 20:05:52 发布

亢士群的blog

最新推荐文章于 2022-07-24 20:05:52 发布

阅读量1k

点赞数

分类专栏： PHP ajax 文章标签： ajax php 即点即改

本文链接：https://blog.csdn.net/qq_35278280/article/details/51923339

版权

PHP 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

ajax

9 篇文章 0 订阅

订阅专栏

1. 首先写一个表单提交名为add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="__URL__/add_pro" method="post" enctype="multipart/form-data">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="aa"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="text" name="bb"></td>
        </tr>

        <tr>
            <td><input type="submit" value="添加"></td>
            <td></td>
        </tr>
    </table>
</form>
</body>
</html>

2.通过Model
<pre name="code" class="php"><?php
namespace Home\Model;
use Think\Model;
class UserModel extends Model {
    protected $tableName = 'user';
    //定义字段映射
    protected $_map = array(
        'aa' =>'u_name', // 把表单中aa映射到数据表的
        'bb'  =>'u_sex', // 把表单中的bb映射到数据表的u_sex字段
     );








    function doUpdate($data){
        $u=M($this->tableName);
        $re=$u->save($data);
        return $re;
    }
}

3.提交表单到后台控制器里面的 add_pro方法

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
    /*
     * 显示添加页面
     */
    function index(){
        $this->display("add");
    }

    /*
     * 执行添加
     */
    function add_pro(){
        //实例化model
        $user= D("User");
        if($arr=$user->create()){
           print_R($arr);
        }else{
            echo "no";
        }
    }

    /*
     * 列表
     */
    function show_list(){
        //实例化表
        $user= M("user");
        $data=$user->select();
        $this->assign("data",$data);
        $this->display();
    }

    /*
     * 即点即改
     */
    function update(){
        //调用model执行修改
        $user=D("User");
        $data=I("get.");
        $re=$user->doUpdate($data);
        if($re){
            echo '1';
        }else{
            echo '-1';
        }
    }
}

4.然后通过控制展示列表界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<center>
<table border="1">
    <tr>
        <td>用户名</td>
        <td>性别</td>
        <td>操作</td>
    </tr>
    <foreach name='data' item='v'>
    <tr>
        <td οnclick="change({$v.u_id})">
            <input type="text" value="{$v.u_name}" id="i{$v.u_id}" οnblur="update({$v.u_id})" style="display:none">
            <span id="s{$v.u_id}">{$v.u_name}</span>
        </td>
        <td>{$v.u_sex}</td>
        <td><a href="#">删除</a></td>
    </tr>
    </foreach>
</table>
</center>
</body>
</html>

<script>
//    //点解td将文本框展示出来 并且将多出的内容清除
//    function change(id){
//        document.getElementById("i"+id).style.display='block';
//        document.getElementById("s"+id).innerHTML="";
//    }
//
//    //鼠标移开文本框对数据库进行操作 修改
//    function update(u_id){
//        //获取要修改的值
//        var u_name=document.getElementById("i"+u_id).value;
//
//        //通过ajax
//        var ajax=new XMLHttpRequest();
//        ajax.open("get","__URL__/u_id/"+u_id+"/u_name/"+u_name);
//        ajax.send(null);
//        ajax.onreadystatechange=function(){
//            if(ajax.readyState==4&&ajax.status==200){
//                alert(ajax.responseText);
//            }else{
//                alert("失败");
//            }
//        }
//    }

    //将文本框显示出来
    function change(id){
        document.getElementById("i"+id).style.display='block';
        //清空span标签中的内容
        document.getElementById("s"+id).innerHTML="";
    }
    //当鼠标离开文本框 修改内容
    function update(id){
        var v=document.getElementById("i"+id).value;
        var ajax=new XMLHttpRequest();
        ajax.open("get","__URL__/update/u_id/"+id+"/u_name/"+v);
        ajax.send(null);
        ajax.onreadystatechange=function(){
            if(ajax.readyState==4&&ajax.status==200){
                //alert(ajax.responseText);
                if(ajax.responseText=='1'){
                    //修改成功 把文本框去除 把修改后的值显示出来
                    document.getElementById("i"+id).style.display='none';
                    document.getElementById("s"+id).innerHTML=v;
                }else{
                    alert("失败");
                }
            }
        }
    }
</script>

5.加载展示界面 show_list

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<center>
<table border="1">
    <tr>
        <td>用户名</td>
        <td>性别</td>
        <td>操作</td>
    </tr>
    <foreach name='data' item='v'>
    <tr>
        <td οnclick="change({$v.u_id})">
            <input type="text" value="{$v.u_name}" id="i{$v.u_id}" οnblur="update({$v.u_id})" style="display:none">
            <span id="s{$v.u_id}">{$v.u_name}</span>
        </td>
        <td>{$v.u_sex}</td>
        <td><a href="#">删除</a></td>
    </tr>
    </foreach>
</table>
</center>
</body>
</html>

<script>
//    //点解td将文本框展示出来 并且将多出的内容清除
//    function change(id){
//        document.getElementById("i"+id).style.display='block';
//        document.getElementById("s"+id).innerHTML="";
//    }
//
//    //鼠标移开文本框对数据库进行操作 修改
//    function update(u_id){
//        //获取要修改的值
//        var u_name=document.getElementById("i"+u_id).value;
//
//        //通过ajax
//        var ajax=new XMLHttpRequest();
//        ajax.open("get","__URL__/u_id/"+u_id+"/u_name/"+u_name);
//        ajax.send(null);
//        ajax.onreadystatechange=function(){
//            if(ajax.readyState==4&&ajax.status==200){
//                alert(ajax.responseText);
//            }else{
//                alert("失败");
//            }
//        }
//    }







    //将文本框显示出来
    function change(id){
        document.getElementById("i"+id).style.display='block';
        //清空span标签中的内容
        document.getElementById("s"+id).innerHTML="";
    }
    //当鼠标离开文本框 修改内容
    function update(id){
        var v=document.getElementById("i"+id).value;
        var ajax=new XMLHttpRequest();
        ajax.open("get","__URL__/update/u_id/"+id+"/u_name/"+v);
        ajax.send(null);
        ajax.onreadystatechange=function(){
            if(ajax.readyState==4&&ajax.status==200){
                //alert(ajax.responseText);
                if(ajax.responseText=='1'){
                    //修改成功 把文本框去除 把修改后的值显示出来
                    document.getElementById("i"+id).style.display='none';
                    document.getElementById("s"+id).innerHTML=v;
                }else{
                    alert("失败");
                }
            }
        }
    }
</script>