一个ajax实例

html

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="renderer" content="webkit">
  6. <!--360,以webkit内核进行渲染-->
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  8. <!--以最新内核进行渲染。-->
  9. <meta http-equiv="Cache-Control" content="no-siteapp"/>
  10. <!--百度禁止转码-->
  11. <title>moyu demo</title>
  12. <meta name="keywords" content="demo 测试 魔芋">
  13. <meta name="description" content="魔芋的测试示例">
  14. <meta name="author" content="魔芋,[email protected],http://www.cnblogs.com/moyuling/">
  15. <meta name="robots" content="index,follow">
  16. <!--定义网页搜索引擎索引方式-->
  17. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  19. <style>
  20. </style>
  21. </head>
  22. <body>
  23. <script>
  24. function showUser(str){
  25. if(str ==""){
  26. document.getElementById("txtHint").innerHTML ="";
  27. return;
  28. }
  29. if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  30. xmlhttp =newXMLHttpRequest();
  31. }else{// code for IE6, IE5
  32. xmlhttp =newActiveXObject("Microsoft.XMLHTTP");
  33. }
  34. xmlhttp.onreadystatechange =function(){
  35. if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
  36. document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
  37. }
  38. }
  39. xmlhttp.open("GET","http://localhost/moyu.php?q="+ str,true);
  40. xmlhttp.send();
  41. }
  42. </script>
  43. </head>
  44. <body>
  45. <form>
  46. <select name="users" onchange="showUser(this.value)">
  47. <option value="">Select a person:</option>
  48. <option value="1">PeterGriffin</option>
  49. <option value="2">LoisGriffin</option>
  50. <option value="3">GlennQuagmire</option>
  51. <option value="4">JosephSwanson</option>
  52. </select>
  53. </form>
  54. <br>
  55. <div id="txtHint"><b>Person info will be listed here.</b></div>
  56. </body>
  57. </html>

php

  1. <?php
  2. $q=$_GET["q"];
  3. echo "$q";
  4. ?>

魔芋测试：

时间： 2024-12-19 20:29:56

一个ajax实例的相关文章

写一个ajax程序就是如此简单

写一个ajax程序就是如此简单 ajax介绍: 1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发技术.     2:基于web标准XHTML+CSS的表示:     3:使用 DOM进行动态显示及交互:     4:使用 XML 和 XSLT 进行数据交换及相关操作:     5:使用 XMLHttpRequest 进行异步数据查询.检索: 程序员应用ajax的途经: 1:.Net下的Ajax

【JavaScript】jQuery Ajax 实例 全解析

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :

jquery ajax实例教程和一些高级用法

jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ajax实例,后面会有一些ajax高级用法 query ajax的调用方式:jquery.ajax(url,[settings]),因为实际使用过程中经常配置的并不多,所以这里并没有列出所有参数,甚至部分参数默认值,就是最佳实践,根本没必要去自己定义,除非有特殊需求,如果需要所有参数,可以查看jq

Spring Boot Ajax实例

本文将展示如何使用jQuery.ajax将HTML表单请求发送到Spring REST API并返回JSON响应. 使用的工具 : Spring Boot 1.5.1.RELEASE Spring 4.3.6.RELEASE Maven 3 jQuery Bootstrap 3 1. 项目结构 创建一个标准的Maven项目:ajax-example,用于演示在Spring Boot中使用Ajax技术,搜索用户信息.其结构如下图所示 - 2. 项目依赖 文件:pom.xml <?xml versi

Ajax实例讲解与技术原理

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.解决传统的网页(不使用 AJAX)如果需要

基于JQuery框架的AJAX实例代码

<html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="./js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){

每天一个JavaScript实例-html5拖拽

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-html5拖拽</title> <style> #drop{ width:300px; height:200px; background-

jQuery Ajax 实例 ($.ajax、$.post、$.get)

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/ $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$

通过一个WPF实例进一步理解委托和事件

在前写过"浅谈C#中的委托"和"浅谈C#中的事件"两篇博客,内容有些抽象,似乎难以说明委托和事件的关系. 今天通过一个小程序来进一步说明二者的使用及联系. 首先新建一个WPF应用程序,取名TestDelegateAndEvent. 在.xmal中加入四个按钮,并添加Window_Loaded事件. 代码如下: <Window x:Class="TestDelegateAndEvent.MainWindow" xmlns="http