说jQuery,不得不说jQuery对ajax的支持。
首先学习两个方法:serialize(),serializeArray()
html:
<form id="test">
用户名:<input id="user" name="user" type="text" value="yanzhenwei"/><br/>
个人介绍:<textarea rows="5" cols="10" id="desc"name="desc">
热情,大方,热爱编程
</textarea><br/>
喜欢的图书:<select id="book" name="books">
<option value="java">疯狂java讲义</option>
<option value="javaee">轻量级Java EE 企业应用</option>
<option value="ajax">疯狂Ajax讲义</option>
</select>
<br/>
<button id="bn1">查询字符串</button>
<button id="bn2">查询json对象</button>
<input id="load" type="button" value="load"/>
<span id="show"></span>
</form>
js:
//将id为bn1的按钮绑定事件处理函数
$("#bn1").click(function (){
//将id为test的表单转换成为查询字符串
$("#show").html($("#test").serialize());
});
$("#bn2").click(function (){
//将所有输入元素转换为按钮
var arr=$(":input").serializeArray();
$("#show").empty();
//遍历数组
for (var index in arr){
$("#show").append("第"+index+"个元素名称是"+arr[index].name+",值为"+arr[index].value+"<br/>");
}
});
以上两个参数对于以后传递参数非常重要。
首先看一个以load方式的ajax例子:
html:还是刚才那个html.
js:
$("#load").click(function (){
$("#show").load("pro.jsp",$("#test").serializeArray());
});
当然,还需要pro.jsp
<%@ page language="java" pageEncoding="gbk"%>
<%
String user=request.getParameter("user");
String[] books=request.getParameterValues("books");
out.println(user+",您喜欢的图书是:");
out.println("<ol>");
for(int i=0;i<books.length;i++){
out.println("<li>"+books[i]+"</li>");
}
out.println("</ol>");
%>
接着看一个以get方式的ajax的例子:
html 同上
js:
$("#load").click(function (){
$("#show").load("pro.jsp",$("#user").serializeArray(),
function (data,statusText){
$("#show").append("服务器响应状态为:"+statusText+"<br/>");
$("#show").append(data);
},
"html"
);
});
由于post方式和get方式差不多,故不再举例。
说明,如果数据量不是太大可以使用jQuery.get()方式;如果数据量比较大,建议用jQuery.post()方式
分享到:
相关推荐
国内第一本jQuery权威教程,一版再版,累计重印14次,不可错过的实战类经典技术著作! 本书是jQuery经典技术教程的最新...本书注重理论与实践相结合,由浅入深、循序渐进,适合各层次的前端Web开发人员学习和参考。
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 31 一.摘要 31 二.前言 31 三. 区分DOM属性和元素属性 31 四. 操作"DOM属性" 32 五. 操作"元素属性" 32 六,修改CSS样式 34 七.获取常用属性 35 八.总结 39 ...
jQuery基础教程(第四版)中文pdf版+配套源码,很有用,很好。
jquery基础教程第四版源码,帮助学习jquery
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习...
锋利的jquery非常棒的学习jquery的书(4)
从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery 中的Ajax 从零开始学习jQuery (七) jQuery 动画-让页面动起来! 从零开始学习...
分为四部分,jquery很全面的学习资料,关键是里面有很多例子,增加学习jquery的兴趣,降低学习的难度。
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery...
jQuery学习时使用的项目文件,可以方便学习jQuery
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) AJAX快餐 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery ...
jQuery基础教程第四版+配套源码 非常适合初学者的一本书,还有配套源码
JQuery第一课-tab标签页、JQuery第二课-多张图的无缝滚动、JQuery第三课-图片轮播、JQuery第四课-下拉菜单(无限级)、JQuery第五课-弹出窗口、JQuery第六课-拖拽、JQuery第七课-模拟滚动条、JQuery第八课-放大镜、...
AJAXandPHP2ndEdition.pdf BeginningJavaScriptAndCSSDevelopmentWithJQuery.pdf Drupal6JavaScriptjQuery.pdf jQuery13WithPHP.pdf 四本书e版的
从零开始学习jQuery pdf,第一篇:开天辟地入门篇;第二篇:jQuery最重要的部分——万能的选择器;第三章:管理Jquery包装集;第四章:使用jQuery操作元素的属性与样式;第五篇:事件与事件对象……
《jQuery基础教程(第4版)》是jQuery经典技术教程的最新升级版,涵盖jQuery 1.10.x和jQuery 2.0.x。... 《jQuery基础教程(第4版)》注重理论与实践相结合,由浅入深、循序渐进,适合各层次的前端Web开发人员学习和参考。
jquery教程很好的学习资料,对前端开发帮助很大,jquery
分四步一步步学习。适合于jquery初学者。
jQuery基础教程(第四版)中文pdf版,注重理论与实践相结合,由浅入深、循序渐进,适合各层次的前端Web开发人员学习和参考。