使用ajax触发php脚本 - 如何以及在何处编程？

Question

Good day,

I have a php file (db.php) which contains the following function

function edit_record($id, $value){
    if($this->db->query('UPDATE tbl_prototype SET value = ' . $value .' WHERE id_component = '.$id)){
        $this->register_changes();
        return TRUE;
    }
    return FALSE;
}

Besides, I have some checkboxes in my html page as follows :

<input id="chk01" type="checkbox" data-onstyle="success" data-toggle="toggle">
<input id="chk02" type="checkbox" data-onstyle="success" data-toggle="toggle">

the html page contains also the following script.

<script>
        /* AJAX request to checker */       
        function check(){
            $.ajax({
            type: 'POST',
            url: 'checker.php',
            dataType: 'json',
            data: {
            counter:$('#message-list').data('counter')
        }
        }).done(function( response ) {

        /* check if with response we got a new update */
        if(response.update==true){
            var j = response.news;

            $('#message-list').html(response.news);
            sayHello(j);

        }           
        });
        };
        //Every 1/2 sec check if there is new update
        setInterval(check,500);
    </script>
    <script>
        function sayHello(j){

        var json=$.parseJSON(j);
        var techname = "";
        var techname1 = "";
        var c;
        var w;
        $(json).each(function(i,val){
        $.each(val,function(k,v){

        if (k=="tech_name")
        {
            techname = "#" + v;
            techname1 = v;
        }
        else
        {
            console.log("Mon nom est " + techname + " et ma valeur est " + v);

            c=document.getElementById(techname1);

            if (c.checked)
            {
                w = 1;
            }
            else
            {
                w = 0;
            }

            console.log(w);
            console.log("techname : " + techname1);

            if (v != w)
            {
                console.log ("Pas identique");
                if (v==0)
                {
                    // false
                    uncheckBox(techname);
                }
                else
                {
                    // true
                    checkBox(techname);
                }
            }
            else
            {
                console.log ("Identique");
            }

        }

        });
        });

        }
        function checkBox(pCtrl)
        {
            toggleOn(pCtrl);
        }
        function uncheckBox(pCtrl)
        {
            toggleOff(pCtrl);
        }
    </script>

Now for my question: where and how should I specify that I would like to run the function 'edit_record' stored in the 'db.php' file with the two parameters ($id and $value).

Contents of 'checker.php' :

<?php require('common.php');
//get current counter
$data['current'] = (int)$db->check_changes();
//set initial value of update to false
$data['update'] = false;
//check if it's ajax call with POST containing current (for user) counter;
//and check if that counter is diffrent from the one in database
//if(isset($_POST) && !empty($_POST['counter']) && (int)$_POST['counter']!=$data['current']){
if(isset($_POST)){
    $data['news'] = $db->get_news2();
    $data['update'] = true;
}
//just echo as JSON
echo json_encode($data);

/* End of file checker.php */

Thanks a lot for your valuable inputs. Sorry if the question sounds silly (I'm a newbie in php/ajax/jquery programming).

Answer 1

In modern web apps with rich interface You should go for REST API and create controller which should be in You case in checker.php. Example ( checker.php ):

if ($_SERVER['REQUEST_METHOD'] == 'POST'){

//update code
edit_record($_POST['id'],$_POST['counter]);

}

if ($_SERVER['REQUEST_METHOD'] == 'GET'){

//get code

}

ps. i do not see passing id in ajax, you send only counter, so you should add id like:

...
data: {
        id:yourId //here your id
        counter:$('#message-list').data('counter')
    }

Next thing remove from js:

setInterval(check,500);

and create bind:

$("yourcheckboxselector").on("click",function(e){

 check($(this).prop("checked") ) //here you have it was checked or not as boolean

});