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

 我来答
落木叶潇潇
推荐于2017-11-27 · TA获得超过466个赞
知道小有建树答主
回答量:220
采纳率:100%
帮助的人:118万
展开全部
//这个正好手头正在做的一个项目中用到,提供思路,可以自由扩充
//在页面加载的时候注册一下 ,就是给要点击的地方添加事件或者是属性
//页面源码
<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);
})

至于页面不跳转刷新根据具体情况吧

  1. 假如你的数据是通过后台来获取的,那么通过上面的方法,把URL改成你的页面链接,然后再你的PageLoaf方法中,添加对参数的分析,来刷新页面  (没亲测过)

  2. 通过点击按钮,后台获取,可以先把查询的部分封装成一个方法,然后通过第一个的方式实现。或者是通过  $("#按钮的ID").click()来触发点击,但是这个一定会刷新

  3. 那就是你的页面数据也是通过AJAX来实现的,那么没说的,直接在更新到数据库的方法里面重新执行那个Ajax就好

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式