Javascript 如何使用jquery以创建的HTML格式填充从服务器文件获得的JSON值？

仅供参考：我没有使用引导模式框弹出窗口

我有一个表，每行有一个按钮，在弹出模式框中显示详细信息

我正在附上

dashboard.html

、

modal.js

、

modal.css

和

modal.php

所需的部分代码

我缺乏jquery的概念，无法将元素添加到表单中，并通过PHP为返回的JSON文件赋值，然后将表单添加到

div tag class modal content

。此外，弹出模式框的CSS在按钮单击上不起作用

此外，我还想删除

类模式内容

中以前的html表单标记，因为每次新行单击都会弹出新表单，用户可以在其中编辑和更改行的值

通过查看下面的屏幕截图，您可以获得更清晰的图片

文件

dashboard.html

，此文件有按钮可调用

modal.js

<div class="row">
<div class="col span-4-of-4">                             

<div style="overflow-x:auto;">

<table class="display_table" id='main_lead_table' style="display: none;">

    <thead>                        
        <th>#</th>
        <th>Lead Id</th> 
        <th>Name</th>
        <th>Website</th>
        <th>Linkedin</th>
        <th>Lead Description</th>
        <th>Owner Notes</th>

        <?php

        if($_SESSION['Admin'] == '1'){

        ?>

        <th>Admin Notes</th>
        <th>Added By</th>

        <?php 

        }

        ?>

        <th>Last Contact Date</th>
        <th>Next Contact Date</th>
        <th>Lead Status</th> 
        <th>Details</th>

    </thead>

    <tbody id='leadTable'>                          

        <?php



        function getLeadAddedByName($id){

            include('./server/connection.php');

            $selectSQL = "SELECT UserName FROM `tbl_user_signup_info` WHERE User_Id = '$id' ";

            $result = $conn -> query ($selectSQL);

            $name = "";

            while($row = mysqli_fetch_array($result)){

            $name = $row['UserName'];

            }

            return $name;

        }

        include('./server/connection.php'); 

        $selectSQL = "SELECT * FROM `tbl_main_lead_info` ORDER BY Lead_Id";

        $result = $conn -> query ($selectSQL);

        $i = 1;

        while ($row = mysqli_fetch_array($result)) {                                

              printf( "<tr class='content'>
                            <td>%s</td>
                            <td>%s</td>

                            <td>%s</td> 
                            <td>%s</td>                                                         

                            <td>%s</td>
                            <td>%s</td>

                            <td>%s</td>
                            <td>%s</td>

                            <td>%s</td>                                                           
                            <td>%s</td>

                            <td>%s</td>
                            <td>%s</td>

                            <td><button id='%d' name='leadidclick' value='%d' > View </button></td>                                                                            
                        </tr>",

                        $i,
                        $row['Lead_Id'], 
                        $row['FirstName']." ".$row['LastName'],
                        $row['Website'],
                        $row['Linkedin'],
                        $row['LeadDescription'],
                        $row['OwnerNotes'],                                                       
                        $row['AdminNotes'],

                        getLeadAddedByName($row['LeadAddedBy'])."<br>Date/Time: ".$row['LeadAddedOn'],                                                                                           

                        date('d-m-Y', strtotime($row['LastContactDate'])),
                        date('d-m-Y', strtotime($row['NextContactDate'])),                                                          
                        $row['LeadStatus'],

                        $row['Lead_Id'],                                                                   
                        $row['Lead_Id'],

                        );

                        $i = $i+1;

                    }

        ?>                                       

    </tbody>

</table>
</div>
</div>
</div>

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>

    <p>This is Modal Box</p>                                        

  </div>

</div> 

用于显示模态的文件

modal.css

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@特鲁普蒂·巴拉德 对于模式框弹出显示，我收到此控制台错误，并且我无法弹出模式框（我使用的是没有引导的模式框）

modal.js:61未捕获类型错误：$（…）。modal不是函数
at Object.success（modal.js:61）
at c（jquery-3.4.1.min.js:2）
在Object.fireWith[as resolveWith]（jquery-3.4.1.min.js:2）
在l（jquery-3.4.1.min.js:2）
在XMLHttpRequest。（jquery-3.4.1.min.js:2）

在文件

dashboard.html

中，您必须在型号代码中指定div

&时代；
这是模式框

在ajax中

 $.ajax({

        type: "POST",
        url: './server/modal.php',
        data: {

          'leadid': leadid

        },        
        success: function(data){

           var result = $.parseJSON(data);
           console.log(result);

           console.log(result.length)
          //Modal Box to POP UP HERE

            $('#formapp').empty(); // first empty division content 
            var form=''; //declare var
           $.each(result, function(key, value) {

                    form = $("<form action='' method='POST'></form>").attr("id", value['Lead_Id']);


                   //This value assigning based on JSON Key value pair is also not working


                    form.append('<label>Lead Id: </label><input type="text" name="leadid" value="'+value['Lead_Id']+'">');

                    form.append('<label>Lead Name: </label><input type="text" name="leadname" value="'+value['FirstName']+" "+value['LastName']+'">');

                    form.append('<label>Company: </label><input type="text" name="company" value="'+value['Company']+'">');


                    form.append('<input type="button" value="button">'); 

                    i = i + 1;

                });


          $( "#formapp" ).html( form );

          //This change in CSS is not working

          $('#myModal').show();         


        }

      });

