ajax 即点即改
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 HomeModel;
use ThinkModel;
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 HomeController;
use ThinkController;
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>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
