jQuery中ajax的用法

最新推荐文章于 2024-03-13 07:00:00 发布

wangjian_an

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量809

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java后台网页制作文章标签： jquery ajax javascript

本文链接：https://blog.youkuaiyun.com/wangjian_an/article/details/52527842

网页制作同时被 2 个专栏收录

16 篇文章

订阅专栏

java后台

4 篇文章

订阅专栏

本文介绍jQuery库的基础使用方法，特别是其Ajax功能的应用。通过实例展示了如何利用jQuery进行GET和POST请求，以及如何处理服务器返回的不同类型的数据如XML和JSON。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Query是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jquery==$

使用方法：

$(function() {
    在这里写jquery代码
}

基本的操作请查看API

jQuery中ajax的用法

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery-Ajax的基本用法</title>
<script type="text/javascript" src="<c:url value='/js/jquery-1.7.js'/>"></script>
<script type="text/javascript">
    $(function() {
        $("#btn1").click(function(){
            var url="<c:url value='/GetServlet'/>";
        /*  jQuery.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] ) */

            $.get(url, { "name": "John", time: "2pm" },function(data,text,xhr){//与没有引号都行
                alert(data);
            });
        });
        $("#btn2").click(function(){//支持中文
            var url="<c:url value='/GetServlet'/>";
        /*  jQuery.post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] ) */

            $.post(url, { "name": "大哥王", time: "2pm" },function(data,text,xhr){//与没有引号都行
                alert(data);
            });
        });
        //※2  ajax通讯,服务器应答内容为:xml
        $("#btn3").click(function(){
            var url="<c:url value='/GetServlet'/>";
            $.post(url,{name:"Jack",age:29},function(data,textStatus,xhr){
                //alert(data); //◆◆返回的data是:xmlDocument对象
                $(data).find("user").each(function(idx){
                //$.each($(data).find("user"),function(idx){都可以
                    var name=$(this).find("name").first().text();
                    var name2=$(this).find("name:first").text();
                    var name3=$(this).find("name:eq(0)").text();
                    var name4=$(this).find("name").eq(0).text();
                    alert(name+","+name2+","+name3+","+name4);              
                } );
            },"xml");//相比前面，此处增加了一个参数：xml   ----若不给该参数，则由系统自动判断，一般识别为字符串
        });
        //※3  ajax通讯,服务器应答内容为:json
        $("#btn4").click(function(){
                var url="<c:url value='/JsonServlet'/>";
                $.post(url,{name:"Jack",age:29},function(data,textStatus,xhr){
                    alert($(data)); //◆◆返回的json
                    var addr=data["addr"];//map读取
                    //var addr=data[0];不行
                    alert(addr);
                    //for(var i=0;i<data.length;i++){//list
                        //alert(data[i].id+","+data[i].name+","+data[i].age);
                    //}
                },"json");//相比前面，此处增加了一个参数：xml   ----若不给该参数，则由系统自动判断，一般识别为字符串
        });
    });


</script>
</head>

<body>
    <input id="btn1" type="button" value="GET-Ajax" />
    <br />

    <input id="btn2" type="button" value="POST-Ajax" /><br />
    <input id="btn3" type="button" value="POST-Ajax-XMl" /><br />
    <input id="btn4" type="button" value="POST-Ajax-Json" /><br />
</body>
</html>

GetServlet

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GetServlet extends HttpServlet {


    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String name=request.getParameter("name");
        String time=request.getParameter("time");
        System.out.println("name:"+name+"  time"+time);
        out.print("name:"+name+"  time:"+time);
        out.close();
    }


    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String name=request.getParameter("name");
        String time=request.getParameter("time");
        System.out.println("name:"+name+"  time"+time);
        String xml="<user><name>"+name+"</name><age>"+request.getParameter("age")+"</age></user>";
        out.print(xml);
        out.close();
    }

}

JsonServlet

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

import cn.hncu.domain.User;

public class JsonServlet extends HttpServlet {


    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        List<User> users = new ArrayList<User>();
        users.add(new User("A001","Jack",20));
        users.add(new User("A002","Rose",22));
        users.add(new User("B001","张三",20));
        users.add(new User("B002","李四",30));
        //用fastjson工具(只有一个jar包)帮我们把list转换成json串
        String json=JSONArray.toJSONString(users);
        String strJson=json.toString();
        //System.out.println(strJson);

        Map<String, Object> map = new HashMap<String, Object>();
        map.put("addr", "湖南");
        map.put("height", "170");
        map.put("marry", "no");
        map.put("user", new User("A003","小李",25));
        String obj = JSONObject.toJSONString(map);
        System.out.println(obj.toString());

        out.print(obj);
    }

}