Javascript 使用$.Ajax获取、更新&；单击按钮时将JSON放回服务器

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

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

例如

• JSON包含职位广告列表，其中包含该广告的候选人列表
• HTML-PHP基本上只是查找JSON，然后执行循环以输出每个候选对象的状态和名称
• 我还为每条记录添加了一个按钮，用于切换单击（更改文本和类），以指示候选人是否合适
• 作为点击事件的一部分，我还想通过将候选记录的“状态”从“活动”更改为“非活动”，或者反之亦然，来更新服务器上的JSON

注意：我根本不想刷新页面。。。我希望这一切都发生在幕后

---

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

JSON:

脚本：

<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>

$(".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.
        }
    });
}

$（文档）.ready（函数（）{
//卡中所有按钮上的绑定单击事件
$（“.card按钮”）。单击（函数（）{
//检查单击的按钮是否具有“btn\u”类`
if（$（this）.hasClass（'btn_s'））{
//更新按钮文本和类（样式）
$（this.html（'标记为不合适的.Undo？'））.toggleClass（'btn_s notsu'）；
//定义URL
var URL=“test.json”；
//获取Json
$.ajax({
url:url，
键入：“GET”，
数据类型：“json”，
成功：功能（结果）{
//步骤1：在JSON中找到适用记录的“status”值。（按名称查找）
//步骤2：更改状态值-在“活动”和“非活动”之间切换
//步骤3.保存JSON更改-放回服务器。
}
});
}否则{
//更新按钮文本和类（样式）
$（this.html（'标记为不合适？'））.toggleClass（'notsu btn_s'）；
//定义URL
var URL=“test.json”；
//获取Json
$.ajax({
url:url，
键入：“GET”，
数据类型：“json”，
成功：功能（结果）{
//步骤1：在JSON中找到适用记录的“status”值。（按名称查找）
//步骤2：更改状态值-在“活动”和“非活动”之间切换
//步骤3.保存JSON更改-放回服务器。
}
});
}
});
});

PHP/HTML（按钮）：

提前感谢您的帮助：-）

干杯，

---

Rob。

< P>首先，考虑为考生设置ID。

将“数据id”和“数据状态”属性设置为按钮，然后使用该属性调用url。 即：

PHP（生成按钮的行）

将使用如下参数调用文件setstatus.php：

setstatus.php？active=true&id=23

---

然后，您可以将该候选者的值更新到数据库中，并返回一个带有确认（或不确认！）的json

谢谢Rayon-关于我的问题，您认为我可以做得更好吗？谢谢。。。这样更好吗？

<?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>';
            }
        }
?>

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.
        }
    });
}