Ajax 请求并添加到页面元素

jquery添加子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax请求Demo</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered">
    <tr>
    <td>用户名：</td>
    <td><input type="text" name="username" id="username">
    </td>
    </tr>
    <tr>
    <td>年  龄:</td>
    <td><input type="text" name="age" id="age"></td></tr>
    <tr><td colspan="2" class="text-center"><input type="button" id="reg" name="reg" value="注册"></td></tr>
</table>

<table class="table table-bordered" id="tbody">
    <tr><td>用户名</td><td>年龄</td></tr>
    
</table>
</div>

<!--            <script>
                // 添加订单显示
                $('#reg').click(function(){
                    var str = "<tr><td>用户名</td><td style='text-align: right;'>年龄</td></tr>";
                    $('#tbody').append(str);
                // alert(111);
                })
            </script> -->

            <script>
                $("#reg").click(function(){
                        var username=$("#username").val();
                        var age=$("#age").val();
                            $.ajax({ 
                                type:"post",
                                url: "http://localhost/conn.php", 
                                data: {username:username,age:age}, 
                                success: function(data,status){
                                    console.log("数据"+data+"\n状态"+status);
                                }});
                        var str = "<tr><td>"+username+"</td><td>"+age+"</td></tr>";
                         $('#tbody').append(str);   
                    })
            </script>

</body>
</html>

最后编辑于：2017.12.04 06:30:02

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

Ajax 请求并添加到页面元素

推荐阅读更多精彩内容