`
coreych
  • 浏览: 3024 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

ajax 表单提交, 很使用的代码,收藏了

阅读更多
function ajaxSubmitForm(form, resultDivId) {           
var elements = form.elements;// Enumeration the form elements           
var element;           
var i;           
var postContent = "";// Form contents need to submit          
for(i=0;i<elements.length;++i) {                   
var element=elements[i];           
if(element.type=="text" || element.type=="textarea" || element.type=="hidden") {           
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";           
}           
else if(element.type=="select-one"||element.type=="select-multiple") {           
var options=element.options,j,item;           
for(j=0;j<options.length;++j){           
item=options[j];           
if(item.selected) {                   
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(item.value) + "&";                           
}           
}           
} else if(element.type=="checkbox"||element.type=="radio") {           
if(element.checked) {                           
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";                        
}                 
} else if(element.type=="file") {                         
if(element.value != "") {                                 
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";                        
}                 
} else {                                 
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";               
}           
}           
alert(postContent);           
ajaxSubmit(form.action, form.method, postContent);           
}           
// url - the url to do submit           
// method - "get" or "post"           
// postContent - the string with values to be submited           
// resultDivId - the division of which to display result text in, in null, then           
// create an element and add it to the end of the body          
function ajaxSubmit(url, method, postContent, resultDivId)            {           
var loadingDiv = document.getElementById('loading');               
// call in new thread to allow ui to update                  
window.setTimeout(function () {                         
loadingDiv.innerText = "Loading....";                      
loadingDiv.style.display = "";             
}, 1);               
// code for Mozilla, etc.           
if (window.XMLHttpRequest)                {                         
xmlhttp=new XMLHttpRequest();            
}                 
// code for IE              
else if (window.ActiveXObject)                    {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");                  
}                 
if(xmlhttp) {                    
xmlhttp.onreadystatechange = function() {                               
// if xmlhttp shows "loaded"                               
if (xmlhttp.readyState==4)                                   {
if(resultDivId) {                                               
document.getElementByID(resultDivId).innerHTML = xmlhttp.responseText;                                   
} else {           
var result = document.createElement("DIV");          
result.style.border="1px solid #363636";           
result.innerHTML = xmlhttp.responseText;          
document.body.appendChild(result);                                     
}                                         
loadingDiv.innerHTML = "Submit finnished!";                             
}                         
};                       
if(method.toLowerCase() == "get") {                              
xmlhttp.open("GET", url + "?" + postContent, true);                                
xmlhttp.send(null);                      
} else if(method.toLowerCase() == "post") {  
xmlhttp.open("POST", url, true);  
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
xmlhttp.send(postContent);    
}           
} else {   
loadingDiv.innerHTML = "Can't create XMLHttpRequest object, please check your web browser.";   
}      
}

分享到:
评论

相关推荐

    使用jQuery ajax提交表单代码

    // 阻止默认表单提交行为 var formData = $(this).serialize(); // 获取表单数据 $.ajax({ url: 'your_server_endpoint.php', // 服务器端接口 type: 'POST', data: formData, dataType: 'json', success: ...

    Ajax使用jQuery提交表单 文件

    在表单提交的场景下,我们通常使用`$.ajax()`的简写形式`$.post()`或`$.get()`,具体取决于是POST还是GET提交方式。当然,这里我们将主要讨论POST方法,因为表单提交通常涉及向服务器发送数据。 ```javascript // ...

    ajax方式提交表单,全局提交

    AJAX表单提交的核心在于使用JavaScript库,比如jQuery,来处理表单的提交事件。在提供的文件列表中,`jquery.form.js`是一个常用的jQuery插件,它扩展了jQuery的功能,使得我们可以轻松地实现AJAX表单提交。另一个...

    jquery ajaxfrom表单提交代码

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互等任务。...确保正确引入jQuery和`ajaxForm.js`文件,并按照上述步骤设置表单,你就可以实现异步的Ajax表单提交了。

    ajax异步提交表单

    通过上述分析,我们可以看到如何使用jQuery实现简单的AJAX表单提交功能。这种技术可以有效地减少页面刷新次数,提高用户的交互体验。同时,需要注意正确设置请求参数,合理处理请求的成功和失败情况,以及选择合适的...

    ajax提交表单

    在使用jQuery进行AJAX表单提交时,最常用的方法是`$.ajax()`。下面将详细介绍该方法的使用及其选项参数: 1. **$.ajax()方法** ```javascript $.ajax([options]) ``` `$.ajax()`方法用于发送AJAX请求。它接受...

    一个Ajax表单检测验证实例.rar

    一个Ajax表单检测验证实例,在不刷新网页的情况下对表单中的各个输入项进行检查,并显示出错误提示,在众多ajax表单中,本示例并不是最复杂的,因此对于学习研究类似表单的实现方法很有参考价值。ajax无刷新表单验证...

    php+ajax表单无刷新验证

    PHP与AJAX(Asynchronous JavaScript and XML)结合的表单验证技术可以实现无刷新验证,即在用户输入时即时检查数据有效性,无需等待完整的表单提交,从而显著提升交互体验。 **一、AJAX基础** AJAX 是一种创建...

    ajax验证并提交表单的两种方法博客源码

    本资源通过ajax实现对提交的form表单的验证,该代码不但有针对property验证,也有针对object验证,还有一个异步获取对象的实例;包含完整的代码和库文件;在myeclipse8.5和apache-tomcat-6.0.30测试通过;访问网址:...

    ajax表单提交.docx

    总结来说,这个AJAX表单提交实例展示了如何使用纯JavaScript实现无刷新的表单提交,通过封装函数提高了代码复用性,并允许开发者自定义数据处理和结果展示的方式。在实际开发中,这可以极大地提高用户体验,因为用户...

    ajax提交form表单

    这为用户提供了一种流畅、快速的交互体验,尤其是在处理表单提交时,可以避免传统表单提交带来的页面跳转和数据丢失问题。 ### 二、Ajax无刷新提交表单的核心步骤 1. **创建XMLHttpRequest对象**:这是Ajax的核心...

    Ajax表单提交插件jquery form

    **Ajax表单提交插件jQuery Form** 在Web开发中,jQuery Form插件是一个非常实用的工具,它使得使用Ajax技术提交HTML表单变得简单而直观。这个插件扩展了jQuery库,提供了强大的功能,允许开发者无刷新地更新页面...

    Asp+ajax提交表单实例

    在HTML表单中,我们可以添加一个事件监听器,例如“onsubmit”,当表单提交时触发Ajax请求。下面是一个简单的例子: ```html 提交" onclick="submitForm()" /&gt; function submitForm() { var form = ...

    使用AJAX提交Form表单实例演示

    alert('表单提交失败:' + response.error); } }, error: function(jqXHR, textStatus, errorThrown) { alert('请求失败:' + textStatus + ' - ' + errorThrown); } }); }); }); ``` 在这个示例中,我们...

    JQuery打造PHP的AJAX表单提交实例

    在这个“JQuery打造PHP的AJAX表单提交实例”中,我们将探讨如何结合JQuery库与PHP后端,实现异步表单数据提交。 JQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和Ajax交互。在这个实例中,首先我们...

    ajax实现提交时校验表单方法

    巧妙设计之处:ajax提交的话,不能够进行校验拦截,设置一个flag来判断,很巧妙的设计之处,故收藏! function inserts(){ var flag = checkForm(); if (flag == false) { return; } $.ajax({ //几个参数需要...

    Ajax表单验证插件

    Ajax表单验证插件是一种在前端进行用户输入验证的技术,它结合了Ajax(异步JavaScript和XML)与JavaScript库,通常用于提升用户体验,避免传统表单提交时页面刷新的不便。这种插件允许数据在后台实时验证,同时保持...

    JQuery Ajax提交整个表单

    如果表单提交的目标URL与当前页面不在同一个域下,可能存在跨域问题。这时需要服务器端支持CORS(跨源资源共享)或者使用JSONP(JSON with Padding)等技术。 总结,使用jQuery的Ajax功能提交整个表单涉及的关键点...

    ajax表单检查 源代码

    本资源"ajax表单检查 源代码"聚焦于使用Ajax进行表单验证这一关键功能。 表单检查是网页应用程序中必不可少的部分,它确保用户输入的数据符合预期格式和规则,防止无效或有害数据的提交。Ajax技术在此发挥了重要...

    AJAX提交表单内容

    以下是一个简单的使用jQuery库实现的AJAX表单提交示例: ```javascript $(document).ready(function() { $('#myForm').submit(function(event) { event.preventDefault(); // 阻止表单默认提交行为 var formData...

Global site tag (gtag.js) - Google Analytics