您的位置：首页 > 编程语言 > PHP开发

ajax 即点即改

2016-07-16 11:06 357 查看
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 onclick="change({$v.u_id})">
<input type="text" value="{$v.u_name}" id="i{$v.u_id}" onblur="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 onclick="change({$v.u_id})">
<input type="text" value="{$v.u_name}" id="i{$v.u_id}" onblur="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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                ajax
                                                php
                                                即点即改
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航