风信建站应用实际项目的开发过程,项目需求为通过文字链接模拟表单提交数据,在处理表单提交数据的时候,我们会有两种方式,第一种是直接在文字链接后面接传递的参数,第二种是使用JQuery模拟一个表单提交请求,下面的代码片段主要是说明通过隐藏Form表单提交数据查询结果的实现,示例代码如下:
HTML代码:
<ul>
<li style="text-align:center" class="gjflCur"><a href="javascript:goGjfl('0');">全部</a></li>
<li><a href="javascript:goGjfl('1');">第01类-化学原料</a></li>
<li><a href="javascript:goGjfl('2');">第02类-颜料油漆</a></li>
<li><a href="javascript:goGjfl('3');">第03类-日化用品</a></li>
<li><a href="javascript:goGjfl('4');">第04类-燃料油脂</a></li>
<li><a href="javascript:goGjfl('5');">第05类-医药</a></li>
<li><a href="javascript:goGjfl('6');">第06类-金属材料</a></li>
<li><a href="javascript:goGjfl('7');">第07类-机械设备</a></li>
<li><a href="javascript:goGjfl('8');">第08类-手工器械</a></li>
<li><a href="javascript:goGjfl('9');">第09类-科学仪器</a></li>
<li><a href="javascript:goGjfl('10');">第10类-医疗器械</a></li>
......
</ul>
<form name="hideForm" id="hideForm" action="/search!page.php" method="get">
<input type="hidden" id="pageNo" name="pageNo" value="1"/>
<input type="hidden" id="l" name="l" value="201806061005481578c3lmZ"/>
<input type="hidden" id="gjfls" name="gjfls" value="1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;21;22;23;24;25;26;27;28;29;30;31;32;33;34;35;36;37;38;39;40;41;42;43;44;45"/>
<input type="hidden" id="gjfl" name="gjfl" value="0"/>
<input type="hidden" id="searchKey" name="searchKey" value="APPLE"/>
<input type="hidden" id="st" name="st" value="4"/>
</form>
JQuery代码:
<script type="text/javascript">
function goGjfl(gjflStr){
$("#pageNo").val("1");
$("#gjfl").val(gjflStr);
$("#hideForm").submit();
}
function jumpPage(pageNo){
$("#pageNo").val(pageNo);
$("#hideForm").submit();
}
function goSearchLog(key){
$("#keywordT").val(key);
$("#stT").val("4");
$("#topF").submit();
}
</script>
模拟请求之后url获得的地址信息:
http://www.ithov.net/search!page.php?pageNo=1&l=201806061005481578c3lmZ&gjfls=1%3B2%3B3%3B4%3B5%3B6%3B7%3B8%3B9%3B10%3B11%3B12%3B13%3B14%3B15%3B16%3B17%3B18%3B19%3B20%3B21%3B22%3B23%3B24%3B25%3B26%3B27%3B28%3B29%3B30%3B31%3B32%3B33%3B34%3B35%3B36%3B37%3B38%3B39%3B40%3B41%3B42%3B43%3B44%3B45&gjfl=1&searchKey=APPLE&st=4
通过模拟form表单请注,url中获得参数也更方便啦!
HTML代码:
<ul>
<li style="text-align:center" class="gjflCur"><a href="javascript:goGjfl('0');">全部</a></li>
<li><a href="javascript:goGjfl('1');">第01类-化学原料</a></li>
<li><a href="javascript:goGjfl('2');">第02类-颜料油漆</a></li>
<li><a href="javascript:goGjfl('3');">第03类-日化用品</a></li>
<li><a href="javascript:goGjfl('4');">第04类-燃料油脂</a></li>
<li><a href="javascript:goGjfl('5');">第05类-医药</a></li>
<li><a href="javascript:goGjfl('6');">第06类-金属材料</a></li>
<li><a href="javascript:goGjfl('7');">第07类-机械设备</a></li>
<li><a href="javascript:goGjfl('8');">第08类-手工器械</a></li>
<li><a href="javascript:goGjfl('9');">第09类-科学仪器</a></li>
<li><a href="javascript:goGjfl('10');">第10类-医疗器械</a></li>
......
</ul>
<form name="hideForm" id="hideForm" action="/search!page.php" method="get">
<input type="hidden" id="pageNo" name="pageNo" value="1"/>
<input type="hidden" id="l" name="l" value="201806061005481578c3lmZ"/>
<input type="hidden" id="gjfls" name="gjfls" value="1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;21;22;23;24;25;26;27;28;29;30;31;32;33;34;35;36;37;38;39;40;41;42;43;44;45"/>
<input type="hidden" id="gjfl" name="gjfl" value="0"/>
<input type="hidden" id="searchKey" name="searchKey" value="APPLE"/>
<input type="hidden" id="st" name="st" value="4"/>
</form>
JQuery代码:
<script type="text/javascript">
function goGjfl(gjflStr){
$("#pageNo").val("1");
$("#gjfl").val(gjflStr);
$("#hideForm").submit();
}
function jumpPage(pageNo){
$("#pageNo").val(pageNo);
$("#hideForm").submit();
}
function goSearchLog(key){
$("#keywordT").val(key);
$("#stT").val("4");
$("#topF").submit();
}
</script>
模拟请求之后url获得的地址信息:
http://www.ithov.net/search!page.php?pageNo=1&l=201806061005481578c3lmZ&gjfls=1%3B2%3B3%3B4%3B5%3B6%3B7%3B8%3B9%3B10%3B11%3B12%3B13%3B14%3B15%3B16%3B17%3B18%3B19%3B20%3B21%3B22%3B23%3B24%3B25%3B26%3B27%3B28%3B29%3B30%3B31%3B32%3B33%3B34%3B35%3B36%3B37%3B38%3B39%3B40%3B41%3B42%3B43%3B44%3B45&gjfl=1&searchKey=APPLE&st=4
通过模拟form表单请注,url中获得参数也更方便啦!