ajax中 form post提交的解决方案

最新推荐文章于 2022-11-12 10:04:27 发布

litxuf

最新推荐文章于 2022-11-12 10:04:27 发布

阅读量106

点赞数

分类专栏： ajax 文章标签： Ajax prototype JSP JavaScript HTML ViewUI

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在处理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"
   οnsubmit="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" οnclick="postIt()" value="serialize!" />
    </div>
   </fieldset>
  </form>

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的时候显示一个调用的提示具体可以测试看其效果

litxuf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax中 form post提交的解决方案

在处理Ajax 的form提交时总是要从表单中一个一个的取值很是麻烦今天发现 phototype 1.5.1.2有了一个很好的解决方案现在把代码粘贴如下&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;Prototype...
复制链接

扫一扫

专栏目录