怎么在PHP网页上点击数据出现文本框并可以修改和提交，用AJAX把数据更新到数据库同时刷新页面，求代码

Question

如题所述

Answer 1

//这个正好手头正在做的一个项目中用到，提供思路，可以自由扩充
//在页面加载的时候注册一下 ，就是给要点击的地方添加事件或者是属性
//页面源码
<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就好