首页 > 代码库 > 表单提交小结

表单提交小结

2024-07-15 22:53:48   234人阅读

没有图片的表单提交比较简单：将所有的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="http://www.mamicode.com/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="http://www.mamicode.com/check1"/> check1      <input type="checkbox" name="check" value="http://www.mamicode.com/check2" checked="checked"/> check2      <input type="radio" name="radio" value="http://www.mamicode.com/radio1" checked="checked"/> radio1      <input type="radio" name="radio" value="http://www.mamicode.com/radio2" /> radio2      <input type="submit" id="submit" value="http://www.mamicode.com/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>

 

这里我设置了url为json文件，json内容如下

{    “success":true  }

*注意，这里的提交button设置在form里面了。提交后，会刷新整个页面，所以#content里不会显示任何东西，并且form里的内容也重新刷新了。

之前提交的内容可以在控制台的query string parameters里看到。

-------------------------------------------------------------

 

而当我们修改一下代码，把提交button拉出form外面，再提交试一试

 

页面并没有刷新，表单的内容处于我们刚刚选择的状态，并且content里也显示了json返回的数据

 


联系
我们