jQuery异步表单提交-优快云博客

jquery异步提交表单

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

demo1 页面刷新

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

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

<!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>

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

{
    “success":true  
}

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

页面不刷新

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

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

=========================================================

传统的表单提交方式

最原始的表单提交方式是在form标签里加上 name=“xxx” method="post" action="demo.json" ,这样将input type="submit“的按钮放入表单中，点击后就会提交表单，页面同时跳转到后台页面。

<form name="formdemo" method="post" action="demo.json">
      <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="button" id="submit" value="submit" />   //提交按钮
    </form>

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

如果要作一点的话，用洋气的jquery来提交，可以是这样

div

<form id="myform" name="formdemo" method="post" action="demo.json">
      <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
</form>
<input type="button" id="submit" value="submit" />        //button或者任何东西

$("#submit").click(function(){
      $("#myform").submit();
 });

这样可以达到和上面同样的效果

转载于:https://www.cnblogs.com/cjy1993/p/3892735.html

表单提交小结