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

ajax中 form post提交的解决方案

    博客分类:
  • ajax
阅读更多

在处理Ajax 的form提交时 总是要从表单中一个一个的取值 很是麻烦 今天发现 phototype 1.5.1.2有了一个很好的解决方案 现在把代码粘贴如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Prototype examples</title>
  <script type="text/javascript" src="prototype-1.5.1.2.js">
   </script>
  <script>
function postIt()
{
 var f=$('formID');
 
  var element = f.serialize(); 
  alert("element=" + element.inspect());
  f.request({
  method: 'POST',
  parameters: 'us=4&ws=5',
  onComplete: showResult 
 })
}
 
 function showResult(request)
 {
 var obj=request.responseText;
  alert(obj);
 }
</script>
 </head>

 <body>
  <div id='systemWorking' style="display: none">
   Loading...
  </div>
  
  <br />

  <form id="formID" method="POST" action="1.jsp"
   onsubmit="return false">
   <fieldset>
    <legend>
     User info
    </legend>
    <div>
     <label for="username">
      Username:
     </label>
     <input type="text" name="username" id="username" value="" />
    </div>
    <div>
     <label for="age">
      Age:
     </label>
     <input type="text" name="age" id="age" value="" size="3" />
    </div>

    <div>
     <label for="hobbies">
      Your hobbies are:
     </label>
     <select name="hobbies" id="hobbies" multiple="multiple">
      <option>
       coding
      </option>
      <option>
       swimming
      </option>
      <option>
       hiking
      </option>
      <option>
       drawing
      </option>
     </select>
    </div>
    <div class="buttonrow">
     <input type="submit" onclick="postIt()" value="serialize!" />
    </div>
   </fieldset>
  </form>

  <script>

var myGlobalHandlers = {

onCreate: function(){

Element.show('systemWorking');

},

onComplete: function() {

if(Ajax.activeRequestCount == 0){

Element.hide('systemWorking');

}

}

};

Ajax.Responders.register(myGlobalHandlers);
</script>
 </body>
</html>

 

1.jsp
---------------------
<%@ page language="java" contentType="text/html;charset=UTF-8" %><%
String s=request.getParameter("us");
String s2=request.getParameter("age");
out.print(s+" "+s2);
%>

注意事情:

1.phototype 要在1.5.0以上才可以测试通过

2.Ajax.Responders.register(myGlobalHandlers); 这个东东是在调用Ajax的时候显示一个调用的提示 具体可以测试看其效果

分享到:
评论

