Ajax杂项-选看

最新推荐文章于 2024-09-13 18:48:07 发布
最新推荐文章于 2024-09-13 18:48:07 发布
阅读量58 收藏
点赞数
文章标签： php javascript 数据库 ViewUI
原文链接：http://www.cnblogs.com/zff193/p/4000298.html
版权

 

u      ajax的省市联动案例(如何动态的从服务器取得数据)

 

showCities.php页面

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<script type="text/javascript">

 

 

//创建ajax引擎

       function getXmlHttpObject(){

             

              var xmlHttpRequest;

              //不同的浏览器获取对象xmlhttprequest 对象方法不一样

              if(window.ActiveXObject){

                    

                     xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

                    

              }else{

 

                     xmlHttpRequest=new XMLHttpRequest();

              }

 

              return xmlHttpRequest;

 

       }

 

       var myXmlHttpRequest="";

 

function getCities(){

 

       myXmlHttpRequest=getXmlHttpObject();

 

       if(myXmlHttpRequest){

             

              var url="/ajax/showCitiesPro.php";//post

              var data="province="+$('sheng').value;

 

              myXmlHttpRequest.open("post",url,true);//异步方式

 

              myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 

              //指定回调函数

              myXmlHttpRequest.onreadystatechange=chuli;

 

              //发送

              myXmlHttpRequest.send(data);

       }

}

 

       function chuli(){

              if(myXmlHttpRequest.readyState==4){

                    

                     if(myXmlHttpRequest.status==200){

                           

                            //取出服务器回送的数据

 

                            var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");

                           

                            $('city').length=0;

                            var myOption=document.createElement("option");

                                  

                                   myOption.innerText="--城市--";

                                   //添加到

                                   $('city').appendChild(myOption);

 

                            //遍历并取出城市

                            for(var i=0;i<cities.length;i++){

                                  

                                   var city_name=cities[i].childNodes[0].nodeValue;

                                   //创建新的元素option

                                   var myOption=document.createElement("option");

                                   myOption.value=city_name;

                                   myOption.innerText=city_name;

                                   //添加到

                                   $('city').appendChild(myOption);

                            }

                     }

              }

       }

 

 

       //这里我们写一个函数

       function $(id){

              return document.getElementById(id);

       }

 

</script>

</head>

<body>

<select id="sheng" οnchange="getCities();">

    <option value="">---省---</option>

    <option value="zhejiang">浙江</option>

    <option value="jiangsu" >江苏</option>

    <option value="sichuan" >四川</option>

    </select>

    <select id="city">

    <option value="">--城市--</option>

    </select>

   

     <select id="county">

    <option value="">--县城--</option>

    </select>

 

</body>

</html>

 

**showCitiesProcess.php**

 

<?php

 

       //服务器端

 

       //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式

       header("Content-Type: text/xml;charset=utf-8");

       //告诉浏览器不要缓存数据

       header("Cache-Control: no-cache");

 

 

       //接收用户的选择的省的名字

 

       $province=$_POST['province'];

 

       file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);

       //如何在调试过程中，看到接收到的数据 。

       //到数据库去查询省有那些城市(现在先不到数据库)

       $info="";

       if($province=="zhejiang"){

             

              $info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";

       }else if($province=="jiangsu"){

              $info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";

       }

             

 

       echo $info;

 

?>

 

 

u      黄金价格波动图

 

glodPrice.php界面

<html>

       <head>

              <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

              <link href="Untitled-1.css" rel="stylesheet" type="text/css" />

              <script src="my.js" type="text/javascript"></script>

              <script type="text/javascript">

             

      

                     var myXmlHttpRequest;

 

                     function updateGoldPrice(){

                           

                           

                            myXmlHttpRequest=getXmlHttpObject();

 

                            if(myXmlHttpRequest){

                           

                                  

                                   //创建ajax引擎成功

                                   var url="glodPriceProcess.php";

                                   var data="city[]=dj&city[]=tw&city[]=ld";

 

                                   myXmlHttpRequest.open("post",url,true);

 

                                   myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 

                                   myXmlHttpRequest.onreadystatechange=function chuli(){

                                         

                                          //接收数据json

                                          if(myXmlHttpRequest.readyState==4){

                                                 if(myXmlHttpRequest.status==200){

                                                

                                                        //取出并转成对象数组

                                          var res_objects=eval("("+myXmlHttpRequest.responseText+")");

 

                                                        $('dj').innerText=res_objects[0].price;

                                                        $('tw').innerText=res_objects[1].price;

                                                        $('ld').innerText=res_objects[2].price;

 

                                                 }

                                          }    

 

                                   }

                                   myXmlHttpRequest.send(data);

 

 

                                  

 

                            }

 

                     }

 

                     //使用定时器 每隔5 秒

                     window.setInterval("updateGoldPrice()",5000);

             

                    

              </script>

       </head>

       <center>

              <h1>每隔5秒中更新数据(以1000为基数计算涨跌)</h1>

       <table border=0 class="abc">

              <tr><td colspan="3"><img src="gjhj_bj_tit.gif" /></td></tr>

              <tr ><td>市场</td><td>最新价格$</td><td>涨跌</td></tr>

              <tr><td>伦敦</td><td id="ld">788.7</td><td><img src="down.gif" />211.3</td></tr>

              <tr><td>台湾</td><td id="tw">854.0</td><td><img src="down.gif" />146.0</td></tr>

              <tr><td>东京</td><td id="dj">1791.3</td><td><img src="up.gif" />791.3</td></tr>

       </table>

