jquery + ajax + json入门实例

来源：互联网发布：h5dm新域名编辑：程序博客网时间：2024/06/05 15:20

1. jquery ajax使用

对于一个网页，查询数据时一般使用ajax异步请求，这样可以不用刷新页面，减少流量，减轻服务端负担，加快响应速度。而jquery是一个javascript库（不是框架），对于各个浏览器的兼容性进行了封装，使用jquery将能大大提高开发效率。在一个html页面中，可以通过如下方式引入jquery：

<head>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script></head>

    jquery的引用通常放在head的最前面，以方便自己写的js引用。这里的jquery是从网上下载的，浏览器会自己去下载，网址通常是较快的CDN服务器，也可以下载到本地中。
    假设有如下界面：
这里写图片描述
    需求：只要用户输入一个id，点击查询，就会出现三部电影，而且不用刷新整个页面。可以使用ajax 来获取到用户输入的id，然后向后端发起ajax请求，获取到数据，然后前端重新渲染表格即可。

下面给出一个JSP页面，也就是前端代码。该页面使用了ajax请求json：

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%-- 引进c标签和fmt标签 --%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><html><head>    <title>查询推荐电影</title>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script>    <style type="text/css">        body{            margin : 0px;            padding : 0px;            text-align : center;            font-size : 19px;            font-family : '宋体';        }        /*使得整体居于页面中央*/        #all{            width : 500px;            margin : 10px auto;            padding : 0px;        }        #searchTable{            width : 400px;            height : 200px;            margin : 5px;            border : 1px solid black;            border-collapse : collapse;        }        #searchTable th{            border : 1px solid black;            text-align : center;        }        #searchTable td{            border : 1px solid black;            text-align : center;        }        #getRecommend{            background : #009ad6;            color : white;            width : 80px;            padding : 5px;            cursor : pointer;        }    </style></head><body>    <div id="all">        <table id="searchTable">            <tbody>            <tr>                <td><input type="text" id="userId" placeholder="请输入用户id"/></td>                <td><input type="button" id="getRecommend" value="查询"/></td>            </tr>            <tr>                <th>                    电影1                </th>                <td id="film1">                </td>            </tr>            <tr>                <th>                    电影2                </th>                <td id="film2">                </td>            </tr>            <tr>                <th>                    电影3                </th>                <td id="film3">                </td>            </tr>            </tbody>        </table>    </div>    <%-- jquery 查询 --%>    <script type="text/javascript">    <!-- 给查询按钮添加action-->        $("#getRecommend").click(function(){            // input类型使用val()来获取值            var userId = $('#userId').val();            var url = "/movie/recommend/" + userId;            <!-- 发起ajax请求，使用POST-->            $.ajax({                type: "post",                url: url,                dataType: "json", // accept : json，发起请求的contentType不是json，还是url encoding                success: function (data) { // 请求成功时，刷新表格，这里data是一个json对象                        for(var i = 0; i < 3; i++){                            var filmId = "#film" + (i + 1);                            if(data != undefined && i < data.length){                                // td通过html方法来设置值，没有val方法                                $(filmId).html(data[i]);                            }                            else{                                $(filmId).html('');                            }                        }                },                error: function (XMLHttpRequest, textStatus, errorThrown) {                    alert(errorThrown); // 出错时，显示错误，非200等状态码                }            });        });    </script></body></html>

从上面可以看出，只需要在头部引入jquery的库，然后给按钮添加action就可以了。需要注意的是，jquery引用id元素，需要使用$(“#id”)来引用，而且得到的对象跟原生javascript对象存在一定差别，方法不同，但可以转换。发起的ajax POST请求的url为/movie/recommend/{userId}，accept : json。
jQuery中的\$表示的是jQuery这个函数，也就是

$() -> jQuery()$.ajax -> jQuery.ajax

原生Javascript对象转化为jQuery对象：

// 将document对象转化为jQuery对象$(document)

这时可以使用如下的jQuery提供的方法：

$(document).ready(function(){    //编写页面加载代码，与window.onload相同，在页面所有元素加载完成后运行})

jQuery对象转化为原生Javascript对象：

var doc = $("#doc").get(0);doc.innerHTML = "原生javascript";

下面看一下后端的代码：

package com.springdemo.web;import com.springdemo.dao.JedisDao;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import java.util.ArrayList;import java.util.List;import java.util.Random;/** * Created by gzx on 17-5-10. */@Controller@RequestMapping("/movie")public class MovieController {    @RequestMapping("/recommend/{userId}")    @ResponseBody    public List<String> getRecommendMovie(@PathVariable("userId") String userId){        List<String> list = new ArrayList<String>();        Random random = new Random(System.currentTimeMillis());        list.add("movie" + random.nextInt());        list.add("movie" + random.nextInt());        list.add("movie" + random.nextInt());        return list;        //return JedisDao.getRecommend(userId);    }}

后端使用的是Spring MVC。
跳到pom.xml所在目录，需要安装Maven，可以参考本博客的其他文章。运行如下命令：

mvn compile tomcat7:run

本人使用的是IDEA，启动情况如下：
这里写图片描述

    在chrome浏览器访问localhost:8080，如下：
这里写图片描述
    可以看到chrome会自动下载jquery的库。
    输入1，点击查询，可以看到发起的的ajax请求：

2. jquery data属性、on函数的使用

delegate_jquery.html文件

    <html>    <head>        <title>jquery delegate方法测试</title>        <!-- 引入js库 -->        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>    </head>    <body>        <div>                   <input type="button" name="name" value="Owen" class="btnAdd" />        </div>        <div>                   <input type="button" name="name" value="Evan" class="btnAdd" />        </div>        <div>                   <input type="button" name="name" value="Tony" class="btnAdd" />        </div>        <div>            <input type="button" name="name" value="表白用语" class="expressBtn"/>            <!-- 可以添加该标签的data属性，jquery可以拿到数据 -->            <div class="love" data-language="I love you" data-name='zy' >我爱你</div>        </div>        <!-- 放在标签出现之后，这样才能起作用-->        <script src="action.js" type="text/javascript"></script>    </body></html>

action.js文件：

// 本方法会自动执行，只在加载js文件时执行一次。(    function(e){        // jquery的on对象可以添加已有事件        $('.btnAdd').on('click', function () {                // 获得发生动作的对象，转化为jquery对象。对于每个btnAdd将发生特定于该对象的操作。                    var currentBtnAdd = $(this);                     currentBtnAdd.clone().appendTo(currentBtnAdd.parent());                }        );        $('.expressBtn').on('click', function(){                // click事件时触发express事件                $(this).trigger('express');                }        );        // 也可以添加自定义事件名        $('.expressBtn').on('express', function(){                var love = $('.love');                // 获取data属性的数据                var value = love.data('language') + ',' + love.data('name');                // 替换'我爱你'为 'I love you,zy'                love.html(value);                // 切换显示和不显示                love.toggle();                }        );        // this 对象是window对象。        alert("e is " + e);     })(this);

运行结果如下：

这里写图片描述

本文源码下载

0 0