几个月前,因为项目需求,我写了下面的三个ajax相关的函数。发布出来和大家分享。
第一个是用来无刷新加载一段HTML
第二个是把表单数据转换成一串请求字符串
第三个是结合函数一和函数二的无刷新提交表单实现。
还有一点要提到的是,无刷新表单提交,还不能对文件上传进行处理,这个主要是因为浏览器的安全设置。目前无刷新的上传,一般是用iframe来实现的。关于这个,我们在google里搜索能找到很多。
网上虽然已经有很多优秀的ajax的类和函数了,但是或许我这几个函数对大家还有点用处,于是我就发布出来了。
//@desc load a page(some html) via xmlhttp,and display on a container
//@param url the url of the page will load,such as "index.php"
//@param request request string to be sent,such as "action=1&name=surfchen"
//@param method POST or GET
//@param container the container object,the loaded page will display in container.innerHTML
//@usage
// ajaxLoadPage('index.php','action=1&name=surfchen','POST',document.getElementById('my_home'))
// suppose there is a html element of "my_home" id,such as "<span id='my_home'></span>"
//@author SurfChen <surfchen@gmail.com>
//@url http://www.surfchen.org/
//@license http://www.gnu.org/licenses/gpl.html GPL
function ajaxLoadPage(url,request,method,container)
{
method=method.toUpperCase();
var loading_msg='Loading...';//the text shows on the container on loading.
var loader=new XMLHttpRequest;//require Cross-Browser XMLHttpRequest
if (method=='GET')
{
urls=url.split("?");
if (urls[1]=='' || typeof urls[1]=='undefined')
{
url=urls[0]+"?"+request;
}
else
{
url=urls[0]+"?"+urls[1]+"&"+request;
}
request=null;//for GET method,loader should send NULL
}
loader.open(method,url,true);
if (method=="POST")
{
loader.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
loader.onreadystatechange=function(){
if (loader.readyState==1)
{
container.innerHTML=loading_msg;
}
if (loader.readyState==4)
{
container.innerHTML=loader.responseText;
}
}
loader.send(request);
}
//@desc transform the elements of a form object and their values into request string( such as "action=1&name=surfchen")
//@param form_obj the form object
//@usage formToRequestString(document.form1)
//@notice this function can not be used to upload a file.if there is a file input element,the func will take it as a text input.
// as I know,because of the security,in most of the browsers,we can not upload a file via xmlhttp.
// a solution is iframe.
//@author SurfChen <surfchen@gmail.com>
//@url http://www.surfchen.org/
//@license http://www.gnu.org/licenses/gpl.html GPL
function formToRequestString(form_obj)
{
var query_string='';
var and='';
//alert(form_obj.length);
for (i=0;i<form_obj.length ;i++ )
{
e=form_obj[i];
if (e.name!='')
{
if (e.type=='select-one')
{
element_value=e.options[e.selectedIndex].value;
}
else if (e.type=='checkbox' || e.type=='radio')
{
if (e.checked==false)
{
break;
}
element_value=e.value;
}
else
{
element_value=e.value;
}
query_string+=and+e.name+'='+element_value.replace(/\&/g,"%26");
and="&"
}
}
return query_string;
}
//@desc no refresh submit(ajax) by using ajaxLoadPage and formToRequestString
//@param form_obj the form object
//@param container the container object,the loaded page will display in container.innerHTML
//@usage ajaxFormSubmit(document.form1,document.getElementById('my_home'))
//@author SurfChen <surfchen@gmail.com>
//@url http://www.surfchen.org/
//@license http://www.gnu.org/licenses/gpl.html GPL
function ajaxFormSubmit(form_obj,container)
{
ajaxLoadPage(form_obj.getAttributeNode("action").value,formToRequestString(form_obj),form_obj.method,container)
}
文章转栽 :http://www.javadingle.com
分享到:
相关推荐
PHP与AJAX(Asynchronous JavaScript and XML)结合的表单验证技术可以实现无刷新验证,即在用户输入时即时检查数据有效性,无需等待完整的表单提交,从而显著提升交互体验。 **一、AJAX基础** AJAX 是一种创建...
无刷新提交是指用户在网页上操作时(例如提交表单),页面无需进行完整的刷新就能完成数据的提交并显示结果的一种技术。这种技术能显著提升用户体验,减少用户等待时间,并保持页面当前的状态不被破坏。 在实际应用...
这种模式将应用程序分为三个主要组件:模型(Model)、视图(View)和控制器(Controller),使得代码结构清晰,职责分明。而“无刷新提交”则是现代Web交互中提高用户体验的重要技术,它允许用户在不重新加载整个...
在IT领域,特别是Web开发中,使用Ajax(Asynchronous JavaScript and XML)进行form表单的无刷新提交是一项关键技能。这种技术允许网页在不重新加载整个页面的情况下与服务器交互,从而提高了用户体验。以下是对给定...
### AJAX异步提交表单知识点解析 #### 一、AJAX技术概述 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以...
### 知识点:Ajax无刷新提交表单与上传文件 #### 1. Ajax的基本概念 Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术,它允许网页通过JavaScript与服务器交换数据并更新部分网页内容,而...
在Web应用中,用户交互体验是至关重要的,而Ajax(Asynchronous JavaScript and XML)技术则为实现无刷新页面更新提供了可能。Ajax的核心原理是利用JavaScript与服务器进行异步数据交换,使得网页可以在不重新加载...
1. **$.ajax()**:这是最通用的AJAX函数,可以配置所有选项,包括URL、类型、数据、回调函数等。 2. **$.get()**:用于发送GET请求,简化了$.ajax(),只需要提供URL和回调函数即可。 3. **$.post()**:与$.get()类似...
这个函数接收三个参数:提交的URL、表单元素(`frm`)和一个回调函数(`fn`)。`getFormJson`函数用于获取表单数据并将其转换为JSON格式: ```javascript function getFormJson(frm) { var o = {}; var a = $(frm...
在Web开发中,AJAX(Asynchronous ...综上所述,使用AJAX提交表单内容是现代Web应用中常见的做法,它提高了用户体验,减少了页面刷新,使得数据交互更加流畅。了解并掌握这一技术对于任何Web开发者来说都至关重要。
在IT行业中,无刷新上传是一种...总结起来,这个例子展示了如何利用jQuery和Ajax技术实现无刷新文件上传,结合第三方插件简化了实现步骤。通过这种方式,开发者可以创建更友好、高效的Web应用程序,提高用户满意度。
综上所述,通过Ajax+JavaScript+CSS,我们可以构建一个无刷新的注册页面,提供流畅的用户体验,同时保持页面布局的完整性。在实际项目中,还需考虑安全性、错误处理等问题,确保用户数据的安全和页面的稳定性。
在Web开发领域,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现页面的无刷新更新,提高用户体验。jQuery是一个轻量级、功能丰富的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互等任务。本篇...
### ASP.NET AJAX 实现无刷新验证码的详细解析 在现代Web开发中,验证码(CAPTCHA)作为用户身份验证的一种手段,被广泛应用于登录界面、表单提交等场景中,用以区分人类用户与自动化程序。传统的验证码加载方式...
**Ajax留言板页面无刷新技术详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,实现了网页的异步更新,大大...
**jQuery基于Ajax方法自定义无刷新提交表单Form实例** 在网页开发中,为了提供更好的用户体验,我们常常需要实现表单的无刷新提交,即在用户填写完表单后,无需跳转页面即可完成数据的提交。jQuery库提供了一种方便...
Ajax邮件发送技术是一种在网页端实现无刷新通信的机制,主要通过JavaScript的XMLHttpRequest对象来与服务器进行异步数据交换,从而更新部分网页内容,无需重新加载整个页面。本项目基于Visual Studio 2005 (VS2005) ...
jQuery Form插件还支持一些与表单提交相关的事件,如`submit`, `beforeSubmit`, `success`, `complete`, `error`等,可以在这些事件上绑定自定义处理函数。 例如,监听`beforeSubmit`事件进行表单验证: ```...