相关推荐

    Ajax中文乱码问题解决方案

    在IT行业中,Ajax(Asynchronous JavaScript ...通过理解和应用这些解决方案,开发者可以有效地避免和解决Ajax请求中的中文乱码问题,从而提高用户体验。记住,良好的编码习惯和对字符编码的理解是解决此类问题的关键。

    c# ajax post数据乱码解决

    ### 二、解决方案:修改Web.config文件 在C#和ASP.NET项目中,可以通过修改项目的配置文件——`Web.config`来统一客户端和服务器端的字符编码,从而避免乱码问题的发生。 #### 步骤1:定位到Web.config文件 打开...

    ajax乱码解决方案

    **Ajax 乱码解决方案** Ajax 乱码问题在开发Web应用程序时经常遇到,尤其是在涉及到不同编码格式时。本文将深入探讨Ajax与字符编码相关的技术细节,并提供几种有效的解决策略。 首先,JavaScript处理字符的方式是...

    JQuery AJAX提交中文乱码的解决方案

    为了解决这个问题,作者提出了一种解决方案,即在AJAX请求中显式地指定字符集为UTF-8。在JQuery的AJAX工具函数中,可以通过options参数来指定content-type,也就是在请求中设置HTTP头的Content-Type字段。例如: ``...

    按钮的Ajax请求时一次点击两次提交的解决方法

    ### 解决方案二:在事件处理函数中使用return false 另一种方法是在事件处理函数中添加一行return false;语句。这一行代码的作用是在完成Ajax请求后,阻止按钮默认的提交行为,代码示例如下: ```javascript $('#...

    Ajax跨域问题及解决方案(jsonp,cors)

    解决方案: 1.jsonp  在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理;在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;...

    Ajax开发过程表单提交数据出现乱码和解决办法

    根据题目中提供的部分代码示例,我们可以进一步理解乱码产生的原因及解决方案: 1. **GET方式提交数据**: ```javascript function doRequestUsingGET() { createXMLHttpRequest(); var url = ...

    Ajax提交Form表单页面仍会刷新问题的快速解决办法

    然而,在实际操作中,我们可能会遇到Ajax提交Form表单时页面仍然刷新的问题。本文将深入探讨这个问题及其解决方案。 首先,我们要了解Ajax的工作原理。Ajax(Asynchronous JavaScript and XML)是一种在无需重新...

    昨天看见一位网友需要解决一些关于AJAX的FORM提交的问题,现在把一个实例贴出来,希望对广大爱好者有帮助。

    本文将深入分析此案例中的关键技术和代码实现方式,为读者提供一个完整的解决方案。 #### 二、核心概念介绍 1. **AJAX(Asynchronous JavaScript and XML)**:一种在无需重新加载整个网页的情况下,能够更新部分...

    AJAX提交与FORM提交的区别说明

    AJAX(Asynchronous JavaScript and XML)提交与传统的FORM表单提交是两种常见的数据交互方式,在Web开发中扮演着重要角色。它们各自有其优势和局限性,了解它们的区别有助于优化用户体验和提高应用性能。 1. **...

    Form Post提交容量大的数据

    在Web开发中,Form Post是一种常见的用户数据提交方式,它允许用户通过HTML表单向服务器发送数据。然而,当表单包含大量数据时,可能会遇到一些限制。在标题和描述中提到的问题,当表单数据过大,使用`Request.Form...

    ajax中文乱码如何解决

    针对Ajax中文乱码问题,这里提出一个解决方案,这个方案在作者的开发环境中(XP, Eclipse, GB18030编码)已经成功解决了问题: 1. **设置请求头**: 在发送POST请求前,需要设置Content-Type头,告诉服务器数据的...

    Ajax乱码解决方案

    ### Ajax乱码解决方案 在进行Ajax开发的过程中,经常会遇到数据编码问题导致的乱码现象。这类问题虽然看似简单,但若处理不当,则可能耗费大量时间进行调试与解决。本文将结合一个具体的案例来探讨如何有效地解决...

    ajax_json_post_ashx获取参数值

    在实际开发中,可能会遇到`context.Request.Form`和`context.Request.Params`无法正确获取POST数据的问题,我们将探讨这个问题的原因以及解决方案。 首先,了解AJAX的基本概念。AJAX允许网页在不重新加载整个页面的...

    Ajax传参是乱码解决方案

    ### Ajax传参是乱码解决方案 在Web开发过程中,数据编码问题经常会导致各种各样的乱码现象出现。尤其是在使用Ajax进行前后端交互时,如果字符编码处理不当,很容易导致前端发送给后端的数据出现乱码。本文将详细...

    chrome不支持form.submit的解决方案

    在描述中提到的解决方案中,开发者首先通过`navigator.userAgent`属性检测当前浏览器是否为Chrome。`navigator.userAgent`返回一个字符串,包含了浏览器的类型、版本以及其他相关信息。通过正则表达式检查,可以判断...

    JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

    JavaScript将base64图片转换成formData并通过AJAX提交是一项技术需求,通常出现在需要将前端处理得到的图片信息上传到服务器的场景中。...总体上,它为前后端分离的开发模式提供了一种便捷的解决方案。

    Ajax上传文件(无需表单)实测可用

    总的来说,“Ajax上传文件(无需表单)实测可用”项目提供了一个简洁、高效的文件上传解决方案,适用于现代Web应用,使得用户在上传文件时不必离开当前页面,提高了网站的交互性和用户体验。这个项目可以轻松地融入...

    关于在LayUI中使用AJAX提交巨坑记录

    本文将深入探讨这个问题,并提供解决方案。 首先,LayUI是一个轻量级的前端组件库,它提供了丰富的UI组件和便捷的API,包括表格、表单、弹窗等。在LayUI中,我们可以使用其内置的`form`模块来处理表单操作,包括...

Global site tag (gtag.js) - Google Analytics