主页 › 站点内容

实现html页面的内容的局部修改的简单的方法

周三, 2024-05-15 11:40 — 刘世伟

html页面局部内容和后端数据库的同步修改， 用ajax方式的话，有时候必需要借助一些js库，我这里写了一个简单的原生js函数， 可以实现这个功能，用于给一些老系统增加功能，很方便:

js:
function modi_ajax(url,text,id)

{
    var dom=document.getElementById(id);
    var Defaulttext=dom.innerHTML;
    if (data=prompt(text,Defaulttext)) {
        if ( data == Defaulttext) return; 
        dom.innerHTML=Defaulttext+' 更新中...';
        fetch(url+data)
            .then(response=>{ if(response.ok) return response.text();else dom.innerHTML=Defaulttext;})
            .then(data =>{if(data) dom.innerHTML=data;})
            .catch(error=>{alert(error);dom.innerHTML=Defaulttext;});
    }
}
 
html:
<span id=id1 class=blue onclick=modi_ajax("modi.php?id=xxx&data=","请输入新的内容","id1");>12345</span>
 
modi.php:
<?php
//save data file_put_content("/tmp/data.txt,$_GET['data']);
echo $_GET['data'];