jsp的form表单提交几种方式

1.form表单submit直接提交数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="<%=request.getContextPath()%>" />
<html>
<head>
    <title>from表单提交</title>
  <script type="text/javascript" src="${ctx}/static/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form action="${ctx}/form/user" method="post" onsubmint="return check()">
  <table>
    <tr>
      <td>ID:</td>
      <td>
        <input type="text" name="id" />
      </td>
    </tr>
    <tr>
      <td>用户名:</td>
      <td>
        <input type="text" name="name" />
      </td>
    </tr>
    <tr>
      <td>密码:</td>
      <td>
        <input type="text" name="password" />
      </td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>
        <input type="text" name="age" />
      </td>
    </tr>
    <tr>
      <td>性别</td>
      <td>
        <input type="text" name="sex" />
      </td>
    </tr>
  </table>
  <button type="submit">确定</button>
</form>

<script>

//表单提交前进行的校验

function check(){

  return true;

}

</script>
</body>
</html>

2.通过ajax进行form表单提交

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="<%=request.getContextPath()%>" />
<html>
<head>
    <title>from表单提交</title>
  <script type="text/javascript" src="${ctx}/static/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form  method="post" id="userAdd">
  <table>
    <tr>
      <td>ID:</td>
      <td>
        <input type="text" name="id" />
      </td>
    </tr>
    <tr>
      <td>用户名:</td>
      <td>
        <input type="text" name="name" />
      </td>
    </tr>
    <tr>
      <td>密码:</td>
      <td>
        <input type="text" name="password" />
      </td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>
        <input type="text" name="age" />
      </td>
    </tr>
    <tr>
      <td>性别</td>
      <td>
        <input type="text" name="sex" />
      </td>
    </tr>
  </table>
  <a href="javascript:userAdd()">确定</a>
</form>
<script>
  function userAdd(){
    $.ajax({
      url:"${ctx}/form/user",
      data:$("#userAdd").serialize(),
      type:"post",
      success:function(data){
        console.log(data);
      }
    });
  }
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/java_exception_souji/article/details/53928384