$.ajax({
类型：“POST”，
url:“./server/modal.php”，
数据：{
“leadid”：leadid
},        
成功：功能（数据）{
var result=$.parseJSON（数据）；
控制台日志（结果）；
console.log（result.length）
//要在此处弹出的模式框
$（'#formapp'）.empty（）；//第一个空分区内容
变量形式=“”；//声明变量
$。每个（结果、函数（键、值）{
form=$（“”）.attr（“id”，值['Lead_id'）；
//基于JSON键值对的此值分配也不起作用
表单.append（'Lead Id:'）；
表单。追加（'潜在客户名称：'）；
格式。附加（“公司”）；
格式。附加（“”）；
i=i+1；
});
$（#formapp”）.html（表格）；
//CSS中的这种更改不起作用
$（'#myModal'）.show（）；
}
});

或者，对于单个记录，不需要

$.each（）

只需使用

result[0]['Lead\u Id']

---

另外，

$form

也被视为参考。在jquery中，使用

var

在文件

dashboard.html

中声明变量，您必须在模型代码ex.

&时代；
这是模式框

在ajax中

 $.ajax({

        type: "POST",
        url: './server/modal.php',
        data: {

          'leadid': leadid

        },        
        success: function(data){

           var result = $.parseJSON(data);
           console.log(result);

           console.log(result.length)
          //Modal Box to POP UP HERE

            $('#formapp').empty(); // first empty division content 
            var form=''; //declare var
           $.each(result, function(key, value) {

                    form = $("<form action='' method='POST'></form>").attr("id", value['Lead_Id']);


                   //This value assigning based on JSON Key value pair is also not working


                    form.append('<label>Lead Id: </label><input type="text" name="leadid" value="'+value['Lead_Id']+'">');

                    form.append('<label>Lead Name: </label><input type="text" name="leadname" value="'+value['FirstName']+" "+value['LastName']+'">');

                    form.append('<label>Company: </label><input type="text" name="company" value="'+value['Company']+'">');


                    form.append('<input type="button" value="button">'); 

                    i = i + 1;

                });


          $( "#formapp" ).html( form );

          //This change in CSS is not working

          $('#myModal').show();         


        }

      });

$.ajax({
类型：“POST”，
url:“./server/modal.php”，
数据：{
“leadid”：leadid
},        
成功：功能（数据）{
var result=$.parseJSON（数据）；
控制台日志（结果）；
console.log（result.length）
//要在此处弹出的模式框
$（'#formapp'）.empty（）；//第一个空分区内容
变量形式=“”；//声明变量
$。每个（结果、函数（键、值）{
form=$（“”）.attr（“id”，值['Lead_id'）；
//基于JSON键值对的此值分配也不起作用
表单.append（'Lead Id:'）；
表单。追加（'潜在客户名称：'）；
格式。附加（“公司”）；
格式。附加（“”）；
i=i+1；
});
$（#formapp”）.html（表格）；
//CSS中的这种更改不起作用
$（'#myModal'）.show（）；
}
});

或者，对于单个记录，不需要

$.each（）

只需使用

result[0]['Lead\u Id']

---

另外，

$form

也被视为参考。在jquery中，使用

var

声明变量

为什么不在modal.php文件中生成表单并返回html，替换模态体中的html？我认为使用via JSON会很好，但您建议的是其他任务，但现在我需要弹出模态框，每次在

模态内容

类中，通过删除以前存在的表单标记，jquery生成新表单。我想您不明白我在说什么。我想你需要ajax+bootstrap模式。我没有使用bootstrap为什么你不在modal.php文件中生成表单并返回html，替换模态体中的html？我认为使用via JSON会很好，但您建议的是其他任务，但现在我需要弹出模态框，每次在

模态内容

类中，通过删除以前存在的表单标记，jquery生成新表单。我想您不明白我在说什么。我想你需要ajax+引导模式。我不是为了你的努力而使用引导模式，让我检查一下。很抱歉延迟确认，因为time diffmodal框弹出窗口不起作用，而且HTML表单输入元素没有从收到的JSON中获得正确的值，感谢您在每次单击新按钮时解决HTML表单更新问题。@RINKUYADAV使用此方法

$（'#myModal'）。modal（'show'）对于模态show，我之前使用过，但让我们看看。它正在引发控制台错误
未捕获类型错误：$（…）。模式不是函数。因为我没有使用引导css.Ok。你可以试试这个
$（'#myModal'）.modal（）或
$（'#myModal'）.show（）它可能会帮助你感谢你的努力
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>

    <p>This is Modal Box</p>                                        
    <div id="formapp">
    </div>
  </div>

</div> 

 $.ajax({

        type: "POST",
        url: './server/modal.php',
        data: {

          'leadid': leadid

        },        
        success: function(data){

           var result = $.parseJSON(data);
           console.log(result);

           console.log(result.length)
          //Modal Box to POP UP HERE

            $('#formapp').empty(); // first empty division content 
            var form=''; //declare var
           $.each(result, function(key, value) {

                    form = $("<form action='' method='POST'></form>").attr("id", value['Lead_Id']);


                   //This value assigning based on JSON Key value pair is also not working


                    form.append('<label>Lead Id: </label><input type="text" name="leadid" value="'+value['Lead_Id']+'">');

                    form.append('<label>Lead Name: </label><input type="text" name="leadname" value="'+value['FirstName']+" "+value['LastName']+'">');

                    form.append('<label>Company: </label><input type="text" name="company" value="'+value['Company']+'">');


                    form.append('<input type="button" value="button">'); 

                    i = i + 1;

                });


          $( "#formapp" ).html( form );

          //This change in CSS is not working

          $('#myModal').show();         


        }

      });