表单提交数据模拟网页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	

		<script type="text/javascript" src="../commons/component/jquery/jquery-1.9.0.min.js"></script>

		<script type="text/javascript">

			

			$(function(){

			

				$("#clear").click(function(){

					$("#result").val("");

				});

			

				$("#submit").click(function(){

					var url = $("#url").val();

					var boxes = $("input[name='check']:checked");

					var data = {};

					if (boxes.length > 0){

						for(var i=0; i<boxes.length; i++){

							var num = $(boxes[i]).attr("num");

							var para = $("input[name='para'][num="+num+"]").val();

							var value = $("input[name='value'][num="+num+"]").val();

							if (para.length > 0){

								data[para] = value;

							}

						}

					}

					

					var subType = $("input[name='subType']:checked").val();

					$.ajax({

						url : url,

						dataType : "text",

						type : subType,

						data : data,

						success : function(data){

							$("#result").val(data);

						}, 

						error : function(req, status, error){

							alert(error);

						}

					});

				});

				

				$("input").keypress(function(e){

					var key = e.which;

    				if (key == 13) {

						$("#submit").click();

					}

				});

			});

			

		</script>

	</head>



	<body>

		<div>

			<table>

				<tr>

					<td align="right">

						<label>访问地址:</label>

					</td>

					<td colspan="2">

						<input id="url" value="http://localhost:8080/wxy/" style="410px;height:20px;"/>

					</td>

					<td>

						<label>提交方式:</label>

						<label><input name="subType" value="get" type="radio"/>GET</label>

						<label><input id=post1 name="subType" value="post" type="radio" checked="checked"/>POST</label>

						<input type="button" id="submit" value="提交"/>

						<input type="button" id="clear" value="清除"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=p10  name="check" type="checkbox" num="1"/>参数1:</label>

					</td>

					<td>

						<input  id=p11 name="para" num="1" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=p12 name="value" num="1" style="200px;height:20px;"/>

					</td>

					<td rowspan="20" style="vertical-align:top;">

						<div style="display:inline-block">

							<label style="vertical-align:top;">返回JSON:</label>

							<textarea readonly="readonly" id="result" style="700px;height:800px;overflow:auto"></textarea>

						</div>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=p20 name="check" type="checkbox" num="2"/>参数2:</label>

					</td>

					<td>

						<input id=p21 name="para" num="2" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=p22 name="value" num="2" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=p30 name="check" type="checkbox" num="3"/>参数3:</label>

					</td>

					<td>

						<input id=p31 name="para" num="3" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=p32 name="value" num="3" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=p40 name="check" type="checkbox" num="4"/>参数4:</label>

					</td>

					<td>

						<input id=p41 name="para" num="4" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=p42 name="value" num="4" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=p50 name="check" type="checkbox" num="5"/>参数5:</label>

					</td>

					<td>

						<input id=p51 name="para" num="5" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=p52 name="value" num="5" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=p60 name="check" type="checkbox" num="6"/>参数6:</label>

					</td>

					<td>

						<input id=p61 name="para" num="6" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=p62 name="value" num="6" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=p70 name="check" type="checkbox" num="7"/>参数7:</label>

					</td>

					<td>

						<input id=p71 name="para" num="7" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=p72 name="value" num="7" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=p80 name="check" type="checkbox" num="8"/>参数8:</label>

					</td>

					<td>

						<input id=p81 name="para" num="8" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=p82 name="value" num="8" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=p90 name="check" type="checkbox" num="9"/>参数9:</label>

					</td>

					<td>

						<input id=p91 name="para" num="9" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=p92 name="value" num="9" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=200 name="check" type="checkbox" num="10"/>参数10:</label>

					</td>

					<td>

						<input id=201 name="para" num="10" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=202 name="value" num="10" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input  id=210 name="check" type="checkbox" num="11"/>参数11:</label>

					</td>

					<td>

						<input id=211 name="para" num="11" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=212 name="value" num="11" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=220 name="check" type="checkbox" num="12"/>参数12:</label>

					</td>

					<td>

						<input id=221 name="para" num="12" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=222 name="value" num="12" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=230 name="check" type="checkbox" num="13"/>参数13:</label>

					</td>

					<td>

						<input id=231 name="para" num="13" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=232 name="value" num="13" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=240 name="check" type="checkbox" num="14"/>参数14:</label>

					</td>

					<td>

						<input id=241 name="para" num="14" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=242 name="value" num="14" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=250 name="check" type="checkbox" num="15"/>参数15:</label>

					</td>

					<td>

						<input id=251 name="para" num="15" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=252 name="value" num="15" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=260 name="check" type="checkbox" num="16"/>参数16:</label>

					</td>

					<td>

						<input id=261 name="para" num="16" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=262 name="value" num="16" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=270 name="check" type="checkbox" num="17"/>参数17:</label>

					</td>

					<td>

						<input id=271 name="para" num="17" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=272 name="value" num="17" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=280 name="check" type="checkbox" num="18"/>参数18:</label>

					</td>

					<td>

						<input id=281 name="para" num="18" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=282 name="value" num="18" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=290 name="check" type="checkbox" num="19"/>参数19:</label>

					</td>

					<td>

						<input id=291 name="para" num="19" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=292 name="value" num="19" style="200px;height:20px;"/>

					</td>

				</tr>

				<tr>

					<td align="right">

						<label><input id=300 name="check" type="checkbox" num="20"/>参数20:</label>

					</td>

					<td>

						<input id=301 name="para" num="20" style="200px;height:20px;"/>

					</td>

					<td>

						<input id=302 name="value" num="20" style="200px;height:20px;"/>

					</td>

				</tr>

			</table>

		</div>

	</body>

</html>

  

原文地址:https://www.cnblogs.com/jifeng/p/3384656.html