ajax的一些实例

最新推荐文章于 2021-06-20 01:00:35 发布
最新推荐文章于 2021-06-20 01:00:35 发布
阅读量638 收藏
点赞数
文章标签： ajax javascript html email 数据库 互联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youshini/article/details/6499983
版权

两种引用方法：

Code:
  1. //1   
  2.   <Script Language ="JavaScript">  
  3.             window.alert("欢迎使用脚本语言!");    
  4.    </Script>     
  5. //2   
  6.  <Script Language ="JavaScript" src="init.js"></Script>    

//========1。借助javaScript实现丰富的页面交互效果（采用滚动字幕<marquee>组件）。

Code:
  1. <body>  
  2.     <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollDelay=110 >  
  3.     <a href="" target=_blank>  
  4.     <font color=#ff0000>热点新闻:Ajax成为互联网技术中的新宠</font>  
  5.     </a></marquee><br>  
  6. </body>  

//=========2.验证提交的内容。其中使用DOM来获取form中的数据。

Code:
  1.   
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3. <html>  
  4.   <head>  
  5.     <title>3-3.html</title>  
  6.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  7.     <Script Language="JavaScript">  
  8.   
  9.             function checkValid()   
  10.             {   
  11.                 var tmp1,temp2,str1;   
  12.                 //获得text1的值   
  13.                 str1 = document.myform.email.value;                
  14.                 //获取第一个@的位置   
  15.                 tmp1 = str1.indexOf('@');   
  16.                 //获取最后一个@的位置   
  17.                 tmp2 = str1.lastIndexOf('@');   
  18.                 if(str1.length == 0)   
  19.                     //不合法，字符串为空串   
  20.                     window.alert("请输入内容后再提交");                 
  21.                 else if(tmp1 < 0)   
  22.                     //不合法，字符串中不包含@字符   
  23.                     window.alert("字符串中不包含@");   
  24.                 else if(tmp1 == 0 || tmp1 == str1.length-1)   
  25.                     //不合法，@字符出现的位置不对   
  26.                     window.alert("@字符出现的位置不对");   
  27.                 else if(tmp1 != tmp2)   
  28.                     //不合法，@字符出现了不止一个   
  29.                     window.alert("@字符出现了不止一个");   
  30.                 else   
  31.                     //合法的Email地址   
  32.                     alert("E-mail地址合法有效");                     
  33.             }              
  34.     </Script>  
  35.        
  36.   </head>  
  37.   <body>  
  38.       <form name="myform">  
  39.         请输入您的E-mail地址：<br>  
  40.         <input type=text value="" name="email">  
  41.         <p><input type=button value="提交"name="ok"onclick="checkValid()">  
  42.       </form>  
  43.   </body>  
  44. </html>  

//---------3.列表框的事件驱动---------------------

Code:
  1.   
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  3. <html>   
  4.   <head>   
  5.     <title>3-4.html</title>   
  6.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  7.     <Script Language="JavaScript">   
  8.         //当列表框中的被选中选项发生改变时调用的函数   
  9.         function change()   
  10.         {   
  11.             //依据选择的不同选项，显示不同的作者信息   
  12.             switch(myform.option1.value)   
  13.             {   
  14.                 case "s1":   
  15.                     myform.txt1.value="张桂元";   
  16.                     break;   
  17.                 case "s2":   
  18.                     myform.txt1.value="贾燕枫";   
  19.                     break;   
  20.                 case "s3":   
  21.                     myform.txt1.value="张宇翔";   
  22.                     break;   
  23.             }          
  24.         }   
  25.     </Script>   
  26.   
  27.   </head>   
  28.      
  29.   <body>   
  30.     <P>书籍作者信息查询：   
  31.     <form name="myform">   
  32.       <SELECT type="select" name="option1" οnchange="change()">    
  33.         <OPTION selected value="s0"><-----请选择-----></OPTION>   
  34.         <OPTION value="s1">Web 2.0开发入门与实践（Java）</OPTION>   
  35.         <OPTION value="s2">Web 2.0开发入门与实践（.NET）</OPTION>   
  36.         <OPTION value="s3">Ajax核心技术</OPTION>   
  37.       </SELECT>   
  38.       <Input type="text" name="txt1" value="作者信息">   
  39.     </form>   
  40.   </body>   
  41. </html>  

   效果:在列表框中选择不同的选项，在文本框中将显示该书作者的相应信息。

