jQuery中Ajax相干方法
日期：2014-05-16 浏览次数：20766 次
jQuery中Ajax相关方法
Ajax相关方法，两个工具方法（serialize(),serializeArray()）
Ajax相关方法，两个工具方法（serialize(),serializeArray()）
<body>
<form id="test">
用户名：
<input id="user" name="user" type="text" />
<br />
个人介绍：
<textarea id="desc" name="desc"></textarea>
<br />
喜欢的图书：
<select id="book" name="book">
<option value="java">
Java
</option>
<option value="javaee">
Java EE
</option>
<option value="ajax">
Ajax
</option>
</select>
</form>
<button id="bn1">
查询字符串
</button>
<button id="bn2">
查询JSON对象
</button>
<hr />
<span id="show"></span>
<script type="text/javascript">
//为id为bn1的按钮绑定事件处理函数
$("#bn1").click(function() {
//将id为test1的表单转换为查询字符串
$("#show").html($("#test").serialize());
});
//为id为bn2的按钮绑定事件处理函数
$("#bn2").click(function() {
//将所有输入元素转换为数组
var arr = $(":input").serializeArray();
$("#show").empty();
//遍历arr数组
for ( var index in arr) {
$("#show").append(
"第" + index + "表单控件名为：" + arr[index].name + ",值为："
+ arr[index].value + "<br />");
}
});
</script>
</body>
?Ajax相关方法,load()方法的使用
<body>
<center>
<h3>使用load来发送Ajax请求很简便，开发者不需要考虑XMLHttpRequest的细节，</h3>
<h3>要是开发者想要管理Ajax请求的细节，则可以考虑jQuery.ajax(options)的方法</h3>
</center>
<h3>
请输入你的信息：
</h3>
<form id="user">
用户名:
<input type="text" name="user" />
<br />
喜欢的图书:
<select multiple="multiple" name="books">
<option value="java">
Java
</option>
<option value="javaee">
Java EE
</option>
<option value="ajax">
Ajax
</option>
<option value="xml">
XML
</option>
</select>
<br />
<input id="load" type="button" value="Load" />
</form>
<hr />
<div id="show"></div>
<script type="text/javascript">
//为id为load的按钮绑定事件处理函数
$("#load").click(function() {
//向pro.jsp发送Ajax请求，并自动加载服务器响应
$("#show").load("LoadServlet", $("#user").serializeArray());
});
</script>
</body>
?Ajax相关方法,使用get/post方法请求（下面是script.jsp代码）
<body>
<h3>
请输入你的信息：
</h3>
<form id="user">
用户名:
<input type="text" name="user" />
<br />
喜欢的图书:
<select multiple="multiple" name="books">
<option value="java">
Java
</option>
<option value="javaee">
Java EE
</option>
<option value="ajax">
Ajax
</option>
<option value="xml">
XML
</option>
</select>
<br />
<input id="load" type="button" value="发送异步GET请求" />
</form>
<hr />
<div id="show"></div>
<script type="text/javascript">
//为id为load的按钮绑定事件处理函数
$("#load").click(function() {
//指定向pro.jsp发送请求，以id为user表单里各表单空间作为请求参数
$.get("LoadServlet", $("#user").serializeArray(),
//指定回调函数
function(data, statusText) {
$("#show").empty();
$("#show").append("服务器响应状态为：" + statusText + "<br />");
$("#show").append(data);
},
//指定服务器响应为html
"html");
});
</script>
</body>
?使用jQuery的getScript方法
<body>
<ul style="display: none">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input id="get" type="button" value="getScript" />
<div id="show"></div>
<script type="text/javascript">
//为id为get的按钮绑定事件处理函数
$("#get").click(function() {
$.getScript("
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
