Блог

Главная - Вопросы по программированию - когда я нажимаю добавить, данные сохраняются, а также отображаются на той же странице через ajax, но если я хочу отсортировать данные, кнопка не работает

когда я нажимаю добавить, данные сохраняются, а также отображаются на той же странице через ajax, но если я хочу отсортировать данные, кнопка не работает

#php #ajax

Вопрос:

я добавляю данные в базу данных, и в то же время они отображаются на той же странице через ajax при нажатии кнопки «Добавить». теперь я хочу показать данные в порядке возрастания adn, а также в порядке убывания. данные отображаются при нажатии кнопки «Добавить», но когда я нажал кнопку «возрастание», данные не отображаются. то же самое происходит и с кнопкой спуска.

add.php файл

 <section class="my-5">
    <div class="py-5">
        <h2 class="text-center">Information</h2>
    </div>

    <div class="w-50 m-auto">
        <form method="POST" onsubmit="event.preventDefault();onSubmit();"> 
            <div class="form-group">
                <label>Title</label>
                <input type="text" name="title" id="title" autocomplete="off" class="form-control" required="">
            </div>

            <div class="form-group">
                <label>Description</label>
                <input type="text" name="description" id="description" autocomplete="off" class="form-control" required="">
            </div>
            <br>
            <button type="submit" class="btn btn-success" id="fetch" name="dataadd" onclick="addRecord();">Add</button>
            </div>
        </form>
    </div>
</section>

<section align="center"> 
    <form>
        <button type="submit" class="btn btn-success" name="ascd" onclick="ascdRecord();">Ascending</button>
        <button type="submit" class="btn btn-success" name="desc" onclick="descRecord();">Descending</button>
    </form>
</section>

<br>
<br>

    <div align="center">
        <h2 id="records">Show All Data</h2>
    </div>
</div>

Функции javascript

 <script type="text/javascript">

function addRecord()
{
     var title = $('#title').val();
     var description = $('#description').val();

     $.ajax({
        url: "data.php",
        type: "POST",
        data: {
            title: title,
            description: description
        },
        success: function(data, status)
        {
            readRecords();
        }
     });
}

function readRecords()
{
    var readrecord = "readrecord";
    $.ajax({
        url: "data.php",
        type: "POST",
        data: {readrecord: readrecord},
        success: function(data, status)
        {
            $('#records').html(data);
        }
    });
}

function DeleteUser(deleteid)
{
    var conf = confirm("you want to delete ?");
    if (conf==true) {
    $.ajax({
        url: "data.php",
        type: "POST",
        data: {deleteid: deleteid},
        success: function(data, status)
        {
            readRecords();
        }
    });
    }
}

function ascdRecord()
{
    $("#ascd").click(function(){

    $.ajax({
        url: "data.php",
        type: "POST",
        dataType: "html",
        success: function(data)
        {
            $('#records').html(data);
        }
    });
    });

}
</script>

data.php файл

 if(isset($_POST['ascd']))
{
    echo "<div class='result'>";
    $data = '<table>

    <tr>
    <th>Title</th>
    <th>Description</th>
    </tr>

    ';

    $fetch_query = "select * from app.add order by title";
    $fetch_run = mysqli_query($con, $fetch_query);

    if(mysqli_num_rows($fetch_run) > 0)
    {
        while($row = mysqli_fetch_array($fetch_run))
        {
            $data .= '<tr style="border: 1px solid black; padding: 8px; text-align: center">

            <td style="border: 1px solid black; padding: 8px; text-align: center">'.$row['title'].'</td>
            <td style="border: 1px solid black; padding: 8px; text-align: center">'.$row['description'].'</td>
            <td>
            <button onclick="DeleteUser('.$row['id'].')">Delete</button>
            </td>

            </tr>';
        }
    }
    $data .= '</table>';
    echo $data;

    echo "</div>";
}


if(isset($_POST['readrecord']))
{
    echo "<div class='result'>";
    $data = '<table>

    <tr>
    <th>Title</th>
    <th>Description</th>
    </tr>

    ';

    $fetch_query = "select * from app.add";
    $fetch_run = mysqli_query($con, $fetch_query);

    if(mysqli_num_rows($fetch_run) > 0)
    {
        while($row = mysqli_fetch_array($fetch_run))
        {
            $data .= '<tr style="border: 1px solid black; padding: 8px; text-align: center">

            <td style="border: 1px solid black; padding: 8px; text-align: center">'.$row['title'].'</td>
            <td style="border: 1px solid black; padding: 8px; text-align: center">'.$row['description'].'</td>
            <td>
            <button onclick="DeleteUser('.$row['id'].')">Delete</button>
            </td>

            </tr>';
        }
    }
    $data .= '</table>';
    echo $data;

    echo "</div>";
}

if(isset($_POST['title']) amp;amp; isset($_POST['description']))
{

    $insert_query = "insert into app.add (title, description) values('$title','$description')";
    $query_run = mysqli_query($con, $insert_query);

}

Комментарии:

1. Здесь нет никакой descRecord функции data.php , и поэтому невозможно сказать, почему ваши функции не работают

