zoukankan      html  css  js  c++  java
  • appendchild的两个正确用法以及ajax

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="gbk" />
            <title></title>
    
        </head>
        <body>
            <div id="placeholder"></div> 
    
            <script type="text/javascript">
                var placeholder = document.getElementById("placeholder");
                var description = "test";
                placeholder.innerHTML = description;
    
                // 或者
    
                var textNode = document.createTextNode('test123');
                placeholder.appendChild( textNode )
    
    
    
            </script>
        </body>
    </html>

    自己作业中用了一个ajax结果实现的过程中出现了好多的问题:一开始就是上面的append这个方法自己用错了,然后后来发现ajax没有办法加上数据实际上加上数据之后由于是form提交于是又被刷新没了,所以自己需要把form去掉之后再进行提交。

    反正中间出了好多的问题,但是这两个问题应该是最重要的问题了。自己最后慢慢解决后实现成这个样子:

    search<input type="text" name="search" id="inputsearch">
    <button id="btn">search</button>
    <!--    //为什么用onclick=function()不行么我都要哭了-->
    <!--</form>-->
    
    
    
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").on("click",function(){
    //            alert($("#inputsearch").val());
                $.ajax({
                    url: 'select.php',
                    type: 'get',
                    dataType: 'json',
                    data: {search: $("#inputsearch").val()},
                    success: function (result) {
    //                alert(result);
                        var json = eval(result);
                        var i = 0;
    //                alert(json[0]['bookid']);
                        for (i; i < json.length; i++) {
    //                    alert(result[0]);
    //                        var app=document.createElement("li");
    //                        app.innerHTML=json[i];
    //                        var father=document.getElementById("con1");
    //                        father.appendChild(app);
                            var app=document.createElement("tr");
                            var  html = "<td>" + json[i]['bookid'] + "</td>" + "<td>" + json[i]['class'] + "</td>" + "<td>" + json[i]['bookname'] + "</td>" + "<td>"+json[i]['press'] + "</td>" +"<td>"+ json[i]['year'] + "</td>" + "<td>" + json[i]['author'] + "</td>" + "<td>" + json[i]['price'] + "</td>" + "<td>" + json[i]['number'] + "</td>" + "<td>" + json[i]['surplus'] + "</td>";
                            var father = document.getElementById("selecttable");
                            app.innerHTML=html;
    //                    alert(html);
                            father.appendChild(app);
    //                        alert(json.length);
                        }
                    }
    
                });
            });
        });
    </script>
  • 相关阅读:
    POJ 1966 Cable TV Network
    POJ 3204 Ikki's Story I
    Codeforces Round #388 (Div. 2)
    BZOJ 后缀自动机四·重复旋律7
    扩展欧几里得 exGCD
    网络流模板 NetworkFlow
    BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊
    BZOJ 3224: Tyvj 1728 普通平衡树
    BZOJ 1070: [SCOI2007]修车
    BZOJ 4552: [Tjoi2016&Heoi2016]排序
  • 原文地址:https://www.cnblogs.com/zjunet/p/4559913.html
Copyright © 2011-2022 走看看