通过jQuery-jQuery-mobile在html中将表追加到div中的代码_Jquery_Html_Ajax_Jquery Mobile_Html Table

通过jQuery-jQuery-mobile在html中将表追加到div中的代码

jquery html ajax jquery-mobile

通过jQuery-jQuery-mobile在html中将表追加到div中的代码,jquery,html,ajax,jquery-mobile,html-table,Jquery,Html,Ajax,Jquery Mobile,Html Table,我试图通过jQueryAjax附加html代码我有一个html表单（jQueryMobile），通过jQueryAjax点击submit按钮时将数据发送到PHP文件 PHP文件，返回JSON数据，如下所示： {"employee":[{"Name":"Mario","Surname":"K","ID":"234"}, {"Name":"Helen","Surname":"Smith","ID":"546"]} 我想在“yourtable”div上创建一个包含JSON数据的表。这是我的代码：

我试图通过jQueryAjax附加html代码

我有一个html表单（jQueryMobile），通过jQueryAjax点击submit按钮时将数据发送到PHP文件

PHP文件，返回JSON数据，如下所示：

{"employee":[{"Name":"Mario","Surname":"K","ID":"234"}, {"Name":"Helen","Surname":"Smith","ID":"546"]}

我想在“yourtable”div上创建一个包含JSON数据的表。这是我的代码：

<script>
 $(document).ready(function(){
  $("#addSubmit").click(function(){
      var postData = $("#addForm").serialize();
      var action = "add";
      $.ajax({
            type:'post',
            url:"http://10.0.2.2/phpAndAjax/index-handler.php",
            crossDomain : true,
            data: {postData: postData, action: action},
            success: function() {

                var action = "show";
                 $.ajax({
                    type:'post',
                    url:"http://10.0.2.2/phpAndAjax/index-handler.php",
                    crossDomain : true,
                    dataType: 'json',
                    data: {action: action},
                    success: function(data) {
                        alert(JSON.stringify(data));

                        $('#your-table').append('<table>');
                        $('#your-table').append('<tr>');
                            $('#your-table').append('<th> Name </th>');
                            $('#your-table').append('<th> Surname </th>');
                            $('#your-table').append('<th> ID </th>');
                            $('#your-table').append('<th> E-mail </th>');
                        $('#your-table').append('</tr>');

                              $.each(data, function(i, item) {

                                    var Name=item.name;
                                    $('#your-table').append('<tr>');
                                    $('#your-table').append('<th>'+Name+'</th>');
                                    $('#your-table').append('</tr>');

                              });
                            $('#your-table').append('</table>');
                            }
                     });
                }
          });
      });
 });
</script>

</head>
<body>


                    <!--Main page -->
<div data-role="page" id="main" >
    <div data-role="header">
        <h1>Employee management system</h1>
    </div>

    <div data-role="main" class="ui-content">
        <br>
        <form id="select_form" method="POST">
            <p>
                <label id="action">Please, select one of the following</label> <br>
                <br> 
                <a href="#searchEmployee" data-role="button">Search an employee 
                    (Edit and Delete)</a> 
                <a href="#addEmployee" data-role="button">Add Employee</a>
            </p>
        </form>
        <div id="your-table"></div>
    </div>
</div>


<!-- Add employee page -->
<div data-role="page" id="addEmployee">
    <div data-role="header">
        <h2>Add an employee</h2>
    </div>

    <div data-role="main" class="ui-content">
        <form id="addForm" method="post">
            <p>
                <label for="name">Firstname</label> 
                <input id="name" name="name" type="text" class="required" /> <br>
            </p>

            <p>
                <label for="surname">Lastname</label> <input id="surname"
                    name="surname" type="text" class="required" /> <br>
            </p>

            <p>
                <label for="id">ID</label> 
                <input id="id" name="id" type="text" class="required"  /> <br>
            </p>

            <p>
                <input type="submit" name="submit" id="addSubmit" value="Add employee"> 
            </p>
        </form>
    </div>
</div>


$（文档）.ready（函数（）{
$（“#添加提交”）。单击（函数（）{
var postData=$（“#addForm”）.serialize（）；
var action=“添加”；
$.ajax({
类型：'post'，
url:“http://10.0.2.2/phpAndAjax/index-handler.php",
跨域：是的，
数据：{postData:postData，action:action}，
成功：函数（）{
var action=“show”；
$.ajax({
类型：'post'，
url:“http://10.0.2.2/phpAndAjax/index-handler.php",
跨域：是的，
数据类型：“json”，
数据：{action:action}，
成功：功能（数据）{
警报（JSON.stringify（数据））；
$（“#您的表”）。附加（“”）；
$（“#您的表”）。附加（“”）；
$（'your table'）。追加（'Name'）；
$（“#您的表”）。追加（‘姓氏’）；
$（'your table'）。追加（'ID'）；
$（'your table'）。追加（'E-mail'）；
$（“#您的表”）。附加（“”）；
$。每个（数据、功能（i、项）{
var Name=item.Name；
$（“#您的表”）。附加（“”）；
$（“#您的表”）。追加（“”+Name+“”）；
$（“#您的表”）。附加（“”）；
});
$（“#您的表”）。附加（“”）；
}
});
}
});
});
});
员工管理系统



请选择以下选项之一




添加员工

名字




姓氏



身份证件

脚本正确地发出警报，但未创建表。我尝试了一些简单的方法，比如只添加一个段落，但都不起作用

非常感谢您的帮助。

jQuery希望

append

的参数是整个DOM元素。不仅仅是其中的一部分

例如：

缺少关闭标记。与

相同，它也被附加到

$（“#您的表”）

（不是在表内，而是作为同级元素附加在它旁边），但您希望它被附加到

$（“#您的表”）

使其工作的最简单方法是准备整个表HTML结构并一次性附加它。像这样：

var tableHtml = '<table>';
tableHtml += '<tr>';
tableHtml += '<th> Name </th>';
tableHtml += '<th> Surname </th>';
tableHtml += '<th> ID </th>';
...
tableHtml += '</table>';
$('#your-table').append(tableHtml);

var tableHtml=''；
tableHtml+=''；
tableHtml+='Name'；
tableHtml+=‘姓氏’；
tableHtml+='ID'；
...
tableHtml+=''；
$（“#您的表”）.append（tableHtml）；

我是否需要添加任何特定的jquery库？因为我试过了，但什么也没发生。如果你说你的

alert（）

有效，那么你已经需要jQuery库了。（因为Ajax调用通过

jQuery.Ajax（）

成功）尝试放置

$（“#您的表”）.append（“它工作！”）就在您的警报（）之后。
。如果这样做有效，那么尝试查看tableHtml
中生成的HTML内容，并确保其有效。仍然不起作用。触发jquery ajax的#addSubmit按钮不在#main中（我想在这里显示表）。它在第#页的addEmployee中。这会导致任何问题吗？我现在在html中添加了代码。我是对的…问题不在于表的代码，而在于#主页加载。。。