javascript - 单击按钮时使用 $.Ajax 获取、更新和将 JSON 放回服务器

Question

我需要帮助将 GET 和 PUT 合并到一个函数中

我希望编写一些在单击按钮时执行的 JQuery。我想做的是使用 AJAX...从服务器获取 JSON 文件，查找其中的值，更改值，然后将其放回服务器。

例如

• JSON 包含招聘广告列表，以及该广告的候选人列表。
• HTML PHP 基本上只是查找 JSON，然后循环输出每个候选人的状态和姓名。
• 我还在每条记录中添加了一个按钮，用于切换点击(更改文本和类别)以指示候选人是否合适。
• 作为点击事件的一部分，我还想更新服务器上的 JSON，方法是将该候选人记录的“状态”从“事件”更改为“不活动”，反之亦然。

注意:我根本不想刷新页面...我希望这一切都在后台进行。

---

我已经找到了很多关于如何处理单个 $.ajax 位(例如 GET、PUT 等)的示例，但我似乎无法将它们放在一起......

JSON:

{
    "ads": 
        [{
            "id": "12345678",
            "hirername": "Demo Bar",
            "candidates": 
                [{
                    "status": "active",
                    "name": "Gregory Jones",
                    "dist": "Richmond (4km away)",
                    "exp1": "Barman at City Bar for 2 years",
                    "avail1": "Mon to Fri - Morning, Evening & Night",
                    "visa": "Australian Citizen",
                    "call": "0413451222"
                },
                {
                    "status": "active",
                    "name": "Jackie Linton",
                    "dist": "Box Hill (13km away)",
                    "exp1": "Bar girl at Collins Bar for 1 year",
                    "avail1": "Mon to Fri - Morning & Evening",
                    "visa": "Working holiday visa",
                    "call": "0413456555"
                }]
        }]
}

脚本:

<script>
    $(document).ready(function(){   

        // Bind click event on all the buttons inside .card
        $(".card button").click(function() {

            // Check if the clicked button has class `btn_s`
            if ($(this).hasClass('btn_s')) {

                // Update the button text & class (styling)
                $(this).html('<font style="color: #666;">Marked as not suitable. </font>Undo?').toggleClass('btn_s notsu');

                // Define the URL
                var URL = "test.json";
                // Get the Json
                $.ajax({
                    url: URL,
                    type: 'GET',
                    dataType: 'json',
                    success: function(result) {
                        // Step 1: Find the value of 'status' within the JSON for the applicable record. (lookup by name)

                        // Step 2: Change the value of status - Toggle between 'active' and 'inactive'

                        // Step 3. Save the JSON changes - PUT back to the server.
                    }
                });

            }   else {

                // Update the button text & class (styling)
                 $(this).html('Mark as not suitable?').toggleClass('notsu btn_s');

                // Define the URL
                var URL = "test.json";
                // Get the Json
                $.ajax({
                    url: URL,
                    type: 'GET',
                    dataType: 'json',
                    success: function(result) {
                        // Step 1: Find the value of 'status' within the JSON for the applicable record. (lookup by name)

                        // Step 2: Change the value of status - Toggle between 'active' and 'inactive'

                        // Step 3. Save the JSON changes - PUT back to the server.
                    }
                });

            }
        });
    });
</script>

PHP/HTML(按钮):

<?php

    $json = file_get_contents('test.json');
    $json = json_decode($json, true);

        foreach ($json['ads'] as $ad){  

            foreach($ad['candidates'] as $data){
                echo '<div class="card">';
                echo '<b>Status: </b>';
                echo '<span id="status">' . $data['status'] . '</span><br>';
                echo '<b>Name: </b>';
                echo '<span>' . $data['name'] . '</span><br>';
                echo '<br><button class="btn_s" name ="' . $data['name'] . '" id="un_btn" >Mark as inactive?</button>';
                echo '</div><br>';
            }
        }
?>

预先感谢您的帮助:-)

干杯，罗布。

Answer 1

首先，考虑为候选人设置一个ID。

为按钮设置“data-id”和“data-status”属性，然后用它调用一个 url。即:

PHP(生成按钮的行)

echo '<br><button data-id="'. $data['id'].'" data-status="'. $data['status'].'" class="btn_s" name ="' . $data['name'] . '" id="un_btn" >Mark as inactive?</button>';

脚本:

$(".card button").click(function() {
    var isactive=$(this).data("status") == "active";
    var cid=$(this).data("id");
    var URL = "setstatus.php"; 
    $.ajax({
        url: URL,
        data: {active: isactive,id:cid},
        type: 'GET',
        dataType: 'json',
        success: function(result) {
            // Set the row as active/inactive.
        }
    });
}

文件 setstatus.php 将使用如下参数调用:setstatus.php?active=true&id=23然后您可以将该候选人的值更新到数据库中并返回一个带有确认(或不确认!)的 json