jquery下的ajax以及与jsp交互

最新推荐文章于 2021-08-06 06:31:36 发布

原创最新推荐文章于 2021-08-06 06:31:36 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何使用jQuery的$.ajax()方法与JSP文件进行数据交互，包括参数设置、数据类型处理及与jsp的简单交互示例。

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

如果有人看到的话，那我要先声明一下，本人菜鸟，以下内容是自己查资料摸索测试的，肯定有错误的地方，看到的话请你指出来，如果也是刚刚研究这方面知识的同志，希望能给你一些参考。

首先大略介绍一下jquery的ajax。
包括$.get(), $.post(),$.ajax()。
我就只说最后一种了，因为最后一种可操作性最强。
一般格式：

$.ajax({
     type: 'POST',//请求方法 默认get
     url: url ,//发送请求的地址 就是要交互的jsp文件
     data: data ,//发送到服务器的数据对象，将自动转换为请求字符串格式
     success: function(data,textStatus){},//请求成功后回调函数
     dataType: dataType,//预期服务器返回的数据类型 
     async:true// 是否异步请求 默认为true
});

具体内容可参看http://www.w3school.com.cn/jquery/ajax_ajax.asp
我大致讲几点：
1.属性data：是key/value类型的对象即可，如{name:”lili”,info:[{home:1},{home:2}]}

2.属性dataType：包括json、text、xml、html、script、jsonp 这个决定了success属性的function(data,textStatus)里data的返回的数据类型，比如写”json”那返回的数据类型就是json对象，可在直接读取对象属性，写text的话那返回的就是字符串了。

3.属性async：这个是刚刚接触者很容易出问题的一个地方，因为默认是异步的，那么$.ajax()在与后台交互的过程中，它后面的代码已经执行了，而不是等待这行完成返回数据后再执行。这就容易造成形如

    var datas=null;
    $.ajax({
        type:"get",
        url:"myjsp.jsp",
        data:{name:"lili"},
        dataType:"json",
        success:function(redata){
            datas=redata;
        }
    });
    alert(datas);

发现datas总是取不到值，其实就是这个原因。
有两个方法，一是加上async:false这个属性，那么ajax与后台交互时，它后面的代码就不会执行了，会一直等到交互完成才顺序执行。另一个办法就是将alert(datas)写在success:function(){}这里面。不管是不是异步执行，这里面的代码都是在ajax请求成功后执行的。

下面说说与jsp的交互问题。
这方面没什么心得，写几个超简单例子好了。注意：以下例子都需引用jquery类库
1.最简单交互传递字符串
html文件：

<html>
    <head>
        <meta http-equip="Content-Types" content="text/html;charset=utf-8"/>
        <script src="jquery-1.11.1.js" type="text/javascript"></script>
    </head>
    <body>
        <script>    
            $.ajax({
                type:"post",
                url:"myJsp.jsp",
                data:{name:"lili"},
                success:function(redata){
                    alert(redata);
                }
            });
        </script>
    </body>
</html>

jsp文件：myJsp.jsp

<%
    String name=request.getParameter("name");
    out.print(name);
%>

2.jsp页面返回对象

<html>
    <head>
        <meta http-equip="Content-Types" content="text/html;charset=utf-8"/>
        <script src="jquery-1.11.1.js" type="text/javascript"></script>
    </head>
    <body>
        <script>    
            $.ajax({
                type:"post",
                url:"myJspMap.jsp",
                data:{name:"lili"},
                dataType:"json",
                success:function(redata){
                    alert(redata.name);
                }
            });
        </script>
    </body>
</html>

jsp文件：myJspMap.jsp

<%@page import="java.util.*"%>
<%@page import="com.google.gson.Gson"%>

<%

    String name=request.getParameter("name");
    Map<String,String> map=new HashMap<String,String>();
    map.put("name",name);
    Gson gson=new Gson();
    String jsonStr=gson.toJson(map);
    out.print(jsonStr);

%>

这里面需要引用gson-2.3.1.jar的类，需要把jar包放在myJspMap.jsp所在项目的WEB-INF\lib下。
gson下载地址：http://download.youkuaiyun.com/detail/qwcs163/8671349

当然特别简单的可以自己拼凑，如把myJspMap.jsp改成如下这样，那什么也不需要引用，但是没有多大实际价值。

<%

    String name=request.getParameter("name");
    String str="{\"name\":\""+name+"\"}";
    out.print(str);

%>