如何使用ajax开发web应用程序[4]

原文

作者： Jonathan Fenocchi
时间：2005.10.25
译者：Sheneyan
英文原文：
http://webreference.com/programming/javascript/jf/column15/

在这个系列的第四部分中，你将会学习如何在不刷新页面的前提下通过form来提交数据。这能在很多方面发挥作用。让我们现从表单(form)的HTML开始，然后我们再给它加上javascript脚本，通过ajax提交表单。

请注意，在这篇文章中我会使用PHP来响应javascript提交的服务端请求，所以在文章中提及的代码需要保存为一个后缀为.PHP的文件并在一个支持PHP的服务器上运行。它没法直接在你的本地硬盘上工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>如何使用ajax开发web应用程序(4)</title>
<style type="text/css">
.note {
background: #ffa;
border: solid 1px #f30;
margin: 1em;
padding: 0.5em;
}
</style>
</head>
<body>
<form action="ajax_output.PHP" method="post"><fieldset>
<label>姓名: <input type="text" name="name"></label><br>
<label>出生地: <input type="text" name="born"></label><br>
<label><input type="submit" value="Submit form"></label>
</fieldset></form>
</body>


这个表单会提交到这个PHP文件：ajax_output.PHP－－将接受数据并输出它。

<?PHP
if(isset($_POST)){
echo '<div class="note">';
if(isset($_POST['name']) && !empty($_POST['name'])){
echo '<p>你好,'.$_POST['name'].'.</p>';
}
if(isset($_POST['born']) && !empty($_POST['born'])){
echo '<p>你出生于风景如画的'.$_POST['born'].'!</p>';
}
echo '</div>';
}
?>

这个PHP文件将输出一个包含两个段落的DIV。如果文本域name填写了内容，将输出"你好,[你的名字]"。如果文本域born填写了内容，将会输出"你出生于风景如画的[出生地名]!"，如果你两个空格都填了，那将输出两个消息到同一个DIV中。

该添加javascript了，下面是javascript代码以及说明。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>如何使用ajax开发web应用程序(4)</title>
<style type="text/css">
.note {
background: #ffa;
border: solid 1px #f30;
margin: 1em;
padding: 0.5em;
}
</style>
<script type="text/javascript">
function submitForm(f){
if(window.XMLHttpRequest){
var xmlReq = new XMLHttpRequest();
} else if(window.ActiveXObject) {
var xmlReq = new ActiveXObject('Microsoft.XMLHTTP');
}
var formData = '',elem = '';
for(var s=0; s<f.elements.length; s++){
elem = f.elements[s];
if(formData != ''){
formData += '&';
}
formData += elem.name+"="+elem.value;
}
xmlReq.onreadystatechange = function(){
if(xmlReq.readyState == 4){
document.getElementByIdx_x_x('insert').innerHTML = xmlReq.responseText;
}
}
xmlReq.open(f.method,f.action,true);
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlReq.send(formData);
return false;
}
</script>
</head>
<body>
<div id="insert"></div>
<form action="ajax_output.PHP" method="post" onsubmit="return submitForm(this)"><fieldset>
<label>姓名: <input type="text" name="name"></label><br>
<label>出生地: <input type="text" name="born"></label><br>
<label><input type="submit" value="提交表单"></label>
</fieldset></form>
</body>

查看示例

你先注意以下javascript标签部分。这是一个将在表单被提交的时候触发的函数（表单里的onsubmit事件句柄(event handler)将调用这个函数）。这个函数首先创建一个XMLHttpRequest，它用于传输数据到表单的action（ajax_output.ph[）。下一步，我们遍历每一个表单元素并将它们使用（&）连接起来以便于数据可以被正确地传送给action。接下来，我们创建了一个onReadyStateChange函数用于将这个id为insert的DIV和ajax_output.PHP传输回来的数据组合起来。然后我们打开表单的method(ajax_output.PHP)－－用POST或者GET（在我们的ajax_output.PHP中，我们只接受POST的数据）－－以及action (ajax_output.PHP)。我们需要设置正确的请求头（request header）以便于javascript能够发送经过URL编码的form数据(form urlencoded data)给ajax_output.PHP，最后就是让javascript发送数据了。

结论

这个脚本是非常通用并且在很多方面都很有用的，因为你能够将form里面的任何表单元素组合成数据并post给这个表单的action而不需要重新加载页面。你只需要简单的修改这个表单的action指向的文件，相应地修改和表单对应的输入域的名字以及如何处理数据。

关于作者

Jonathan Fenocchi(mail:jona#slightlyremarkable.com #换成@)是一个网络开发者，主攻web设计，客户端脚本，PHP脚本。
他的网站位于：http://www.slightlyremarkable.com

本文链接：http://www.blueidea.com/tech/program/2006/3214.asp　 出处：蓝色理想 责任编辑：moby

如何使用ajax开发web应用程序[4]的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素，这些元素中的大多数都用于描述网页内容，有兴趣的可以了解一下

  5. 移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  6. ios – 将视频分享到Facebook

    我正在编写一个简单的测试应用程序,用于将视频从iOS上传到Facebook.由于FacebookSDK的所有文档都在Objective-C中,因此我发现很难在线找到有关如何使用Swift执行此操作的示例/教程.到目前为止我有这个在我的UI上放置一个共享按钮,但它看起来已禁用,从我读到的这是因为没有内容设置,但我看不出这是怎么可能的.我的getVideoURL()函数返回一个NSURL,它肯定包含视

  7. ios – 在applicationWillEnterForeground触发时更改UIView

    本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至dio@foxmail.com举报，一经查实，本站将立刻删除。

  8. ios – 错误域= NSURLErrorDomain代码= -1003“找不到具有指定主机名的服务器

    当我尝试在设备上运行应用程序时出现此错误.当我在模拟器上运行它并且post请求正常工作时,我没有收到此错误.这是我的代码片段：任何帮助表示赞赏.谢谢解决方法此错误通常会提示DNS相关问题.检查设备上的DNS设置并确认您可以使用Safari或其他浏览器浏览互联网.如果有一个url,你可以在同一台服务器上获取,尝试直接在设备上的Safari中访问它.

  9. UILabel导致应用程序在添加到视图时崩溃(仅限Xcode 6和iOS 8)

    我已将我的项目转换为Xcode6,以便为iOS8构建.但是,特定的UILabel会导致应用程序在添加到视图层次结构时崩溃.这是我收到的唯一错误日志：我无法在项目中的任何位置找到contentInsetsFromFonts方法.此外,我甚至无法在网上任何地方找到它的参考,包括Apple的文档.我没有为这个UIViewController使用NIB,因此UI是在loadView方法中构建的：该应用程序

  10. iOS 7通知中心与标签一样

    您可以试试,也许在将模糊应用到标签之前为模糊添加一点白色.

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部