</center>

</html>

 

glodPriceProcess.php

 

<?php

       //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式

       header("Content-Type: text/html;charset=utf-8");

       //告诉浏览器不要缓存数据

       header("Cache-Control: no-cache");

       //接收

       $cities=$_POST['city'];

       //随机的生成 三个 500-2000间数

       //$res='[{"price":"400"},{"price":"1000"},{"price":"1200"}]';

       $res='[';

       for($i=0;$i<count($cities);$i++){

              if($i==count($cities)-1){

                     $res.='{"cityname":"'.$cities[$i].'" ,"price":"'.rand(500,1500).'"}]';

              }else{

                     $res.='{"cityname":"'.$cities[$i].'" ,"price":"'.rand(500,1500).'"},';

              }

       }

       file_put_contents("d:/mylog.log",$res."\r\n",FILE_APPEND);

       echo $res;

?>

转载于:https://www.cnblogs.com/zff193/p/4000298.html

weixin_30466421
关注
面试杂项
chenpeng19910926的专栏
01-17 1541
延迟消息队列的实现方式---考察架构设计和逻辑思维性--架构设计----NO； cms 垃圾回收期的高阶—答不上来 持久带是否发生fullGC ok jps----ok jstack----ok jmap jhat------dump日志，jhat 不清楚 jstat----不清楚 dump文件中的分析 jstack Dump 日志文件中的线程状态 dump 文件里，值得关注的线程状态有：...
ajaxpicker是一款数据通过异步获取通常是AJAX的级联选择器
08-12
在JavaScript开发中，"其它杂项"标签可能意味着`ajaxpicker`虽不局限于某一特定领域，但它是对通用功能的一个补充，可以广泛应用于各种项目。这款插件的设计理念是轻量级和灵活性，允许开发者根据实际需求进行定制和...
AJax学习笔记
MADE_Y
12-19 306
ajax是什么？ ①      ajax(asynchronouse javascript and xml) 异步的javascript 和 xml ②      是7种技术的综合,它包含了七个技术( javascript xml xstlxhtml dom xmlhttprequest, css),  ajax  是一个粘合剂, ③      ajax是一个与服务端语言无关的技术.即
Ajax接收表单的调试，使用file_put_contents
qq403198745的博客
05-24 465
file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND); $province = $_POST[''province] //如何在调试过程中，看到接收到的数据 。 因为在ajax中，不知道怎么输出得到的数据，所以把数据保存到文件中调试。。
Jquery杂项--选看
weixin_30750335的博客
09-30 132
-------------------------------------------------------------------------------------------------- jquery框架 ① jquery是一个 javascript框架/javascript 库 为什么出现 javascript框架? 比如: 为了获取 i...
Ajax（一）——Ajax基础概念，HTTP头部（重点）
Erya Programming learning
05-11 472
Ajax一、概念Ajax的组成二、HTTP头部信息2.1 请求Request2.2 响应Response常用状态代码、描述 一、概念 Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是利用JavaScript脚本与XML数据实现客户端与服务器端进行异步通信的一种方法。 Ajax的组成 基于标准的HTML结构与CSS样式 通过DOM实现动态显示和交互 通过XML进行数据交换和处理 使用XMLHttpRequest插件进行异步通信 二、HTTP头部
jQuery和AJAX基础
u011927449的博客
01-20 231
jQuery和AJAX基础 jQuery 基础： 1.jQuery 选择器： 元素选择器：$("p")； #id 选择器：$("#test")； .class 选择器：$(".test")； ...
AJAX方法
weixin_30838873的博客
08-23 78
方法描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup() 为将来的 AJAX 请求设置默认值 $.ajaxTransport() 创建处理 Ajax 数据实际传送的对象 $.get(...
jQuery 杂项方法
zunguitiancheng的专栏
06-23 257
http://www.runoob.com/jquery/jquery-ref-misc.html jQuery 杂项方法 方法 描述 data() 向被选元素附加数据，或者从被选元素获取数据 each() 为每个匹配元素执行函数 get() 获取由选择器指定的 DOM 元素 i
AJAXCache是一款jQuery缓存插件可以为ajax方法扩展缓存功能
08-10
比如设置`cache: true`以启用缓存，以及可选的`cacheDuration`参数来指定缓存的有效时间（以毫秒为单位）。 ```javascript $.ajax({ url: 'your-api-url', type: 'GET', cache: true, // 启用缓存 ...
FineUI(ASP.NET UI控件) v4.1.3.rar
08-29
表格控件->杂项->右键菜单（全选复选框）。 杂项->自定义回发（__doPostBack）。 杂项->自定义回发（F.customEvent）。 杂项->文本框改变客户端事件。 修正行扩展列无法显示隐藏的问题（zy32002-6195）。 为Grid增加...
JavaScript开发-省市区联动选择器
08-12
这个组件的核心思想是，当用户在一个下拉框（通常是省份）中选择一个值时，另一个下拉框（城市）会根据所选的省份动态加载对应的市，接着在城市选择后，区县的下拉框也会随之更新。这种联动效果为用户提供了一种直观...
jQuery_04_遍历_Ajax_noConflict等其他方法
pre_eminent的JAVA学习园地
04-02 349
jQuery 遍历什么是遍历？jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞兄弟）。这种移动被称为对 DOM 进行遍历。图示解析：(绕口令时间)&lt;div&gt; 元素是 &lt;ul&gt; 的...
SEAFARING靶场渗透
最新发布
kknifek的博客
09-13 499
??echo '<??
Netty笔记03-组件Channel
weixin_46425661的博客
09-12 806
本文主要讲解Netty中的组件Channel、ChannelFuture和CloseFuture
Thinkphp5 + Swoole实现邮箱异步通知
Crazy_shark的博客
09-11 743
通过 Swoole 实现的异步任务处理机制，可以将耗时操作如发送邮件等操作放入后台异步执行，提升用户体验和系统性能。Swoole 的 Task 机制非常适合处理这种场景，结合 ThinkPHP 使得开发异步任务更加简单高效。
【网络安全】-rce漏洞-pikachu
weixin_65311462的博客
09-12 1093
由于应用程序在处理用户输入时未能正确验证、过滤或限制输入数据，导致hacker能通过网络在目标系统上执行任意代码或命令，从而完全控制受影响的系统。RCE漏洞是一种严重的安全漏洞类型，对系统安全构成重大威胁。
AJAX--- 前后端数据交互
08-24
AJAX (Asynchronous JavaScript and XML) 是一种用于前后端数据交互的技术。它允许在不刷新整个页面的情况下，通过异步方式向服务器发送请求并获取响应数据。 使用 AJAX 可以实现以下功能： 1. 发送异步请求：通过 JavaScript 创建 XMLHttpRequest 对象，并使用该对象发送 HTTP 请求到服务器。 2. 处理响应数据：一旦服务器返回响应，可以通过回调函数处理返回的数据。常见的数据格式包括 XML、JSON 或纯文本。 3. 更新页面内容：根据服务器返回的数据，可以使用 JavaScript 动态更新页面内容，而不需要刷新整个页面。这样可以提升用户体验并减少网络流量。 以下是一个简单的 AJAX 示例代码： ```javascript // 创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); // 指定请求的方法和 URL xhr.open('GET', 'https://api.example.com/data', true); // 设置回调函数处理响应 xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 处理服务器返回的数据 var response = xhr.responseText; console.log(response); // 更新页面内容 document.getElementById('result').innerHTML = response; } }; // 发送请求 xhr.send(); ``` 在上述示例中，我们使用 AJAX 发送了一个 GET 请求到 `https://api.example.com/data`，并设置了一个回调函数来处理服务器返回的数据。在回调函数中，我们将返回的数据打印到控制台，并将其更新到 id 为 `result` 的 HTML 元素中。 通过 AJAX，前端可以与后端进行实时的数据交互，从而实现更加动态和响应式的用户界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值