jquery下的ajax以及与jsp交互

本文介绍如何使用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);

%>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值