表单提交小结

时间：2014-08-05 19:13:19 阅读：308 评论：0 收藏：0 [点我收藏+]

没有图片的表单提交比较简单：将所有的input，select，checkbox等等赋予了name，然后在点击提交button的时候调用jquery来提交。代码如下

<!DOCTYPE html>
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="jquery.js"></script>
    <style type="text/css">
        #content {
            height: 100px;
            width: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div>
    <h1>完整demo</h1>
    <form id="myform">
      <select name="single">
        <option>Single</option>
        <option>Single2</option>
      </select>
      <select name="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
      </select>
      <br/>
      <input type="checkbox" name="check" value="check1"/> check1
      <input type="checkbox" name="check" value="check2" checked="checked"/> check2
      <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
      <input type="radio" name="radio" value="radio2" /> radio2
      <input type="submit" id="submit" value="submit" />    //提交button
    </form>
    
    <div id="content"></div>
</div>


<script type="text/javascript">
    function successCallback( data ) {
        $("#content").html(data.success);
    }
    $("#submit").click(function(){
        $.ajax({
            cache: true,
            type: "GET",
            url: "formjson.json",
            data:$(‘#myform‘).serialize(),// 你的formid
            async: false,
            error: function(request) {
                alert("Connection error");
            },
            success: successCallback    
        });
    });
</script>
</body>
</html>