AJAX提交表单

最新推荐文章于 2023-03-16 17:31:53 发布

zhanghuaigong

最新推荐文章于 2023-03-16 17:31:53 发布

阅读量1k

点赞数

分类专栏： JAVAEE 文章标签： ajax function xmlhttprequest url random button

本文链接：https://blog.csdn.net/zhanghuaigong/article/details/6072556

版权

JAVAEE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这是在"TMS"项目中遇到的一个问题：当点击提交按钮（或button）之后，因为要在表单提交后在页面中判断提交按钮已经将表单提交了，一种方法就是利用ajax提交表单，然后在ajax中判断提交按钮已经被点击过了，进而完成相应的其他功能，利用ajax提交表单的具体过程就是：在点击了提交按钮之后，利用js对表单进行遍历，然后将表单的相应参数组成一个字符串，将这个字符串拼接在ajax的url后面，然后利用ajax的post方式发出请求。

具体的jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.4.2.js"></script>
     <script type="text/javascript">
     /*$(function(){
       $("#submit").click(function(){
        var url = "${pageContext.request.contextPath}/test.do?name=save";
        var args = {random:Math.random()};
        $.get(url, args, function(data){
         alert("保存成功");
         $("#submit1").attr("disabled", false);
        });
       });

       $("#submit1").click(function(){
        var url = "${pageContext.request.contextPath}/test.do?name=next";
        var args = {random:Math.random()};
        $.get(url, args, function(data){
         $("#submit1").attr("disabled", true);
        });
       });
     });*/

     $(function(){
       $("#submit").click(function(){
        var form = document.getElementById("form1");
        ajaxSubmitForm(form, "ididididid");
        alert("保存成功，可以点击'下一客户'");
        $("#submit1").attr("disabled", false);
       });

       $("#submit1").click(function(){
        var url = "${pageContext.request.contextPath}/test.do?methodname=next";
        var args = {random:Math.random()};
        $.get(url, args, function(data){
         $("#submit1").attr("disabled", true);
        });
       });
     });


     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');
    //alert(loadingDiv);
    // 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) {
     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);
     }

     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!";
      }
     };
    } else {
     loadingDiv.innerHTML = "Can't create XMLHttpRequest object, please check your web browser.";
    }
   }
     </script>

     <script type="text/javascript">

     </script>
</head>

<body>
<form id="form1" action="${pageContext.request.contextPath}/test.do" method="post">
  <input type="hidden" name="methodname" value="save"/>
  姓名：<input name="name" type="text"/>
  年龄：<input name="age" type="text"/>
</form>
&nbsp &nbsp
<button id="submit1" disabled="disabled">下一客户</button>
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<button id="submit">保存反馈</button>
</body>
</html>