//4-------------------onload页面载入和onunload卸载时发生---------

Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. <html>   
  3.   <head>   
  4.     <title>3-5.html</title>   
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  6.         <Script Language="JavaScript">   
  7.         function init()   
  8.         {   
  9.             alert("欢迎光临！");   
  10.         }   
  11.         function finish()   
  12.         {   
  13.             alert("下次再来！");   
  14.         }   
  15.     </Script>   
  16.    </HEAD>   
  17.    <BODY OnLoad="init()" OnUnLoad="finish()">   
  18.    </BODY>   
  19.   
  20. </html>  

    可以通过onload事件来与数据库交互。

//-------------------5 onfoucs事件和onblur事件  焦点事件-------------------

Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. <html>   
  3.   <head>   
  4.     <title>3-6.html</title>   
  5.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  6.         <script language="JavaScript">   
  7.             function begin()   
  8.             {   
  9.                 usrId.value="";   
  10.             }   
  11.             function end()   
  12.             {   
  13.                 alert("请确认输入的信息，谢谢！");   
  14.             }   
  15.         </script>    
  16.   </head>     
  17.   <body>   
  18.     <input type="text" value="请输入用户名" name="usrId" οnfοcus="begin()" οnblur="end()">   
  19.   </body>   
  20. </html>  

  //效果：首先在文本框中显示预设内容，根据光标插入，预设内容消失！

======================javascript事件汇总===================

 

标叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html静态页JQuery ajax示例demo 源码
10-11
JQuery ajax的各种使用方法示例和说明 本示例程序由VS2010建立 c# asp.net ajax demo
给ajax的html样例,AJAX实例
weixin_36462532的博客
06-11 160
AJAX实例实例一：一个简单的AJAX实例创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据实例functionloadXMLDoc(){varxmlhttp;if(window.XMLHttpRequest){//IE7+,Firefox,Chrome,Opera,Safari浏览器执行代码xmlhttp=newXMLHttpRequest();}els...
ajax html实例,AJAX 实例
weixin_35679869的博客
06-18 144
AJAX 实例AJAX的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序:实例使用 AJAX 修改该文本内容修改内容尝试一下 »AJAX 实例解析上面的 AJAX 应用程序包含一个 div 和一个按钮。div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 lo...
html ajax 实例,jQuery Ajax 实例全解析
weixin_28278377的博客
06-20 618
废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。url(String) : 请求的HTML页的URL地址。data(M...
非常简单的Ajax请求实例附
10-23
在给出的文档内容中，我们了解到一个简单的Ajax请求实例，该实例说明了如何利用原生JavaScript的XMLHttpRequest对象来构建异步请求。这个对象是Ajax通信的核心，因为它允许JavaScript在后台向服务器发送请求，并处理...
ajax实例
01-08
在AJAX实例中，我们看到一个使用JavaScript库jQuery的示例。jQuery提供了简化AJAX操作的API，例如`$.ajax()`方法。这个方法允许我们配置各种参数来定制请求。以下是对`$.ajax()`方法中各个参数的详细解释： 1. `...
php的ajax简单实例
10-26
根据给定文件的内容，本文将详细介绍如何在PHP中实现一个简单的Ajax实例。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。通过Ajax，Web应用程序可以更快...
js实现简单实用的AJAX完整实例
10-22
本文将介绍如何使用JavaScript实现一个简单而实用的AJAX实例，并将通过一个完整的示例来展示如何实现无刷新调用，以及相关的技巧和注意事项。 ### AJAX基础知识 AJAX涉及的技术包括： 1. **JavaScript：** 是AJAX...
Javascript发送AJAX请求实例代码
11-29
AJAX（Asynchronous JavaScript and XML）是一种在...本实例代码展示了一个基本的AJAX请求过程，包括创建请求、发送请求、处理响应和错误处理。在实际应用中，开发者需要根据具体需求对这个基础示例进行扩展和优化。
HBuilder JS+HTML+ajax实例
12-05
HBuilder JS+HTML+ajax实例 创建html5+的项目，此项目配合我的博客用
使用html，JavaScript，ajax写一个小型实例
weixin_30691871的博客
05-21 416
//1.创建受捐单位数组 var arrOrgData = [ { "Id": 1, "OrgName": "红十字会" }, { "Id": 2, "OrgName": "壹基金" }, { "Id": 3, "OrgName": "中华慈善总会" }, { "Id": 4, "OrgName": "中国扶贫基金会" } ]; //1-1.根据受捐单...
]!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
回首如梦
04-19 6585
[转载...........] [code="java"] 这段代码叫做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。这里说明你用的是"HTML 4.01"版本,类似的还有: 这里声明本文档使用的是XHTML 1.0版本. 其中的DTD(例如loose.dtd)叫文档类型定义，...
jQuery的Ajax实例（附完整代码）
热门推荐
Yuan_mingyu的博客
02-02 8万+
目录写在前边什么是AjaxAjax基本结构实例实例1实例2小结 写在前边 作为一个前端刚入门没多久的小白，想在这里分享一下我的学习内容，就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程，所以遇到不懂得问题，也只有求助于网络，通过度娘，了解到了一些论坛、博客。在发现了众多技术大牛的同时，我也发现，一些像我这样的小白，由于能力有限，在查找相关资料的时候，对于大佬的一些操作理解困难，虽说能照猫...
实现一个ajax请求的简单例子
weixin_42132143的博客
04-10 2万+
效果：在前端页面的text框输入一个id，点击按钮，发送ajax请求到数据库查询对应用户数据返回，将用户信息显示在页面，实现局部刷新。 不说废话直接来！ 1.前端的jsp页面 （代码的注释写的非常详细了，直接看代码就行了，我就不再解释了） <%@ page contentType="text/html;charset=UTF-8" language="java" %> <...
ajax实例代码及效果
简单是书的博客
11-24 6790
ps：不足之处，请大家多多指教 以下html文件都要服务器环境下打开。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ceshi</title> <script type="text/javascript" src="ajax.js"></script></head> <body>
ajax和json简单实例html，js
谷咕咕
03-04 2062
ajax和json简单实例 知道小谷的都知道，我是一个不喜欢复习的人，然后上课讲的ajax至今都回避，今天终于还是被迫学习了。 活不多说，我们直接上代码，希望对和我一样的小菜鸟能有帮助（大佬请护眼！嘿嘿）。 实例：html，js 用到两个文件： 实现图： ajax.html &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta c
html + ajax 如何实现页面静态化
程序人生
11-07 1万+
这里是一个简单的 html + ajax 实现页面静态化的例子html + ajax 实现静态化的基本思路：将所有的请求通过ajax的方式，而不是通过表单提交，a链接的方式提交，所有的接收数据也是通过ajax来接收。这里以html + ajax 实现登陆的例子login.html文件如下：&amp;lt;!DOCTYPE HTML PUBLIC &amp;quot;-//W3C//DTD HTML 4.01 Transitiona
jQuery AJAX应用实例与解析
"jQuery AJAX应用实例总结，包括如何使用jQuery进行AJAX操作，以及解析不同格式数据的方法。" 本文深入探讨了jQuery中的AJAX应用，它是一种无刷新更新页面的技术，使得网页能以异步方式与服务器进行数据交互。AJAX...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值