【问题标题】:php/javascript change inline label after DB update数据库更新后php/javascript更改内联标签
【发布时间】:2015-11-12 22:34:10
【问题描述】:

这是我的第一篇文章..我的问题可能很简单,但我找不到正确的方法..!

我有一个 php 页面,其中包含从数据库中选择的查询以显示许多记录,对于每条记录,我已经放置了一些字段需要更新的表单和一个“保存”按钮

所以对于每条记录,我在结果表中都有一列,其中包含如下形式:

$code = "<td><form method='POST' action='mypage.php' target='_blank' />";

$code .= " <input type='hidden' name='function' value='formtaglieok' />";
$code .= " <input type='hidden' name='email' value='".$email."' />";
$code .= " <input type='hidden' name='main' value='".$main."' />";
..... some other editing fields
$code .= "<input type='text' name='field1' value='' size='2' />"
..... some other editing fields
$code .= "<td><input type='submit' value='Save' /></td>"

在此列之后,我放置了我想要在按下按钮和更新记录后更改的标签,例如:

$code .= "<td><div id='<this_record_id>' ></div></td>";

在 mypage.php 我有更新记录的 php 代码:

function updaterecord($_POST){
  ...connection to db, prepare the query etc..
  $stid = OCIParse($conn, $query);        

  if (OCIExecute($stid)) {
      $res .= "Saved ";
  } else {
      $res .= "Error";      
  } 

  echo $res;     
}

显然,通过这种表单操作和目标“_blank”,我在新页面中看到结果“已保存”或“错误”,并且数据库中的记录更新正常

我不会将“已保存”放在新页面中,而是更新“保存”按钮旁边的 div this_record_id

所以,我会尝试将 onClick 事件添加到提交按钮

<input type='submit' value='Save' onclick='jSaved(<this_record_id>)' />

并将这段代码放在页面的头部

<script type='text/javascript'>
function jSaved(bcode){

    document.getElementById(bcode).innerHTML = 'Saved';
}
</script>

它会正确更新标签,但也会打开另一个页面。

我要做的是使用 $_POST 数组在 JS 代码中执行我的更新函数,所以不要获取新页面,而只获取标签中函数的结果。..

有人可以帮助我吗?

编辑:已解决

1) 我的 php 主页的表单如下(重要设置 form_id):

$code = "<form name='frm_".$record['TD001_SEQ']."' id='frm_".$record['TD001_SEQ']."' action='' />";

$code .= " <input type='hidden' name='function'  id='function' value='formtaglieok' />";


$code .= " <input type='hidden' name='email'     id='email' value='".$email."' />";
$code .= " <input type='hidden' name='main'      id='main' value='".$main."' />";
$code .= " <input type='hidden' name='store'     id='store' value='".$store."' />";
$code .= " <input type='hidden' name='valuta'    id='valuta' value='".$valuta."' />";
....other fields
//the code for the button (not submit)
$code .= "<td><input type='button' value='Save' onclick='jSaved(".$record['TD001_SEQ']."); '/></td>";
//the label DIV with the same reference of the form/record updating
$code .= "<td><div id='res_".$record['TD001_SEQ']."' ></div></td>";

2) javascript 代码

  function jSaved(td001){

        //searching for exact form from the document page
        var form = false;
    var length = document.forms.length;
    for(var i = 0; i < length; i++) {
      if(document.forms[i].id == "frm_" + td001) {
        form = document.forms[i];
      }
    }

    //create a string containing all key/values from the form (parameters)      
        length = form.length;
        var sParams = "";

        for(var i = 0; i < length; i++) {
          //will be key1=val1&key2=val2 ....
          sParams = sParams + form.elements[i].id + "=" + form.elements[i].value + "&";

    }

    //execute the php update function with params in POST, td001 is needed to write le DIV label after update       

        var updResult = updateRecord("upd.php", sParams, td001);


  }

    //ajax code
  function updateRecord(strUrl, params, idDiv) {
    var xmlHttpReq = false;

    if (window.XMLHttpRequest) {
      xmlHttpReq = new XMLHttpRequest();
    }
      else if (window.ActiveXObject) {

      xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }


    xmlHttpReq.open('POST', strUrl, true);


    xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');


    xmlHttpReq.send(params);


    xmlHttpReq.onreadystatechange = function() {

        /*state evaluation
        * 0 - UNINITIALIZED
        * 1 - LOADING
        * 2 - LOADED
        * 3 - INTERACTIVE
        * 4 - COMPLETE*/

        //state complete
        if (xmlHttpReq.readyState == 4) {
                //updating the DIV label with upd.php result 
                document.getElementById('res_' + idDiv).innerHTML = xmlHttpReq.responseText;
        } 


    }

    return resUpd;
  }


</script>

3) upd.php 页面

if (isset($_POST)) {      
  funFormTaglieOK($_POST);
} else {
  echo "Denied";
}

function funFormTaglieOK($params){
  global $dbdw_usr, $dbdw_pwd, $dbdw_SID;
    // Try to connect to Oracle
  if ($conn = OCILogon($dbdw_usr, $dbdw_pwd, $dbdw_SID)) {
   //execute record update
   if (recordupdate is ok){
    echo "Update"
   } else {
    echo "Error" 
   }

  }
}

【问题讨论】:

    标签: javascript php onclick label updating


    【解决方案1】:

    好的,所以你应该使用 ajax,不要使用 target=_blank。

    如果您想要一个新窗口,您仍然可以通过 Javascript 打开它。

    在通过 ajax 调用调用的 PHP 代码中,您应该以 JSON 格式返回正确的结果。您必须在 JS 中解析该字符串,并相应地更新您的 DOM。

    【讨论】:

    • 感谢 SalDev 的及时回复,但可能我没有正确解释我的问题,所描述的功能,目前分别做两件事:1 是由“动作”调用的 php形成并更新记录,但在单独的窗口中显示响应,2 在 onclick 事件中显示我需要的“已保存”。我想要的是从 onclick 事件启动记录更新,这将在 DIV 元素中显示正确的响应(而不是在单独的窗口中),所以我需要知道从 JS 代码中使用表单的 $_POST 是热的,谢谢..
    • 是的,删除目标 _blank 我没有新页面,但是现在将重新创建提取所有记录的主页,这不是我需要的。所有结果集的主页应该总是一样的,并且为每条记录按下单个更新按钮,只有DIV标签应该更新,记录旁边有“已保存”的指示,所以onClick JS函数应该执行记录更新的php代码,而不是打开一个新的页面或重新创建现有的页面,只得到操作的结果并把它放在标签中,我希望是清楚的
    • 是的,这就是我推荐你使用 ajax 的原因。您可以为每个 ajax 请求发送一个数据集,并使用服务器端操作的结果更新确切的 DIV。您不必重建 DOM 的任何部分,只需使用结果文本更新适​​当的 DIV 的 innerHTML 值。
    • 感谢 SalDev,我的问题是我是一个“老式”程序员,现在我正在阅读有关 AJAX 的内容。但我找到了一个示例链接,可以帮助我理解究竟是什么AJAX 和这段代码帮助了我:danieletabacco.com/un-semplice-esempio-di-ajax
    猜你喜欢
    • 1970-01-01
    • 2012-03-09
    • 2018-07-02
    • 1970-01-01
    • 2012-03-25
    • 2023-03-19
    • 2021-12-11
    • 2011-03-05
    相关资源
    最近更新 更多