使用$就搞定，更新和PUT JSON回来时，按钮点击

Question

我需要帮助合并GET &投入

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

E.g.

• JSON包含作业广告列表，并在该广告的候选列表中。
• HTML PHP基本上只是查找JSON，然后做一个循环来输出状态&每个候选人的名字。
• 我还包括一个按钮，每个记录切换点击（更改文本和类）以指示候选人是否适合。
• 作为点击事件的一部分，我还希望通过将候选记录的“状态”从“活动”更改为“非活动”或反之亦然来更新服务器上的JSON。

注意：我不打算刷新页面......我想这一切都发生在后台。

---

我发现怎么做个别$就位相当多的例子（如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将与PARAMS这样叫：setstatus.php?active=true&id=23 然后你可以将该候选人的值更新到数据库中并返回带有确认的json（或不）！