码迷,mamicode.com
首页 > 其他好文 > 详细

提交表单方案总结

时间:2015-05-30 09:21:53      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:java   表单   

1、方式一:表单提交:在此方式中需要置顶表单的action属性,将提交按钮的type属性改为submit。如下:
    <form name="userForm" target="_self" id="userForm" action=“#” method=“post”>
      <!-- 用户信息开始 -->
          <input name="userName" type="text" class="text1" id="userName"
                                size="20" maxlength="20">
          <input name="password" type="password" class="text1"
                                    id="password" size="20" maxlength="20">
       <!-- 用户信息结束 --> 

          <div align="center">
                <!-- 提交按钮 -->
              <input name="btnAdd" class="button1" type="submit" id="btnAdd"
                        value="添加" onClick="addUser()">
          </div>

    </form>


2、方式二:使用JS提交表单,通过按钮触发JS事件,获取表单ID进行提交。如下:
    1)表单信息如下:
    <form name="userForm" target="_self" id="userForm">
                <!-- 用户信息开始 -->
          <input name="userName" type="text" class="text1" id="userName"
                                size="20" maxlength="20">
          <input name="password" type="password" class="text1"
                                    id="password" size="20" maxlength="20">
        <!-- 用户信息结束 -->

          <div align="center">
                <!-- 提交按钮 -->
              <input name="btnAdd" class="button1" type="button" id="btnAdd"
                        value="添加" onClick="addUser()">
          </div>

    </form>


    2)JS提交代码如下:
    function addUser() {
        with (document.getElementById("userForm")){
            action="user_add.jsp";
            method="post";
            method="post";
        }

    } 


3、方式三:利用ajax进行提交,(当文本框失去焦点时触发提交事件)如下
    1)HTML代码:       <input name="userId" type="text" class="text1" id="userId" size="10" maxlength="10" onkeypress="userIdOnkeypress()" value="<%= userId %>onblur="validate(this)"><span id="spanUserId"></span>

    2)JS验证代码
     var xmlHttp;
    function createXMLHttpRequest(){
        //表示当前浏览器不是ie,如ns,firefox
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }else if (window.ActiveXObject){
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    function validate(field){
        //alert(field.value);
        if (trim(field.value).length != 0 ){
            //创建AJAX核心对象XMLHttpRequest
            createXMLHttpRequest();
            
            var url="user_validate.jsp?userId="+trim(field.value)+"&time=" + new Date().getTime();
            //设置请求方式为Get,设置请求的URL,设置为异步提交
            xmlHttp.open("GET", url, true);
            
            //将方法地址复制给onreadystatechange属性
            xmlHttp.onreadystatechange=callback;
            //将请求信息发送到Ajax引擎
            xmlHttp.send(null);
        }
        else{
            document.getElementById("spanUserId").innerHTML="";
        }
    }
    function callback(){
        //Ajax引擎状态为成功
        if (xmlHttp.readyState==4){
            //HTTP协议状态为成功
            if (xmlHttp.status==200){
                if (trim(xmlHttp.responseText) != ""){
                    document.getElementById("spanUserId").innerHTML="<font color=‘red‘>"+xmlHttp.responseText+"</font>";
                }else{
                    document.getElementById("spanUserId").innerHTML="";
                }
            }else{
                alert("请求失败,错误码="+xmlHttp.status)
            }
        }
    }

提交表单方案总结

标签:java   表单   

原文地址:http://blog.csdn.net/u010927139/article/details/46270943

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!