zoukankan      html  css  js  c++  java
  • Ajax入门例子

              在customer.php的文件中,代码如下:


    <html>
    <head>


    <script type="text/javascript">
    function showCustomer(str)
    {
     var xmlhttp;  


    if (str=="")
      {
      document.getElementById("txtHint").innerHTML="";
      return;
      }
    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("txtHint").innerHTML = xmlhttp.responseText;
        }
      }
       xmlhttp.open("GET","/test/getcustomer.php?q="+str,true);//这里的url是指你的文件路径,例如,我的customer.php和getcustomer.php都在www下的test文件                                                                                                          目录下,所以就写成了此种形式
       xmlhttp.send();
    }
    </script>


    </head>
    <body>
    <form action="" style="margin-top:15px;"> 
    <label>请选择一位客户:
    <select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
    <option value="APPLE">Apple Computer, Inc.</option>
    <option value="BAIDU ">BAIDU, Inc</option>
    <option value="Canon">Canon USA, Inc.</option>
    <option value="Google">Google, Inc.</option>
    <option value="Nokia">Nokia Corporation</option>
    <option value="SONY">Sony Corporation of America</option>
    </select>
    </label>
    </form>
    <br />
    <div>客户信息将在此处列出 ...</div>
    <div id="txtHint"></div>


    </body>
    </html>




      在getcustomer.php的文件中,代码如下:


    <?php
    $q=$_GET["q"];


    $con = mysql_connect('localhost', 'root', 'root');
    if (!$con)
     {
     die('Could not connect: ' . mysql_error());
     }


    mysql_select_db("test", $con);


    $sql="SELECT * FROM user1 WHERE  firstname= '".$q."'";
    //var_dump($sql);
    $result = mysql_query($sql);


    echo "<table border='1'>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Hometown</th>
    <th>Job</th>
    </tr>";
    while($row = mysql_fetch_array($result))
    {
     echo "<tr>";
     echo "<td>" . $row['firstname'] . "</td>";
     echo "<td>" . $row['lastname'] . "</td>";
     echo "<td>" . $row['age'] . "</td>";
     echo "<td>" . $row['hometown'] . "</td>";
     echo "<td>" . $row['Job'] . "</td>";
     echo "</tr>";
    }
    echo "</table>";


    mysql_close($con);
    ?>
    //数据库是test, 表是user1,一共有五个字段,分别是firstname,lastname,age,hometown和Job


    最后能实现页面无刷新字段的变化的效果!刚学Ajax,感觉很不错!
  • 相关阅读:
    CreateDatabase is not supported by the provider
    SQLServer 查看耗时较多的SQL语句(转)
    Unity下调试ToLua(基于IDEA和VSCode)
    《Javascript高级程序设计》读书笔记——函数与闭包
    《Javascript高级程序设计》读书笔记——继承与原型链
    《Javascript高级程序设计》读书笔记——构造函数与原型
    客户端地图内寻路总结与优化
    《程序员的自我修养》读书笔记 第二章 编译和链接
    客户端GUI结构学习总结
    关于浏览器的页面渲染
  • 原文地址:https://www.cnblogs.com/cmderq/p/9130924.html
Copyright © 2011-2022 走看看