码迷,mamicode.com
首页 > Web开发 > 详细

JQuery(三) Ajax相关

时间:2015-03-09 22:14:38      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

JQuery大大简化了Ajax通用操作,开发者只需要指定请求URL,回调函数即可。

三个主要方法:

$().param(obj):将obj参数(对象或数组)转化成查询字符串。

{name:"疯狂Java讲义", price:109}转换出的查询字符串为:
name=%E7%96%AF%E7%8B%82Java%E8%AE%B2%E4%B9%89&price=109

serialize():将表单或表单控件转化成查询字符串。

user=vince&desc=%E4%BB%8B%E7%BB%8D&book=javaee

serializeArray():将表单或表单控件转化成形如{name:namelabel , value:realvalue}的对象。

第0表单控件名为:user,值为:vince
第1表单控件名为:desc,值为:介绍
第2表单控件名为:book,值为:javaee

 

实例

技术分享
<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 处理表单 </title>
</head>
<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>
<button id="bn3">将对象转换为查询字符串</button><hr />
<span id="show"></span>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<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 />");
        }
    });
    $("#bn3").click(function()
    {
        // 调用$.param将对象转换为查询字符串
        $("#show").html({name:"疯狂Java讲义", price:109}
            + 转换出的查询字符串为:<br/>
            + $.param({name:"疯狂Java讲义", price:109}));
    });
</script>
</body>
</html>
View Code

load(url[,data][,callback]):向URL异步请求,将相应插入当前DOM。

data格式:{key1:val1,key2:val2}。callback是回调函数。

实例

技术分享
<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 使用jQuery的load方法 </title>
</head>
<body>
<h3>请输入你的信息:</h3>
<form id="userForm">
    用户名:<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 src="jquery-1.8.0.js" type="text/javascript">
</script>
<script type="text/javascript">
    // 为id为load的按钮绑定事件处理函数
    $("#load").click(function()
    {
        // 向pro发送Ajax请求,并自动加载服务器响应
        $("#show").load("pro" , $("#userForm").serializeArray());
    });
</script>
</body>
</html>
View Code

 

服务器端如何接收及响应Ajax

  1. Servlet response可接收可发送
  2. 写到session中

 

$().ajax(options)

JQuery(三) Ajax相关

标签:

原文地址:http://www.cnblogs.com/VinceYang1994/p/4324537.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!