Question

我使用模态删除json文件数据删除。但我使用JavaScript将我的json文件数据查看为html文件。但我使用删除模式删除它无法正常工作的数据。现在我用来删除数据而没有任何警告信息。这是我查看数据的JavaScript代码。

var output = document.getElementById('output');
var ajaxhttp = new XMLHttpRequest();
var url = "form.json";
var xhttp = new XMLHttpRequest();
var details = '';
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

        //var response = JSON.parse(xhttp.responseText);

        var response = JSON.parse(xhttp.responseText);

                var output = '';

                output += "<table class='table table-bordered'>";
                output += "<tr><th scope='col'>id</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Action</th></tr>";

  for(x in response){

                    if(response[x].is_active == "1"){


                    output += "<tr><td>" + response[x].id + "</td><td>" + response[x].firstname + "</td><td>"+response[x].lastname+"</td><td>"+response[x].age+"</td><td><a href='edit.php?id="+response[x].id+"&firstname="+response[x].firstname+"&lastname="+response[x].lastname+"&age="+response[x].age+"' class='btn btn-primary btn-sm active' role='button' aria-pressed='true'>Edit</a><a href='update.php?id="+response[x].id+"&firstname="+response[x].firstname+"&lastname="+response[x].lastname+"&age="+response[x].age+"' class='btn btn-danger btn-sm' role='button' name='btnDelete' style='margin-left: 10px;'>Delete</a></td></tr>";

                    }        
                }        

                output += "</table> ";
               document.getElementById("output").innerHTML = output;

这是我的删除php函数来更新活动状态。

session_start();
$success = "<div class='alert alert-danger' role='alert'>User Deleted Successfully</div>";

$success = urlencode($success);

$myFile = "form.json";
//create empty array
$arr_data = array();

try{

//Get form data
$formdata = array(

    'id' => $_GET['id'],
    'firstname' => $_GET['firstname'],
    'lastname' =>  $_GET['lastname'],
    'age' => $_GET['age'],
    'is_active' => '0'

);

//get data from existing json file
$jsondata = file_get_contents($myFile);

//converts json data into array
$arr_data = json_decode($jsondata, true);

$updateKey = null;

foreach($arr_data as $key=>$value){
    if($value['id'] == $formdata['id']){
        $updateKey = $key;
    }
}

if($updateKey === null){

    array_push($arr_data, $formdata);
}
else{

    $arr_data[$updateKey] = $formdata;
}

//push user data to array
//array_push($arr_data, $formdata);

//convert update array to json
$jsondata = json_encode($arr_data);

//write json data into form.json file
if(file_put_contents($myFile, $jsondata)){

      header("location: index.php?success=$success");
}else{

    echo "error deleting";

}

}
catch(Exception $e){

echo 'Caught Exception ', $e->getMessage(), "\n";
}

我如何使用模型调用此php函数以使用JavaScript按钮删除数据。

Answer 1

使用删除数据打开弹出式窗口：

1）您必须在您的数据中添加id for delete链接，点击后会显示弹出窗口。

2）弹出窗口将显示删除确认按钮，当用户通过ajax点击删除调用时，控制器方法将从db / remote api等删除数据。

我已经展示了一个示例演示。您可以使用自己的

进行尝试

＆＃13;

$(".btn").click(function(){
 $("#myModal").show();
 $("#deletebtn").click(function(){
  // Your ajax call for controller to delete
 });
 //
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Small Modal</h2>
  
  <ul>
  <li id="1">Item 1  <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br>
  <li id="2">Item 2  <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br>
  <li id="3">Item 3 <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br>
  <li id="4">Item 4 <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br>
  </ul>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delete ?</p>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="deletebtn">Delete</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>


</body>
</html>

＆＃13;

php json模态弹出窗口无法正常工作

1 个答案: