表单提交

jQuery核心库文件：jquery-1.8.2.js

 

jquery form 库文件：jquery.form.js

 

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery-form Demo</title>

<!-- 需要导入的就jQuery类库 -->
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

<!-- JS文件 -->
<script type="text/javascript" src="index.js"></script>

</head>
<body>
    <form action="" id="myForm" method="post">
        <table border="1" width="70%">
            <tr>
                <td>姓名：</td>
                <td>
                    <input type="text" name="name" id="name" />
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="gender" value="m" checked="checked" />男 
                    <input type="radio" name="gender" value="f" />女
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" id="submit" value="提交" />
                    <input type="button" id="test" value="重置" /> <!-- id=reset不可以 --> 
                    <input type="button" id="clear" value="清除" />
                </td>
            </tr>
        </table>
    </form>
    <div id=result></div>
</body>
</html>

js代码

$(document).ready(function() {

    // 参数设置
    var options = {
        target : "#result",
        url : "index.jsp",
        type : "post",
        // dataType:"json",
        resetForm : true,
        beforeSubmit : validate,
        success : process
    // clearForm:true,
    // timeout:3000
    };

    // 提交
    $("#myForm").ajaxForm(options);

    // 提交前（可以用来验证表单）
    function validate(formData, jqForm, options) {

        // 取得得表单元素
        var name = formData[0].value;
        // var name=jqForm[0].name.value;

        if (name == "") {
            alert("请输入姓名");
            $("#name").focus();
            return false;
        }

        // 取得参数
        var param = $("#myForm").formSerialize();
        // var param = $.param(formData);
        alert(param);

        return true;
    }

    // 提交后（取得返回信息，比如:操作成功）
    function process(data, status) {
        alert("返回的数据：" + data);
        alert("状态：" + status); // success
    }

    // 重置
    $("#test").click(function() {
        $("#myForm").resetForm();
    });

    // 清除
    $("#clear").click(function() {
        $("#myForm").clearForm();
    });
});

java代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    
    String name = request.getParameter("name");
    String gender = request.getParameter("gender");
    String str = "name="+name+",gender="+gender;
    System.out.println(str);
    out.println("操作成功");
%>

 

posted @ 2016-09-05 16:54  箜篌浅醉  阅读(107)  评论(0)  编辑  收藏  举报