怎么在PHP网页上点击数据出现文本框并可以修改和提交,用AJAX把数据更新到数据库同时刷新页面,求代码
展开全部
//这个正好手头正在做的一个项目中用到,提供思路,可以自由扩充
//在页面加载的时候注册一下 ,就是给要点击的地方添加事件或者是属性
//页面源码
<table>
<tr>
<td class="canChange">点击这里会出现文本框</td>
</tr>
</table>
//JS
$(document).ready(function(){
td_Click();
})
//点击事件
function td_Click() {
$(".canChange").click(function () {
var td = $(this);
//所点文本框的id
var id = $(this).attr("id")
var txt = $.trim(td.text());
var input = $("<input class=\"myinput\" id='new' type='text'value='" + txt + "'style=\"width:80%;heigth:100%;\"/>");
td.html(input);
input.click(function () { return false; });
//获取焦点
input.trigger("focus");
//文本框失去焦点后提交内容,重新变为文本
input.blur(function () {
// var newtxt = $(this).val();
var newtxt = $("#new").val();
//判断文本有没有修改
if (newtxt != txt) {
if (newtxt == null || newtxt == "") {
td.html(txt);
}
else {
//表示已经修改
$.post(.......)//提交
td.html(newtxt);
}
}
else {
td.html(txt);
}
});
});
}
刷新页面可以通过 JQ的 Fresh方法来实现,
或者是是控件刷新来实现,
比如 $("#btnSearch").click();这样通过JQ调用按钮点击,实现重新读取数据
=================望采纳!
追问
我主要是想要,在判断文本有没有修改这里,修改了不是要把数据提交吗,怎么用ajax异步把数据更新到数据库同时页面不跳转刷新的代码
追答
你这一开始就表达不清楚啊,关于Ajax异步提交的代码,就简单了
$.ajax({
type:"POST",
url: "/AjaxDemo/Add.cspx",
data: {a: 1, b: 2},
success:function(result){
$("#output").val(result);
}
});
或者是
$.post("/AjaxDemo/Add.cspx",{a: 1, b: 2},function(data){
$("#output").val(result);
})
至于页面不跳转刷新根据具体情况吧
假如你的数据是通过后台来获取的,那么通过上面的方法,把URL改成你的页面链接,然后再你的PageLoaf方法中,添加对参数的分析,来刷新页面 (没亲测过)
通过点击按钮,后台获取,可以先把查询的部分封装成一个方法,然后通过第一个的方式实现。或者是通过 $("#按钮的ID").click()来触发点击,但是这个一定会刷新
那就是你的页面数据也是通过AJAX来实现的,那么没说的,直接在更新到数据库的方法里面重新执行那个Ajax就好
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询