用ajax编辑表行(没有jquery)

时间:2013-05-04 16:03:24

标签: php javascript ajax html5

当我按下按钮时,我想用AJAX(无jquery)更改数字1,2和3的数字4,5和6。我该怎么做?因为这个代码我不能。

这是主要的.php:

<!DOCTYPE html>
<html>
    <head>
        <title>Hola Mundo con AJAX</title>
        <script>
            function loadXMLDoc()
            {
                var xmlhttp;
                if (window.XMLHttpRequest)
                {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {
                    // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange = function()
                { 
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","carga.php",true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td bgcolor="#D6D6D6">field 1</td>
                <td bgcolor="#D6D6D6">field 2</td>
                <td bgcolor="#D6D6D6">field 3</td>
            </tr>
            <tr>
                <div id="myDiv"><td>1</td>
                <td>2</td>
                <td>3</td></div>
            </tr>
        </table>
        <button onclick="loadXMLDoc()">Cambio</button>
    </body>
</html>

这是cargar.php:

<?php
echo "<td>4</td>
    <td>5</td>
    <td>6</td>"; 
?>

1 个答案:

答案 0 :(得分:0)

试试这个:

<!DOCTYPE html>
<html>
    <head>
        <title>Hola Mundo con AJAX</title>
        <script>
            function loadXMLDoc()
            {
                var xmlhttp;
                if (window.XMLHttpRequest)
                {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {
                    // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange = function()
                { 
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("myTable").tBodies[0].innerHTML+=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","carga.php",true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <table id="myTable">
            <tbody>
                <tr>
                    <td bgcolor="#D6D6D6">field 1</td>
                    <td bgcolor="#D6D6D6">field 2</td>
                    <td bgcolor="#D6D6D6">field 3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td></div>
                </tr>
            </tbody>
        </table>
        <button onclick="loadXMLDoc()">Cambio</button>
    </body>
</html>