[分享]JQuery小技巧-ajax表單

edited 十月 2013 in Javascript
這兩天有點冷清,那就來分享一些無3小路用的東西(笑
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script>
function form2json(str)
{
    var data=new Object();
    $(str).each(function()
    {
        if($(this).attr('type')=='checkbox')
        {
            if($(this).attr('checked'))
            {
                data[$(this).attr('cname')]=1;//JQuery的 .attr()是很詭異的東西,允許你在元素中自行定義屬性,並進行讀寫
            }
            else
            {
                data[$(this).attr('cname')]=0;
            }
        }
        else
        {
            data[$(this).attr('cname')]=$(this).val();
        }
    });
    return data;
}

$(document).ready(function()
{
    /*這是一個很標準的JQuery ajax code模型,但是...他很麻煩*/
    $('#sendAjaxForm').click(function()
    {
        var d=0;//腦人理由之一,關於checkbox的值,往往我們送進資料表後是用 0/1或Y/N 去表示狀態,當然你也可以在後端去判斷
        if($('#d').attr('checked'))
        {
            d=1;
        }
        $.ajax(
        {
            type: 'POST',
            url:'',
            /*最主要的問題,串資料串到手軟(3~5個欄位也就算了,1x個或更多時呢...),而且正常狀況下id名哪有可能那麼短,丟出去後$_POST['a']這樣的命名方式,也很難理解其意義*/
            data:{'a':$('#a').val(),'b':$('#b').val(),'c':$('#c').val(),'d':d},
            dataType: 'json',
            success:function(ret)
            {
                
            },
            error:function()
            {
                
            }
        }); 
    });
    /*於是..偷懶用的function form2json()就誕生了*/
    $('#sendAjaxFormAuto').click(function()
    {
        var postData=form2json('#ajaxFormAuto .json');//JQuery的 .each()真的是好物阿!!!
        $.ajax(
        {
            type: 'POST',
            url:'',
            data:postData,//這下子,拎祖媽管你有幾百個欄位阿,不干我事!!
            dataType: 'json',
            success:function(ret)
            {
                
            },
            error:function()
            {
                
            }
        }); 
    });
});
</script>
</head>
<body>
<form id="ajaxForm">
    <input type="text" id="a"/>
    <input type="text" id="b"/>
    <input type="text" id="c"/>
    <input type="checkbox" id="d" />
    <input type="button" value="send" id="sendAjaxForm">
</form>

<!-- 多class="json" 對於有用IDE的朋友來說應該不是難事,相信大家都會用Code Templates的功能偷懶 -->
<form id="ajaxFormAuto">
    <input type="text" class="json" cname="name"/>
    <input type="text" class="json" cname="account"/>
    <input type="text" class="json" cname="mail"/>
    <input type="checkbox" class="json" cname="options" />
    <input type="button" value="send" id="sendAjaxFormAuto">
</form>
</body>
</html>

原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=5693

評論

  • edited 一月 2011
    你已經失去了學者研究風範了
    明明是愛自幹的人現在改變作風了啊 哈哈
  • edited 一月 2011
    @pigo
    別這說嘛~想法總是會改變的 XD
    只是最近變成靠JQ自幹特效罷了~_~
  • edited 一月 2011
    我比較那悶的
    為何你的 checkbox html 一開始不給 value ?
    這樣就可以用 http://api.jquery.com/serialize/ 這個去把 form 的值串接了啊
  • edited 一月 2011
    @pigo
    真糟我不知道有.serialize()可以用(又多學一招),不過這應該是用在get傳時比較有效吧?
    他return的是string阿...官網是有人寫到可以用下面的方式轉成Object
    var editserialize = $('form#edit').serialize();
    editserialize = decodeURIComponent(editserialize.replace(/\+/g, " "))
    根據你的說法我把function改成這樣應該就可以了,變成用isset()去判斷了
    話說isset($var{0})真的很好用 XD
    function form2json(str)
    {
        var data=new Object();
        $(str).each(function()
        {
            if($(this).attr('type')=='checkbox')
            {
                if($(this).attr('checked'))
                {
                    data[$(this).attr('cname')]=$(this).val();
                }
            }
            else
            {
                data[$(this).attr('cname')]=$(this).val();
            }
        });
        return data;
    }
    
  • edited 一月 2011
    POST 也可以傳啊
    就和你原本的用法一樣
Sign In or Register to comment.