2. я показал data.php запишите в ответе

3. Вы не публикуете параметры и параметры data.php скрипта, которые помогли бы определить, какую часть PHP запускать для какого Ajax-запроса. Если бы вы использовали общее имя параметра, например task , вы могли бы просто изменить значение для каждого запроса и упростить PHP с switch помощью инструкции

4. я добавил data.php файл в коде. как это сделать ? я не понял

5. @ProfessorAbronsius как передать параметры в data.php файл. я все еще не понимал тебя

Ответ №1:

Вы можете изменить каждую функцию, чтобы отправить новый параметр — я выбрал task , но это не важно. Значение изменяется для каждого типа запроса, как вы увидите в javascript. PHP-код может искать, а затем разветвлять логику, основанную на этой единственной переменной POST.

К вашему сведению: Слепое извлечение переменных в PHP с помощью extract открывает двери для различных атак — используйте это с осторожностью только после того, как вы очистили массив СООБЩЕНИЙ ~ возможно, используя filter_input_array в качестве начала и белый список допустимых имен/типов.

 function addRecord(){
     var title = $('#title').val();
     var description = $('#description').val();

     $.ajax({
        url: "data.php",
        type: "POST",
        data: {
            task:'add',
            title:title,
            description:description
        },
        success: function(data, status)
        {
            readRecords();
        }
     });
}

function readRecords(){
    $.ajax({
        url: "data.php",
        type: "POST",
        data: {
            task:'read'
        },
        success: function(data, status)
        {
            $('#records').html(data);
        }
    });
}

function DeleteUser(deleteid){
    if( !confirm("you want to delete?") )return false;

    $.ajax({
        url: "data.php",
        type: "POST",
        data: {
            task:'delete',
            deleteid:deleteid
        },
        success: function(data, status)
        {
            readRecords();
        }
    });
    
}

function ascdRecord(e){
    $.ajax({
        url: "data.php",
        type: "POST",
        data:{
            task:'ascd'
        },
        dataType: "html",
        success: function(data)
        {
            $('#records').html(data);
        }
    });
}
/* presume similar for dscdRecord */
function descRecord(e){
    $.ajax({
        url: "data.php",
        type: "POST",
        data:{
            task:'dscd'
        },
        dataType: "html",
        success: function(data)
        {
            $('#records').html(data);
        }
    });
}

Data.php

 if( isset( $_POST['task'] ) ){
    switch( $_POST['task'] ){
        case 'add':
            if(isset(
                $_POST['title'],
                $_POST['description']
            )){
                # this is prone to SQL injection - you should use a `Prepared statement`
                /*
                $insert_query = "insert into app.add () values('$title','$description')";
                $query_run = mysqli_query($con, $insert_query);
                */
                
                
                $sql='insert into `app`.`add` ( `title`, `description` ) values (?,?)';
                $stmt=$con->prepare($sql);
                $stmt->bind_param('ss',$_POST['title'],$_POST['description']);
                $stmt->execute();
                $stmt->close();
            }
            
        break;
        case 'delete':
        
        break;
        case 'read':
            
            $data = '
            <div class="result">
                <table>
                    <tr>
                        <th>Title</th>
                        <th>Description</th>
                    </tr>';

            $fetch_query = "select * from app.add";
            $fetch_run = mysqli_query($con, $fetch_query);

            if(mysqli_num_rows($fetch_run) > 0)
            {
                while($row = mysqli_fetch_array($fetch_run))
                {
                    $data .= '
                    <tr style="border: 1px solid black; padding: 8px; text-align: center">
                        <td style="border: 1px solid black; padding: 8px; text-align: center">'.$row['title'].'</td>
                        <td style="border: 1px solid black; padding: 8px; text-align: center">'.$row['description'].'</td>
                        <td>
                            <button onclick="DeleteUser('.$row['id'].')">Delete</button>
                        </td>
                    </tr>';
                }
            }
            $data .= '
                </table>
            </div>';
            
            header('Content-Type: text/html');
            exit( $data );
        break;
        case 'ascd':
            
            $data = '
            <div class="result">
                <table>
                    <tr>
                    <th>Title</th>
                    <th>Description</th>
                    </tr>';

            $fetch_query = "select * from app.add order by title";
            $fetch_run = mysqli_query($con, $fetch_query);

            if(mysqli_num_rows($fetch_run) > 0)
            {
                while($row = mysqli_fetch_array($fetch_run))
                {
                    $data .= '
                    <tr style="border: 1px solid black; padding: 8px; text-align: center">
                        <td style="border: 1px solid black; padding: 8px; text-align: center">'.$row['title'].'</td>
                        <td style="border: 1px solid black; padding: 8px; text-align: center">'.$row['description'].'</td>
                        <td>
                            <button onclick="DeleteUser('.$row['id'].')">Delete</button>
                        </td>
                    </tr>';
                }
            }
            $data .= '
                </table>
            </div>';
            
            header('Content-Type: text/html');
            exit($data);
        break;
        
        case 'dscd':
        
        break;
    }
}
Метки: , , , ,