?丝的坑人表单神器_html/css_WEB-ITnose-html教程-PHP中文网

?丝的坑人表单神器_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:59:14

原创

1390人浏览过

今天应那些基佬、?丝的要求，特意给他们培训了一下?丝表单神器，专为坑人存在。

目的是: 学会二维数组数据的提交。

1. 见怪不怪
HTML:

<form action=”” method=”post”>　　<input type=”text” name=”row1”/>　　<input type=”submit” value=”提交”/></form>

登录后复制

坑人指数：0

吐槽理由：不宜坑人

立即学习“前端免费学习笔记（深入）”；

2. 偶尔偶遇
HTML:

<form action=”” method=”post”>　　<input type=”text” name=”row[]” />　　<input type=”text” name=”row[]”/>　　<input type=”submit” value=”提交”/></form>

登录后复制

坑人指数：1

吐槽理由：易少写[]

3. 坑人不偿命
HTML

<form action=”” method=”post”>　　<input type=”text” name=”row[1]” />　　<input type=”text” name=”row[2]”/>　　<input type=”text” name=”row[field]” />　　<input type=”text” name=”row[value]”/>　　<input type=”submit” value=”提交”/></form>

登录后复制

坑人指数：2

吐槽理由：Key值分不清楚

4. 不信坑不死你丫的
HTML:

<input type=”text” value=”” class=”you”/><form action=”” method=”post”>    <input type=”text” name=”row1”/>    <input type=”hidden” name=”yade” />    <input type=”button” class=”go_btn” value=”提交”/></form>

登录后复制

JQuery:

$(“.go_btn”).click(function(){    $(“input[name=’yade’]”).val($(“.you”).val());    $(this).parent().submit();})

登录后复制

坑人指数：3

吐槽理由：你丫的为啥要把input放到form外面

5. 坑丫坑丫坑到外婆家

HTML:

<form action=”” method=”post”>    <input type=”text” value=”row1”/>    <input type=”text” value=”row2” />    <input type=”button” value=”提交” class=”go_btn”/></form>

登录后复制

坑人指数：4

吐槽理由：丫的是整哪样，没有name叫程序员咋整

解决方案：

JQuery：

$(“.go_btn”).click(function(){    var parent = $(this).parent();    var map = [];     parent .find("input[type=text]").each(function(){           map.push($(this).val());    });   $.ajax({        url:parent.attr("action"),        data:{map:map}    });}

登录后复制

6. 坑坑更健康了
HTML:

<form action=”” method=”post”>    <input type=”text” name=”row1”/>    <input type=”text” name=”row2”/>    <input type=”button” value=”提交” class=”go_btn”/></form>

登录后复制

坑人指数：3

吐槽理由：你丫的为啥只接受json数据

解决方案：

JQuery

$(“.go_btn”).click(function(){ 　　//$(this).parent().serialize();

登录后复制

　　$.ajax({　　　　data:{s:JSON.stringify($(this).parent().serializeArray())}　})});

登录后复制

7. 不坑不乐意
HTML:

<form action=”” method=”post”>    <p data-value=”111”>        <input type=”text” name=”row1”/>    </p>    <p data-value=”112”>        <input type=”text” name=”row2”/>    </p>    <input type=”button” value=”提交” class="go_btn"/></form>

登录后复制

坑人指数：5

吐槽理由：又p又input的，你想整哪样

解决方案：

JQuery

$(“.go_btn”).click(function(){    var parent = $(this).parent();    var map = [];     parent .find("p").each(function(){           map.push({                id:$(this).attr("data-value"),                value:$(this).find("input").val()        });    });   $.ajax({        url:parent.attr("action"),        data:{map:map}    });}

登录后复制

8. 坑人无节操

HTML:

<form action=”” method=”post”><input type=”text” name=”row[1][]” /><input type=”text” name=”row[2][]”/><input type=”text” name=”row[field][]” /><input type=”text” name=”row[value][]”/><input type=”submit” value=”提交”/></form>

登录后复制

坑人指数：10

吐槽理由：大哥你想整多少维数据，能整成json吗

估计该文章太坑了，被严重吐槽了，所以被工作人员移出首页了。