`
fuhao9611
  • 浏览: 84774 次
  • 性别: Icon_minigender_1
  • 来自: 陕西 西安
最近访客 更多访客>>
社区版块
存档分类
最新评论

第一个Ajax例子

    博客分类:
  • Ajax
阅读更多
今天写了一个很简单的例子,当输入乘数和被乘数,单击“开始计算”按钮之后,乘数和被乘数被传送到Web服务器,经过类型转换和计算之后,结果以普通文本的方式返回并显示。
其中:send_request()函数用来初始化XMLHttpRequest对象,并向Web服务器发起XMLHTTP请求;函数processRequest()则接受服务器返回的数据,并将这些数据解析后更新到页面相关区域,其作为XMLHttpRequest对象的回调函数使用;函数doCaculate响应按钮caculate的onClick事件,判断用户输入情况,并将目标url地址以参数的形式传送给函数send_request。
calc.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ajax例子</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
	//按钮“开始计算”响应函数,判断输入域情况后调用send_request函数。
	function doCaculate() {
		var f = document.form1;
		if((f.number_1.value!="")&&(f.number_2.value!="")) {
			document.getElementById("feedback").innerHTML = "正在计算,请稍后......";
			send_request("process.jsp?number_1="+f.number_1.value+"&number_2="+f.number_2.value);
		}
		else if(f.number_1.value=="") document.getElementById("feedback").innerHTML = "乘数不能为空。";
		else if(f.number_2.value=="") document.getElementById("feedback").innerHTML = "被乘数不能为空。";
	}
	var http_request = false;
	//向服务器发起XMLHTTP请求。
	function send_request(url) {//初始化、指定处理函数、发送请求的函数
		http_request = false;
		//开始初始化XMLHttpRequest对象
		if(window.XMLHttpRequest) { //Mozilla 浏览器
			http_request = new XMLHttpRequest();
			if (http_request.overrideMimeType) {//设置MiME类别
				http_request.overrideMimeType('text/xml');
			}
		}
		else if (window.ActiveXObject) { // IE浏览器
			try {
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					http_request = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
		if (!http_request) { // 异常,创建对象实例失败
			window.alert("不能创建XMLHttpRequest对象实例.");
			return false;
		}
		http_request.onreadystatechange = processRequest;
		// 确定发送请求的方式和URL以及是否同步执行下段代码
		http_request.open("GET", url, true);
		http_request.send(null);
	}
	// 处理返回信息的函数
    function processRequest() {
		var f = document.form1;
        if (http_request.readyState == 4) { // 判断对象状态
            if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
				var returnStr = http_request.responseText;
				if(returnStr.indexOf("Error")==-1) {
					f.result.value = returnStr;
					document.getElementById("feedback").innerHTML = "";
				}
				else {
					f.result.value = "";
					document.getElementById("feedback").innerHTML = returnStr;
				}
            } else { //页面不正常
                alert("您所请求的页面有异常。");
            }
        }
    }
</script>
</head>

<body><center>
<form action="process.jsp" method="post" enctype="application/x-www-form-urlencoded" name="form1" target="_self">
<table width="400" cellpadding="4" cellspacing="1" border="0">
  <caption>简单乘法计算</caption>
  <tr>
    <td align="center">
	<input type="text" name="number_1" size="10">
    *
	<input type="text" name="number_2" size="10">
	=
	<input type="text" name="result" size="10">
	</td>
  </tr>
  <tr align="center">
    <td> 
	<input type="button" name="Caculate" value="开始计算" onClick="doCaculate()"> 
	<input type="reset" name="reset" value="重新计算">
	</td>
  </tr>
  <tr><td align="center" height="25"><label id="feedback"> </label></td></tr>
</table>
</form>
</center>
</body>
</html>

process.jsp
<%@ page contentType="text/html; charset=gb2312"%>
<%
String number_1 = request.getParameter("number_1");
String number_2 = request.getParameter("number_2");
int num_1=0,num_2=0;
boolean status = true;
if(number_1!=null) {
	try {
		num_1 = Integer.parseInt(number_1);
	}catch(Exception ex) {
		status = false;
		out.println("Error,乘数必须是整数。");
	}
}
if(number_2!=null) {
	try {
		num_2 = Integer.parseInt(number_2);
	}catch(Exception ex) {
		status = false;
		out.println("Error,被乘数必须是整数。");
	}
}
if(status) out.println(num_1*num_2);
%>
分享到:
评论

相关推荐

    cryptography-2.4-cp36-cp36m-win_amd64.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    Matlab实现基于RF-Adaboost随机森林结合Adaboost集成学习时间序列预测(完整源码和数据)

    1.Matlab实现基于RF-Adaboost随机森林结合Adaboost集成学习时间序列预测。基于RF-Adaboost(随机森林结合Adaboost集成学习)的时间序列预测方法结合了随机森林在处理高维数据和复杂关系方面的优势,以及Adaboost在自适应地提升弱分类器性能方面的特点,从而提高了对时间序列数据的预测准确性。 2.excel数据,方便替换,运行环境matlab2018及以上。 3.程序语言为matlab。 4.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 5.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 6.作者介绍:某大厂资深算法工程师,从事Matlab、Python算法仿真工作8年;擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验,更多仿真源码、数据集定制私信+。

    aiohttp-3.7.0b1-cp36-cp36m-manylinux2014_aarch64.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    着装分割-基于NCNN+YOLOv8-Seg实现行人着装分割算法-附项目源码+流程教程-优质项目实战.zip

    着装分割_基于NCNN+YOLOv8-Seg实现行人着装分割算法_附项目源码+流程教程_优质项目实战

    ASP.NET某中学学生成绩管理系统的设计(源代码+LW).zip

    本毕业设计所描述的中学学生成绩管理系统是采用ASP.NET作为网络编程框架,SQL Server 2000作为数据库编写的一个B/S模式的系统。系统主要实现了:用户管理、成绩查询、成绩管理和科目管理等功能。本文详细介绍了中学学生成绩管理系统的需求分析、功能设计和系统设计,在系统设计中给出数据库的设计和本系统的总体设计方案,在系统实现中具体介绍了各个功能的所能实现的情况和主要代码,同时附有运行界面图。 关键字:成绩管理;成绩录入;成绩查询;.NET ;B/S;

    aiohttp-3.9.0-cp38-cp38-musllinux_1_1_x86_64.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    062-微信小程序-股票分时图K线图小程序.zip

    062-微信小程序-股票分时图K线图小程序.zip

    高分项目,基于Unity3D开发实现的二维任务游戏,内含完整源码+资源+unitypackage

    高分项目,基于Unity3D开发实现的二维任务游戏,内含完整源码+资源+unitypackage 首先,二维游戏设计需要注重游戏的简单易懂性。由于二维游戏的画面和操作相对简单,因此游戏设计师需要确保游戏的规则和操作方式能够被玩家轻松理解和掌握。游戏中的目标和任务...

    基于微信小程序的高校餐厅食品留样管理系统(源码)

    基于微信小程序的高校餐厅食品留样管理系统(源码)

    易舟云财务软件:引领财务数字化转型的新篇章.docx

    在数字化浪潮的推动下,财务软件已经成为企业财务管理不可或缺的工具。而易舟云财务软件,作为一款深受用户喜爱的财务管理系统,正引领着财务数字化转型的新篇章。财务软件行业正经历着前所未有的变革。随着《新一代人工智能发展规划》的发布,人工智能技术在财务领域的应用变得越来越深入。易舟云财务软件正是这一趋势的产物,它结合了人工智能技术,实现了自动生成凭证、报表和智能报税等功能,旨在提升企业的财务管理效率和精确性。免费版是永久免费的,提供了账套管理、凭证、期末处理、会计账簿、财务报表、设置等基本功能。这些功能已经能够满足大多数小型企业和个人用户的需求。专业版则需要298元/年起,功能更为强大。除了包含免费版的所有功能外,还增加了资金、发票、工资、固定资产等更高级的功能,适合有更高财务管理需求的用户。填写记账凭证是财务工作的基础。在易舟云财务软件中,用户可以轻松设置日期、凭证字、选择科目、设置金额、上传附件,并保存凭证。软件遵循“有借必有贷,借贷必相等”的原则,确保了财务数据的准确性。期末处理是企业财务管理的关键环节。易舟云财务软件提供了结转与结账、期末检查、数据测算等功能,帮助企业准确计算利润、计提

    aiohttp-3.9.0b1-cp39-cp39-musllinux_1_1_s390x.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    Thinkphp全新UI黑白模式微信影视小程序源码 去授权

    去授权Thinkphp全新UI黑白模式微信影视小程序源码,微信影视小程序源码 支持多开。

    小程序-51-面向企事业单位的项目申报小程序--LW-源码.zip

    提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。

    小程序-60-微信小程序的驾校预约管理系统--LW-源码.zip

    提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。

    aiohttp-3.7.4-cp37-cp37m-manylinux1_i686.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    基于springboot的驾校管理系统

    开发语言:Java JDK版本:JDK1.8(或11) 服务器:tomcat 数据库:mysql 5.6/5.7(或8.0) 数据库工具:Navicat 开发软件:idea 依赖管理包:Maven 代码+数据库保证完整可用,可提供远程调试并指导运行服务(额外付费)~ 如果对系统的中的某些部分感到不合适可提供修改服务,比如题目、界面、功能等等... 声明: 1.项目已经调试过,完美运行 2.需要远程帮忙部署项目,需要额外付费 3.本项目有演示视频,如果需要观看,请联系我v:19306446185 4.调试过程中可帮忙安装IDEA,eclipse,MySQL,JDK,Tomcat等软件 重点: 需要其他Java源码联系我,更多源码任你选,你想要的源码我都有!

    aiohttp-3.8.1-cp38-cp38-musllinux_1_1_ppc64le.whl

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本117.0.5938.92)

    资源包括: 1.Java爬虫实战代码 2.selenium学习笔记 3.代码演示视频 4.谷歌浏览器chrom117.0.5938.92 chrome-linux64.zip chrome-mac-arm64.zip chrome-mac-x64.zip chrome-win32.zip chrome-win64.zip 5.谷歌浏览器驱动器Chromedriver117.0.5938.92 chromedriver-linux64.zip chromedriver-mac-arm64.zip chromedriver-mac-x64.zip chromedriver-win32.zip chromedriver-win64.zip 特别说明:Chrome 为测试版(不会自动更新) 仅适用于自动测试。若要进行常规浏览,请使用可自动更新的标准版 Chrome。)

    树莓派+4B+3D+模型

    树莓派+4B+3D+模型

Global site tag (gtag.js) - Google Analytics