从javascript运行PHP插入函数

时间:2018-12-01 18:42:21

标签: javascript php jquery html ajax

我有一个包含员工姓名和ID的HTML表,该表正在从SQL select中检索。我希望能够编辑员工密码并将其更新为我的数据库。 php函数正在运行,但是我想从javascript中的onclick函数运行它。我的代码是:

function update(id) {
    var pass = document.getElementById('pass'+id).value;
    var Cpass = document.getElementById('Cpass'+id).value;
    if (pass != Cpass){
        Notify("Passwords don't match. Please reneter passwords");
    }
    else{
        //run php function $this->ea_user_settings->update_password(id, pass);
        Notify("Password saved");
        document.getElementById('update'+id).style.display = 'none';
    }
}
function edit(id) {
    if (document.getElementById('update'+id).style.display == 'inline'){
        document.getElementById('update'+id).style.display = 'none';
    }
    else{
        document.getElementById('update'+id).style.display = 'inline';
    }
}

function Notify($msg) {
    $("#notification").text("");
    $("#notification").fadeIn(1000).append($msg);
    $("#notification").fadeOut(5000);
}
<div id="notification" style="display : none" value=""></div>
<?php      
    $invoice = $this->ea_user_settings->get_employee_name_id();
?>
<table class="table table-hover table-bordered table-striped" id = "EmployeeList">
    <thead> 
        <tr>
            <th style="background-color:#BA9E5E; position:sticky; top: 0"><p style="color: white;">Name</p></th>
            <th style="background-color:#BA9E5E; position:sticky; top: 0"><p style="color: white;">ID</p></th> 
            <th style="background-color:#BA9E5E; position:sticky; top: 0"><p style="color: white;">Update Password</p></th>
        </tr>
    </thead>
    <tbody>
        <?php 
        foreach ($invoice as $report): ?>
        <tr>
            <td><?php echo $report->Name ?> </td>
            <td><?php echo $report->ID ?> </td>
            <td>
                <div>
                    <div id="<?php echo 'update'.$report->ID;?>" style="display:none">
                        <input type="text" id="<?php echo 'pass'.$report->ID;?>" name="pass" placeholder="Password"> 
                        <input type="text" id="<?php echo 'Cpass'.$report->ID;?>" name="Cpass" placeholder="Confirm Password"> 
                        <button id='updateBtn' type="button" onClick='update("<?php echo $report->ID;?>")'>Save</button>
                    </div>
                    <div id="<?php echo 'edit'.$report->ID;?>" style="display:inline; text-align:right; padding:10px" align="right">
                        <button id='editBtn' type="button" onClick='edit("<?php echo $report->ID;?>")'>Edit</button>
                    </div>
                </div>
            </td>
        </tr>
        <?php endforeach;?>
    </tbody>
</table>

当我单击保存按钮时,我想运行我的php更新功能($ this-> ea_user_settings-> update_password(id,pass);)。

2 个答案:

答案 0 :(得分:1)

您需要同样使用ajax。

    $.ajax({
        url: '/change-password.php',
        data: {'user_id':user_id, 'pass': pass, 'new_pass': new_pass},
        type: 'POST',
        success: function (result)
        {
           //Do something
        }
    });

您可以参考此示例代码:)

答案 1 :(得分:0)

您不能直接从JavaScript函数中调用PHP函数。 PHP在服务器上运行,而JS在客户端上运行。

但是,您可以从javascript函数向服务器发送get或post请求,并根据接收到的参数执行php函数。

[更新-添加示例]

考虑您的php页面包含以下功能:

<?php
function writeMsg($param) {
  echo "Hello ".$param;
}

writeMsg($_GET["name"]);
?>

//Here the parameter 'name' is retrieved from the http request and passed to the function.

例如,如果链接类似于 // test-php-page?name = stackoverflow ,则显示的HTML页面将包含 Hello stackoverflow

无法从客户端代码调用函数writeMsg。您将必须使用参数“名称”向服务器发送有效的http请求。只需放置锚标记即可实现。

<a href="/test-php-page?name=stackoverflow'>link</a>

或者,通过表单操作方法

<form action="/test-php-page" method="get">
  <input type="text" name="name">
  <input type="submit" value="Submit">
</form>

或者通过使用JS的ajax调用。

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "/test-php-page?name=stackoverflow", true);
xhttp.send();

您也可以使用jQuery或任何其他库来简化ajax调用。

请参考以下w3schools链接以获得更好的理解:https://www.w3schools.com/php/php_ajax_intro.asp