積累筆記--總結最簡單的異步表單提交方法

前臺表單:

<body>
    <form id="from_submit"  method="post" action="../test.ashx">
    <input type="text" name="name" value="陸文軍" />
    <input type="radio" name="sex" checked="checked" value="男" />男
    <input type="radio" name="sex" value="女" />女
    <select name="job">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JAVA">JAVA</option>
        <option value="joAJAXb">AJAX</option>
    </select>
    <textarea name="addr" id="editor_id">湖北省武漢市</textarea>
    <button type="submit" >
        submit</button>
    </form>
</body>

js方法:

$('#from_submit').submit(function () {
            var ajax_url = $(this).attr('action'); //獲取提交的表單
            var ajax_type = $(this).attr('method'); //獲取提交的方法
            var ajax_data = $(this).serialize(); //獲取表單數據
            $.ajax({
                type: ajax_type, //表單提交類型
                url: ajax_url, //表單提交目標
                data: ajax_data, //表單數據
                datatype: 'json', //不寫這句,默認也是json,表示後臺返回的值類型
                success: function (data) {
                    if (data.msg == 'true') {//msg 後臺返回的json數據
                        alert(data.name + data.sex + data.job);
                    } else {
                        alert('失敗!');
                    }
                }, error: function () {
                    alert('錯誤!');
                }
            });
});

一般處理程序:

if (c.Request["name"] != null && c.Request["sex"] != null && c.Request["job"] != null)
{
     //c.Response.Write(c.Request["name"] + c.Request["sex"] + c.Request["job"]);
     c.Response.Write("{\"msg\":\"true\",\"name\":\"" + c.Request["name"] + "\",\"sex\":\"" + c.Request["sex"] + "\",\"job\":\"" + c.Request["job"] + "\"}");
}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章