var path = "${pageContext.request.contextPath}"; $(document).ready(function(){ var url = path+"/webservice/getUser"; var queryString = ""; queryString = "?"+$("#search").serialize(); decodeURIComponent(queryString,true); $("#btn1").click(function(){ alert($("#search").serialize()); $("#resultDiv").load(url+queryString,function(response, status, xhr){ alert("提交成功!"+ status); }); }) }) function ajaxGet(){ var url = path+"/webservice/ajaxGet"; $.get(url,function(data,status){ alert("数据:"+data+",状态:"+status); alert(" 牛牪犇"); }); alert("回调成功!"); }
<body>
<div>
<h2>
WebService
</h2>
${web }
</div>
<div id="seacrhDiv">
<form id="search" name="search" method="get" action="${pageContext.request.contextPath}/webservice/getUser">
姓名:
<input type="text" name="name" id="nameId" value="1111"><br/>
密码:
<input type="text" name="passw" id="passwId"><br/>
<input type="button" value="jQuery提交" id="btn1">
<input type="submit" value="表单提交" id="btn2">
<input type="button" value="js提交" id="btn3" onclick="search()"><br/>
<input type="button" value="ajaxGet" id="ajax" onclick="ajaxGet()">
</form>
</div>
<div id="resultDiv">
开始页面:
</div>
</body>
详细说明
.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。
表单元素有几种类型:
<form>
<div><input type="text" name="a" value="1" id="a" /></div>
<div><input type="text" name="b" value="2" id="b" /></div>
<div><input type="hidden" name="c" value="3" id="c" /></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f" />
</div>
<div>
<input type="submit" name="g" value="Submit" id="g" />
</div>
</form>
.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些:
$('form').submit(function() {
alert($(this).serialize());
return false;
});
输出标准的查询字符串:
a=1&b=2&c=3&d=4&e=5